如何在ThreeJS中有效地更新幾何的拓撲？

Question

我想避免創建新的類型數組和后續的gc（）。 我使用BufferedGeometry制作了幾何。 接收事件后，我的頂點和faces索引會更新。 我可以通過設置verticesNeedUpdate來更新坐標，但它不會更新面。 該更新每秒被稱為〜20-50次，這在瀏覽器上可能很繁瑣。 如何避免避免為JavaScript垃圾收集器創建大量垃圾？ （請參見下面的方法update() ）。

function WGeometry77(verts, faces) {
    THREE.Geometry.call( this );
    this.type = 'WGeometry77';
    this.parameters = {};
    // Initially create the mesh the easy way, by copying from a BufferGeometry
    this.fromBufferGeometry( new MyBufferGeometry77( verts, faces ) ); 
};

WGeometry77.prototype = Object.create( THREE.Geometry.prototype );
WGeometry77.prototype.constructor = WGeometry77;

WGeometry77.prototype.update = function(verts, faces) {
    var geom = this;
    var nl = Math.min(geom.vertices.length, verts.length/3);
    for ( var vi = 0; vi < nl; vi ++ ) {
        geom.vertices[ vi ].x = verts[vi*3+0];
        geom.vertices[ vi ].y = verts[vi*3+1];
        geom.vertices[ vi ].z = verts[vi*3+2];
    }
    var nf = Math.min(geom.faces.length, faces.length/3);
    for ( var fi = 0; fi < nf; fi ++ ) {
        geom.faces[ fi ].a = faces[fi*3+0];
        geom.faces[ fi ].b = faces[fi*3+1];
        geom.faces[ fi ].c = faces[fi*3+2];
    }
    geom.verticesNeedUpdate = true;  // Does not update the geom.faces
}

PS。 我的代碼是用Emscripten編寫的，它執行以下操作：

var verts = Module.HEAPF32.subarray(verts_address/_FLOAT_SIZE, verts_address/_FLOAT_SIZE + 3*nverts);

我想做的幾乎是制作動畫或動態幾何圖形（使用Marching Cubes計算）。 但是我的拓撲（網格圖）也已更新。 我應該使用哪個ThreeJS類？ 如果不存在此類，我是否應該創建一個像UpdatableBufferedGeometry這樣的新類？

Answer 1

如果要提高效率，則應該創建BufferGeometry而不是Geometry 。

您可以使用此示例的源代碼作為參考： http : //threejs.org/examples/#webgl_buffergeometry_uint

Answer 2

要在渲染THREE.BufferGeometry之后對其進行更新，可以使用以下模式：

geometry.attributes.position.setXYZ( index, x, y, z );

geometry.attributes.position.needsUpdate = true;

對於索引BufferGeometry ，您可以像這樣更改index數組：

geometry.index.array[ index ] = value;

geometry.index.needsUpdate = true;

您不能調整緩沖區的大小，只能更改其內容。 您可以預分配更大的數組並使用

geometry.setDrawRange( 0, numVertices );

three.js r.78