three.js中的网格划分

Question

我目前正在为一个使用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键移动)。

Answer 1

创建一个THREE.Object3D或THREE.Group，并将网格添加到该对象。将这个对象添加到场景中。这将保留转换和改变材料的选择，从个别的部分。