Three.js лучший способ добавления нескольких кубов на сцену

Question

Я новичок в threejs и я проверял на raycasting tutorial , в которой автор добавил кубов на сцене, как это:

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://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/

Если после этого вы хотите использовать raycasting, вы можете выбрать отдельное лицо, так как в этом примере:

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

Однако, для 200 кубов, вам может не понадобиться спускаться по маршруту слияния.