Javascript Three.js-如何使用BufferGeometry绘制不连续线?
我有以下情况:我需要画一条有孔的线(一条不连续的线)。这意味着我的线路由几个部分组成,这些部分在视觉上没有组合,但它们在其他上下文中属于一个整体。这些线段不仅仅由两个点组成,因此不像Javascript Three.js-如何使用BufferGeometry绘制不连续线?,javascript,three.js,webgl,line,Javascript,Three.js,Webgl,Line,我有以下情况:我需要画一条有孔的线(一条不连续的线)。这意味着我的线路由几个部分组成,这些部分在视觉上没有组合,但它们在其他上下文中属于一个整体。这些线段不仅仅由两个点组成,因此不像THREE.LinePieces那样工作 此时,我正在使用BufferGeometry存储顶点。一位同事告诉我,在WebGL中,可以在顶点之外创建两个数组:一个包含顶点索引,另一个包含顶点组合顺序。 下面是我的意思的一个例子: indices = [0,1,2,3,4,5] vertices = [x0, y0, z
THREE.LinePieces
那样工作
此时,我正在使用BufferGeometry
存储顶点。一位同事告诉我,在WebGL中,可以在顶点之外创建两个数组:一个包含顶点索引,另一个包含顶点组合顺序。
下面是我的意思的一个例子:
indices = [0,1,2,3,4,5]
vertices = [x0, y0, z0, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, x5, y5, z5]
order = [0,1,1,2,3,4,4,5]
有了这个,我会得到两条线:第一条线从点0到1到2,然后是一个洞,然后是第二条线从3到4到5
比如说:
.___.___. .___.___.
0 1 2 3 4 5
.___.___.___. .___.
0 1 2 3 4 5
我不熟悉WebGL,所以我相信我的同事有可能创建这样的结构。但是这是否也适用于Three.js?如果是,你是怎么做的
编辑: 我再次与同事交谈,得到了这个代码片段
indexBufferData = [0,1,1,2,3,4,4,5];
gl.glBindBuffer(GL.GL_ELEMENT_ARRAY_BUFFER, indexBufferID);
gl.glBufferData(GL.GL_ELEMENT_ARRAY_BUFFER,
indexBufferData.limit() * Buffers.SIZEOF_INT,
indexBufferData, GL.GL_STATIC_DRAW);
他说我只需要复制索引,而不需要复制顶点(也可以,但不推荐)就可以得到线段
因此,我在
WebGLRenderer
中搜索,并在第2380行看到,如果在我的BufferGeometry
中有一个属性index
,将创建必要的缓冲区。但设置此属性没有效果。使用THREE.LinePieces
时,它仍然只连接两个点。如果您试图绘制一系列连接的线段,后跟一个间隙,然后是另一系列连接的线段,则可以使用THREE.LineSegments
例如,这是一条有三段的直线的模式,后面是一条有一段的直线:
v0, v1, v1, v2, v2, v3, v4, v5
看起来像这样:
.___.___. .___.___.
0 1 2 3 4 5
.___.___.___. .___.
0 1 2 3 4 5
three.js r.91一个代码示例和一个可供使用的
// .___.___.___. .___.
// 0 1 2 3 4 5
// line material
var material = new THREE.LineBasicMaterial({
color: 0xffffff
});
vertices = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(10, 0, 0),
new THREE.Vector3(20, 0, 0),
new THREE.Vector3(30, 0, 0),
new THREE.Vector3(40, 0, 0),
new THREE.Vector3(50, 0, 0)
];
var positions = new Float32Array(vertices.length * 3);
for (var i = 0; i < vertices.length; i++) {
positions[i * 3] = vertices[i].x;
positions[i * 3 + 1] = vertices[i].y;
positions[i * 3 + 2] = vertices[i].z;
}
indices = [0, 1, 1, 2, 2, 3, 4, 5];
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1));
var line = new THREE.LineSegments(geometry, material);
scene.add(line);
/。
// 0 1 2 3 4 5
//线路材料
var材料=新的三线基本材料({
颜色:0xffffff
});
顶点=[
新的三个矢量3(0,0,0),
新的三个矢量3(10,0,0),
新的三个矢量3(20,0,0),
新的三个矢量3(30,0,0),
新的三个矢量3(40,0,0),
新三,矢量3(50,0,0)
];
var positions=新的Float32Array(顶点.length*3);
对于(var i=0;i
但如何定义这些差距?THREE.LinePieces
的文档中说“第一个连接到第二个,第三个连接到第四个,依此类推”。你怎么说连接线,例如四个点连接到一个线段,然后做一个间隙?我不想添加两次顶点。抱歉,您必须添加两次顶点。如果你没有太多的间隙,你可以有单独的线几何。嗯,好吧,所以没有可能像我同事告诉我的那样做?真可惜。我希望在不添加两次顶点的情况下得到一个解决方案:/目前,我为每个线段都有单独的线,但这不是很方便。好的,所以我必须尝试复制我的顶点。我对我的表现很好奇。我编辑了我的问题。也许我现在很清楚我在寻找什么。我找不到索引
是否在Three.js代码中的任何地方计算,可能它正在覆盖我的命题?!?