Three.js - 如何使用BufferGeometry繪制不連續的線？

Question

我有以下情況：我需要畫一條帶孔的線（一條不連續的線）。 這意味着我的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它仍然僅連接兩個點。

Answer 1

一個代碼示例和一個小提琴 。

// .___.___.___.   .___.
// 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);

Answer 2

如果您嘗試繪制一系列連接的線段，然后是間隙，然后是另一系列連接的線段，則可以使用THREE.LineSegments 。

例如，這是具有三個段的行的模式，后面是帶有一個段的行：

v0, v1, v1, v2, v2, v3, v4, v5

看起來像這樣：

.___.___.___.   .___.
0   1   2   3   4   5

three.js r.91