使用Three.js在场景中添加多个立方体的更好方法

Question

我是三.js的新手，我在查看一个射线拾取教程时，发现作者是这样向场景中添加立方体的：

geom = new THREE.CubeGeometry( 5, 5, 5 );

cubes = new THREE.Object3D();
scene.add( cubes );

for(var i = 0; i < 100; i++ ) {
        var grayness = Math.random() * 0.5 + 0.25,
                mat = new THREE.MeshBasicMaterial(),
                cube = new THREE.Mesh( geom, mat );
        mat.color.setRGB( grayness, grayness, grayness );
        cube.position.set( range * (0.5 - Math.random()), range * (0.5 - Math.random()), range * (0.5 - Math.random()) );
        cube.rotation.set( Math.random(), Math.random(), Math.random() ).multiplyScalar( 2 * Math.PI );
        cube.grayness = grayness; // *** NOTE THIS
        cubes.add( cube );
}

这里的情况很容易理解，但我的问题是：

如果您将多个立方体添加到Object3D中，而不是将每个立方体单独添加到场景中，是否有任何好处？

我主要关心的是使用raycasting的情况，有时您必须一起对所有立方体（大约200个立方体或平面）进行动画处理。

- 0x_Anakin

Answer 1

将这些方块添加到 Object3D 中会将它们分组在一起，但每个网格都会按顺序渲染。据我所知，提高渲染许多方块性能的一种方法是使用 THREE.GeometryUtils.merge() 合并它们。这在下面的博客中有描述：

http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/

如果您想使用射线投射，则可以像这个例子一样挑选出单独的面：

http://stemkoski.github.io/Three.js/Mouse-Click.html

然而，对于200个立方体，您可能不需要采取合并网格的方法。

- peatroot

---

THREE.GeometryUtils.merge() 已被 geometry.merge(geometry2) 取代。但是，由于您已经在使用共享几何体，我怀疑合并操作对您没有帮助。 - Hobbes