2

I'm using THREE.js to display several thousand cubes at a time. The geometries of these cubes have been merged (I'm displaying several thousand at a time, too slow if they aren't merged) and a requirement I have is to colour the cubes based on a value. The example here colours each cube individually but is grindingly slow once more than 1000 cubes are generated. If I simply use one material for all objects, I can render 100,000+ cubes and the animation is still smooth.

Is there a better way to accomplish what I need?

Code

/* 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

一种方法是拆分差异 - 如果您计算较少数量的材料并将它们分配给立方体。如果使用单一材料的性能要快几个数量级，那么我大胆猜测拥有数十种甚至数百种材料会比拥有数千种材料快得多。

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

于 2013-12-13T21:15:09.160 回答