2

一度に数千のキューブを表示するために THREE.js を使用しています。これらの立方体のジオメトリは結合されており (一度に数千を表示していますが、結合されていないと遅すぎます)、値に基づいて立方体に色を付ける必要があります。この例では、各立方体を個別に色付けしていますが、1000 を超える立方体が生成されると非常に遅くなります。すべてのオブジェクトに 1 つのマテリアルを使用するだけで、100,000 以上の立方体をレンダリングでき、アニメーションは依然としてスムーズです。

必要なことを達成するためのより良い方法はありますか?

コード

/* snip */
materials = [];
geometry = new THREE.CubeGeometry(20, 20, 20);
mesh = new THREE.Mesh(geometry);
mergedCubes = new THREE.Geometry();

// Create randomly positioned cubes
for (var i = 0; i < numCubes; i++) {
    material = new THREE.MeshBasicMaterial({color:0xffffff * Math.random(),wireframe:false});
    materials.push(material);
    THREE.GeometryUtils.setMaterialIndex(mesh.geometry, i);
    mesh.position.x = Math.random() * 300 - 150;
    mesh.position.y = Math.random() * 300 - 150;
    mesh.position.z = Math.random() * 300 - 150;
    THREE.GeometryUtils.merge(mergedCubes, mesh);
}

// Create merged mesh
group = new THREE.Mesh(mergedCubes, new THREE.MeshFaceMaterial( materials ));
group.matrixAutoUpdate = false;
group.updateMatrix();
/* snip */

jsfiddle

4

1 に答える 1

0

1 つのアプローチは、違いを分割することです。より少ない数の材料を計算し、それらを立方体に割り当てるとどうなるでしょうか。単一のマテリアルでパフォーマンスが桁違いに高速である場合、数十または数百のマテリアルを使用する方が、数千を使用するよりもはるかに高速になると思います。

したがって、キューブ ループの外側でマテリアル配列を計算し、マテリアル配列内のランダムな位置に基づいてそれらを割り当てます。

于 2013-12-13T21:15:09.160 に答える