Group 层级模型(树结构)案例

场景对象Scene的子对象，除了组对象Group之外，还可以看到环境光AmbientLight、平行光DirectionalLight、辅助坐标对象AxesHelper。

场景对象对象scene构成的层级模型本身是一个树结构，场景对象层级模型的第一层，也就是树结构的根节点，一般来说网格模型Mesh、点模型Points、线模型Line是树结构的最外层叶子结点。构建层级模型的中间层一般都是通过 Threejs 的 Group类来完成，Group 类实例化的对象可以称为组对象。

父对象执行.add()方法的本质就是把参数中的子对象添加到自身的子对象属性.children中。

// 创建两个网格模型 mesh1、mesh2
const geometry = new THREE.BoxGeometry(20, 20, 20);
const material = new THREE.MeshLambertMaterial({ color: 0x00ffff });
// 创建一个组对象group
const group = new THREE.Group();
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.translateX(25);
// 把mesh1型插入到组group中，mesh1作为group的子对象
group.add(mesh1);
// 把mesh2型插入到组group中，mesh2作为group的子对象
group.add(mesh2);
// 把group插入到场景中作为场景子对象
scene.add(group);

.add()方法总结

场景对象Scene、组对象Group的.add()方法都是继承自它们共同的基类(父类)Object3D。

// add 方法可以单独插入一个对象，
group.add(mesh1);
group.add(mesh2);
// 也可以同时插入多个子对象。
group.add(mesh1, mesh2);

父对象旋转缩放平移变换，子对象跟着变化

网格模型mesh1、mesh2作为设置为父对象group的子对象，如果父对象 group 进行旋转、缩放、平移变换，子对象同样跟着变换，就像你的头旋转了，眼睛会跟着头旋转。

// 沿着Y轴平移mesh1和mesh2的父对象，mesh1和mesh2跟着平移
group.translateY(100);

// 父对象缩放，子对象跟着缩放
group.scale.set(4, 4, 4);

// 父对象旋转，子对象跟着旋转
group.rotateY(Math.PI / 6);

Object3D 表示模型对象节点

受 threejs 历史影响，你会在很多别的代码中看到Object3D作为Group来使用，如果看到不用奇怪。某种程度上，你可把两者画等号，只是Group更加语义化，Object3D本身就是表示模型节点的意思。

const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
const obj = new THREE.Object3D(); // obj作为mesh1和mesh2的父对象
obj.add(mesh1, mesh2);

mesh 也能添加 mesh 子对象

threejs 默认mesh也可以添加子对象，其实原因很简单mesh和Group父类都是Object3D，本质上也可以认为都是Object3D。

// mesh基类也是Object3D
mesh1.add(mesh2);