將兩個索引幾何體添加到BufferGeometry中

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; 
}