Three.js向场景添加多个多维数据集的更好方法

Question

我是threejs的新手，当时我正在查看光线投射教程 ，其中作者向场景添加了多维数据集，如下所示：

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个多维数据集或平面）动画化。

Answer 1

将立方体添加到 Object3D 会将它们组合在一起，但每个网格将按顺序渲染。据我了解，获得渲染多个立方体性能的一种方法是使用 THREE.GeometryUtils.merge() 合并它们。以下博客对此进行了描述：

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

如果您随后想要使用光线投射，则可以挑选出各个面，如下例所示：

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

但是，对于 200 个立方体，您可能不需要走网格合并路线。