javascript - Way to handle multple object as a single one in thee.js

Question

I'm new to three.js. I need to handle multiple objects as a single one. In simple terms I need to render a kind of bas-relief:

• a box geometry (the base)
• an extruded image on top of it
• and some text.

Each object has to have a different material but they has to act as a single one: location and rotation the same etc.

I'm still new to three.js so I don't know how to make a kind of composite pattern: with group? Joining geometry? Join mesh? What is the best way?

Right now I'm using everything in a group but.. it seems a bit slow.

Answer 1

You could nest your objects in an Object3D instance.

group = new THREE.Object3D(); //create a container
group.add( mesh1 ); //add a mesh with geometry to it
group.add( mesh2 );
scene.add( group ); //add the group to the scene

EDIT:
Release 69 added THREE.Group class and the release note say to use this instead of Object3D where possible, but I can not find any other documentation.
https://github.com/mrdoob/three.js/releases

group = new THREE.Group(); //create a container
group.add( mesh1 ); //add a mesh with geometry to it
group.add( mesh2 );
scene.add( group ); //add the group to the scene