I'm new to threejs and I was checking a raycasting tutorial in which the author added cubes to the scene like this:
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 );
}
It's pretty much easy to understand what is going on here, but my question is this:
Is there any benefit if you add multiple cubes into and Object3D
instead of adding each cube separately into the scene?
I'm mostly interested in a scenario where you use raycasting
, and at some cases you have to animate all the cubes (about 200 cubes or planes) together.
Adding the cubes to an Object3D will group them together, but each mesh will be rendered sequentially. As I understand it, one way to gain performance for rendering many cubes is to merge them using THREE.GeometryUtils.merge(). This is described in the following blog:
http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/
If you then want to use raycasting, you could pick out individual faces, as in this example:
http://stemkoski.github.io/Three.js/Mouse-Click.html
However, for 200 cubes, you may not need to go down the mesh merging route.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With