Question

我正在使用THREE.js一次显示几千个立方体。这些立方体的几何形状已合并（我一次显示几千个，如果它们没有合并则太慢），我的要求是根据值为立方体着色。这里的示例单独为每个立方体着色，但是一旦产生超过1000个立方体，它就会变得非常缓慢。如果我只是为所有对象使用一种材质，我可以渲染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

Answer 1

一种方法是分割差异 - 如果计算较少数量的材料并将其分配给立方体，该怎么办？如果单一材料的性能提高了几个数量级，那么我冒昧地猜测，拥有数十甚至数百种材料比拥有数千种材料要快得多。

因此，计算立方体循环外的材料数组，然后根据材质数组中的随机位置分配它们。

THREE.js：如何提高多个合并多维数据集上多种材质的性能？

代码

1 个答案: