我有以下情况:我需要画一条带孔的线(一条不连续的线)。这意味着我的 Line 由几个段组成,这些段在视觉上没有组合,但它们在其他一些上下文中属于一起。这些部分不仅仅包含两个点,所以不是这样的THREE.LinePieces
工作方式。
此时,我正在使用 aBufferGeometry
来存储我的顶点。一位同事告诉我,在 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
我不熟悉 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 行搜索并看到如果index
my 中有属性,BufferGeometry
则会创建必要的缓冲区。但是设置这个属性没有效果。使用THREE.LinePieces
时它仍然只连接两点。