Mesh of meshes in three.js

Question

I am currently working on some 3D models for a project using three.js.

The model I am currently developing consists of a set of basic geometries used together to represent, say, a defence tower.

To put it clearly, I have 2 Boxes, 3 Cylinders to represent said tower.

Boxes:

var base = new THREE.Mesh(new THREE.BoxGeometry(7, 0.2, 7), new THREE.MeshPhongMaterial({color: 0xff000f}));
var head = new THREE.Mesh(new THREE.BoxGeometry(3, 1, 2.5), new THREE.MeshPhongMaterial({color: 0xaaffff}));

Cylinders:

var body = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 5, 20), new THREE.MeshPhongMaterial({color: 0xffffff}));
var leftCannon = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 4, 20), new THREE.MeshPhongMaterial({color: 0xffffff}));
var rightCannon = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 4, 20), new THREE.MeshPhongMaterial({color: 0xffffff}));

Please disregard the materials' colours, they are provisory.

The original idea is to add each of these meshes separately into the scene:

scene.add(base);
scene.add(body);
scene.add(head);
scene.add(leftCannon);
scene.add(rightCannon);

However I feel there is certainly a better way of doing this, at least a way that involves the ability to have more without decreasing perfomance.

I was thinking about using a container that would have all the geometries, and add one object to the scene instead of several.

With that in mind, I want to have a particular material for each separate mesh (for example the cannons are metalish and the base is dark) and I also want to keep the ability of translating/rotating/scaling my meshes separately (right now the tower's head moves with mouse dragging and WASD keys).

Answer 1

Create a THREE.Object3D or THREE.Group and add the Meshes to that object. Add this object to the Scene. This will keep the option of transforming and changing the material from the individual pieces.