Three.jsシーンから多くのオブジェクトを削除するslow

Question

多くの個々のオブジェクトを持つ大きなThree.jsシーンを扱います。 25kから50kのシーンで終わるのは簡単です。Object3Dインスタンス。はい、これは大変ですが、現在のところ、この番号を簡単に減らす方法はありません。すべてのオブジェクトを削除してそのようなシーンを消去するには、通常約2分かかります。これは、それぞれの要素を個別に​​で削除し、すべての要素を最初に収集してscene.remove(element1, element2, ...);を呼び出す場合です。我々はまた、シーン全体のインスタンスを置き換えようとしましたが、役に立たなかった：それはまだ遅かったです。

異なるグラフィックスカード間にいくつかの違いがあり、これはグラフィックスカードから削除する必要があると思われるバッファジオメトリを多く使用していることが原因であると思われます。

オブジェクトの削除中にブラウザがブロックされているため、この期間はウェブサイトが使用できなくなります。オブジェクトの削除のパフォーマンスを向上させる方法や、非ブロック化する方法がありますか（個々の要素を削除する場合はsetTimeout()はありません）。

これが簡略化で問題（最初のフレームの後に除去50Kキューブを使用して、私たちのオブジェクトのいくつかははるかに複雑です）を示しています。単一のメッシュをマージし、削除メッシュ試してみてくださいhttp://jsfiddle.net/ua2mg5ty/

Answer 1

を。

http://jsfiddle.net/2t8j5caj/

除去時間：0.13500000000021828ms、時間をレンダリング：3.6000000000012733ms

var mesh = new THREE.Mesh(singleGeometry, material); 
for (var i = 0; i < nCubes; i++) { 
    var box = new THREE.BoxGeometry(1, 1, 1); 
    var cube = new THREE.Mesh(box); 
    cube.position.x = (Math.random() - 0.5) * 5; 
    cube.position.y = (Math.random() - 0.5) * 5; 
    cube.position.z = (Math.random() - 0.5) * 5; 
    cube.scale.set((Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize), (Math.random() - 1 * cubeSize)) 
    cube.updateMatrix(); 

    singleGeometry.merge(cube.geometry, cube.matrix); 
} 
var mesh = new THREE.Mesh(singleGeometry, material); 
scene.add(mesh);