Question

目前我正在使用一组预定义数据（包含索引，顶点和颜色）和多个THREE.Geometry来向场景添加对象。你可以想象，这很慢，因为它需要一次添加和删除许多对象或者将许多对象合并在一起。

但是，如果我使用单个THREE.BufferGeometry，这将允许我使用_gl.bufferSubData添加和删除对象，理论上应该对性能影响最小。

我遇到的麻烦就是把它付诸实践。我已经有了bufferSubData函数，但是我无法在同一个BufferGeometry中添加两组数据。我猜这是因为数据不会相互跟随（因为它们是两个独立的对象）所以它们都使用相同的索引。 This image shows the result

我创建了一个JSFiddle，它使用一个包含块数据的名为section的数组。如果有人可以看看并改变它，所以它添加了两组数据，我真的很感激它：

http://jsfiddle.net/dUqwT/

另外，我一直无法找到索引偏移的目的。如果有人可以链接或解释它的用途，那将非常有帮助。

感谢您的帮助！

Answer 1

好吧，弄清楚它是如何完成的，我已经更新了JSFiddle：
http://jsfiddle.net/dUqwT/1/

它比我想象的更简单，它与索引偏移量无关（仍然不知道它是做什么的）。我只是确保它正确附加到每个数组，因此不会覆盖位置，索引和颜色。通过使用两个变量并将它们设置为适当的长度来做到这一点。

实际上，由于我添加到BufferGeometry的对象将是动态的，我需要为每个对象提供一定数量的缓冲区，而不是将两个变量设置为长度。这样我就可以使用_gl.bufferSubData删除和更改每个对象。

for (var chunkID = 0; chunkID < 2; chunkID++) {

    var chunkIndices = section[chunkID].indices;
    var chunkVertices = section[chunkID].vertices;
    var chunkColors = section[chunkID].colors;

    var sectionXPos = chunkID * 32;
    var sectionYPos = 0;
    var sectionZPos = 0;

    // Add indices to BufferGeometry
    for ( var i = 0; i < chunkIndices.length; i ++ ) {
        var q = chunkIndices[i];

        var j = i * 3 + iLength;

        indices[ j ]     = (q[0] + vLength / 3) % chunkSize;
        indices[ j + 1 ] = (q[1] + vLength / 3) % chunkSize;
        indices[ j + 2 ] = (q[2] + vLength / 3) % chunkSize;

    }

    // Add vertices to BufferGeometry
    for ( var i = 0; i < chunkVertices.length; i ++ ) {
        var q = chunkVertices[i];

        var j = i * 3 + vLength;

        // positions
        positions[ j ]     = q[0] + sectionXPos;
        positions[ j + 1 ] = q[1] + sectionYPos;
        positions[ j + 2 ] = q[2] + sectionZPos;

        // colors
        var hexColor = chunkColors[i / 4];
        color.set(hexColor);

        colors[ j ]     = color.r;
        colors[ j + 1 ] = color.g;
        colors[ j + 2 ] = color.b;
    }

    iLength += chunkIndices.length * 3;
    vLength += chunkVertices.length * 3;
}

将两个索引几何添加到BufferGeometry

1 个答案: