前言

当我们用three渲染物体时，一般是有多个模型对象组合而成，如果我们把相同的模型对象组合到一起就会方便渲染。three中专门是用层级模型的数据结构来帮助我们实现这个功能，那么这节我们就来看一下什么是层级模型。

组对象

假设我们去渲染一个四脚桌子，整个桌子可以分为：桌面、桌腿两种模型对象，桌腿有四个，它们除了位置不同，其他都一样，如果我们把桌腿当成四个模型会比较麻烦，这时我们可以把四个桌腿合成一个组就会方便很多。three中有组对象Group，就是能够将多个模型对象变成一个小组。下面我将两个Mesh模型放进同一个组中：

//创建两个Mesh模型
const box1Geometry = new THREE.BoxGeometry();
const box1Material = new THREE.MeshBasicMaterial({ color: 0x8888 });
const box1 = new THREE.Mesh(box1Geometry, box1Material);
const box2Material = new THREE.MeshBasicMaterial({ color: 0x5124 });
const box2 = new THREE.Mesh(box1Geometry, box2Material);
box2.position.set(0, 2, 0);
//创建组对象
const group = new THREE.Group();
//将box1 box2添加到组对象中
group.add(box1, box2);
//将组对象添加到场景中
scene.add(group);

此时group就是box1、box2的父对象，而scene又是group的父对象，这样就形成了层级结构。对父对象group进行平移等转换子对象也会跟着转换。

   group.position.set(0,-2,0)

场景

这时候我们在控制台打印scene，有一个children属性，就是其子对象：

从图上我们能清晰看到这种层级结构，这种一层层父对象包含子对象就形成了层级模型。所以整个scene就是层级模型，总结下来就是：

当前Group后面还能嵌套Group，一直到具体的模型对象。 不管是Scene、Group、Light等对象都有添加与删除方法，用于添加子对象与删除子对象。

• .add：添加一个子对象，这个方法我们一直在用。
• .remove:删除一个子对象。

   group.remove(box2)

这两个方法都是继承于Object3D三维物体对象。

总结

以上就是层级模型，通过这一小节，我们就能明白Scene对象的层级构造，在渲染物体时也会利用Group对象去合并模型。