CODEWITHSUNDEEP
javascript3dthree.js
0x_Anakin
0x_Anakin

Reputation: 3269

Three.js better way of adding multiple cubes to a scene

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.

Upvotes: 5

Views: 5965

Answers (1)

peatroot
peatroot

Reputation: 21

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.

Upvotes: 2

Related Questions