我有以下情况:我需要画一 strip 孔的线(一条不连续的线)。这意味着我的 Line 由几个部分组成,这些部分在视觉上没有组合,但它们在其他一些上下文中属于一起。这些线段不仅仅由两个点组成,因此不像 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
我不熟悉 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
时,它仍然只连接两个点。
最佳答案
代码示例和 fiddle 一起玩。
// .___.___.___. .___.
// 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);
关于javascript - Three.js - 如何使用 BufferGeometry 绘制不连续的线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19221527/