三个.js中的网格的网格

我目前正在为一个使用three.js.的项目制作一些3D模型

我目前正在开发的模型由一组基本的几何形状组成，这些几何形状一起用来表示，比如说，防御塔。

说得清楚一点，我有两个盒子，三个圆柱体来代表这座塔。

方框：

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}));

气缸：

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}));

请不要理会这些材料的颜色，它们是附带条件。

最初的想法是将这些网格中的每一个单独添加到场景中：

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

然而，我觉得肯定有更好的方法可以做到这一点，至少有一种方法可以在不降低表现的情况下拥有更多。

我正在考虑使用一个容器，该容器将具有所有几何图形，并向场景中添加一个对象，而不是几个对象。

考虑到这一点，我希望每个单独的网格都有一种特定的材料（例如，大炮是金属的，底座是深色的），我还希望保持单独平移/旋转/缩放网格的能力（现在塔的头部通过鼠标拖动和WASD键移动）。