three.js 中的网格网格

Question

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

我目前正在开发的模型由一组基本几何图形组成，这些几何图形一起用于表示防御塔等。

说清楚一点，我有 2 个盒子，3 个圆柱体来代表所说的塔。

盒子：

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

请忽略 material 的颜色，它们是暂时的。

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

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

但是我觉得肯定有更好的方法来做到这一点，至少是一种在不降低性能的情况下拥有更多能力的方法。

我正在考虑使用一个包含所有几何体的容器，并将一个对象而不是多个对象添加到场景中。

考虑到这一点，我希望每个单独的网格都有一个特定的 material（例如，大炮是金属色的，底座是深色的）并且我还想保留 [=34] 的能力=] 我的网格分开（现在塔的头部随着鼠标拖动和 WASD 键移动）。

Answer 1

创建一个 THREE.Object3D 或 THREE.Group 并将网格添加到该对象。将此对象添加到场景中。这将保留从各个部分转换和更改 material 的选项。

three.js 中的网格网格

Mesh of meshes in three.js

javascript

3d

three.js