3

我有以下情况：我需要画一条带孔的线（一条不连续的线）。这意味着我的 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);

他说我只需要复制索引而不是顶点（也可以但不推荐）来获得线段。

所以我在第WebGLRenderer2380 行搜索并看到如果indexmy 中有属性，BufferGeometry则会创建必要的缓冲区。但是设置这个属性没有效果。使用THREE.LinePieces时它仍然只连接两点。

4

2 回答 2

8

一个代码示例和一个可以玩弄的小提琴。

// .___.___.___.   .___.
// 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);
于 2016-02-03T14:17:39.513 回答
5

如果您尝试绘制一系列连接的线段，然后是间隙，然后是另一系列连接的线段，您可以使用THREE.LineSegments它。

例如，这是一条三段线的模式，后面是一条线段：

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

看起来像这样：

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

三.js r.91

于 2013-10-08T13:12:59.440 回答