标题：Three.js中的层级结构和变换原理

建议先阅读完文章，再查看 实例代码

在Three.js中，理解和运用层级结构及变换原理对于创建复杂的3D场景至关重要。本文将深入探讨如何使用Group和Object3D来构建层级结构，并展示父对象的变换如何影响子对象。

1. 层级结构的基本概念

在Three.js中，所有对象都继承自Object3D类，这使得每个对象都可以拥有子对象，形成一个层级结构，类似于树状结构。

2. 使用Group创建层级结构

Group是Object3D的一个子类，专门用于组织场景中的其他对象。

创建层级结构示例

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建组对象和网格模型
const group = new THREE.Group();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });

// 创建多个网格模型并添加到组对象
const meshes = [];
for (let i = 0; i < 5; i++) {
  const mesh = new THREE.Mesh(geometry, material.clone());
  mesh.position.x = (i - 2) * 2; // 将网格模型分散放置
  group.add(mesh);
  meshes.push(mesh);
}

// 将组对象添加到场景
scene.add(group);

3. 父对象变换与子对象的关系

父对象的旋转、缩放和平移变换会自动应用到所有子对象上。

父对象变换示例

// 旋转组对象，所有子网格模型将跟随旋转
group.rotation.y += 0.01;

// 每帧更新组对象的位置
function animate() {
  requestAnimationFrame(animate);
  group.rotation.y += 0.01; // 绕Y轴旋转
  renderer.render(scene, camera);
}
animate();

4. 访问和操作子对象

通过.children属性，可以访问父对象的子对象列表。

访问子对象示例

console.log(group.children); // 打印组对象的所有子对象

5. .add()方法的使用

.add()方法是Object3D类的一部分，用于添加子对象到父对象。

使用.add()方法示例

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh); // 直接将网格模型添加到场景

6. Object3D的灵活性

Object3D类非常灵活，可以用于创建自定义的层级结构。

使用Object3D示例

const customObject = new THREE.Object3D();
customObject.position.set(0, 5, 0); // 设置自定义对象的位置
scene.add(customObject);

7. 完整实例：动态场景中的层级结构

以下是一个完整的示例，展示了如何创建一个包含动态变换的层级结构的场景。

// 创建几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });

// 创建组对象并添加多个网格模型
const group = new THREE.Group();
for (let i = 0; i < 5; i++) {
  const mesh = new THREE.Mesh(geometry, material.clone());
  mesh.position.x = (i - 2) * 2;
  group.add(mesh);
}

// 创建辅助对象，如坐标轴
const axesHelper = new THREE.AxesHelper(5);
group.add(axesHelper); // 将辅助对象添加到组

// 创建场景、相机和渲染器代码如上所述

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  group.rotation.y += 0.01; // 绕Y轴旋转组对象
  renderer.render(scene, camera);
}
animate();

这个示例创建了一个包含多个立方体的组对象，以及一个坐标轴辅助对象，展示了层级结构和父对象变换如何影响子对象。通过动画循环，组对象绕Y轴旋转，展示了动态变换的效果。