坐标系与辅助工具

在 Three.js 中，坐标系是一个非常重要的概念，它决定了物体的位置、旋转和缩放。Three.js中有很多坐标系，其中最常用的是世界坐标系和局部坐标系。本节我们将重点介绍这两种坐标系，其他坐标系将在后续章节中介绍。

世界坐标系

世界坐标系(World Space)是整个 3D 场景的绝对参照物。无论场景中有多少物体，原点(0, 0, 0)永远是固定的。所有的物体最终都需要转换到这个坐标系下才能被渲染器正确绘制。

局部坐标系

局部坐标系是相对于物体自身的。当你创建一个物体（如 Mesh）时，它就有了一个属于自己的中心点。

• 为什么要用它？ 想象一个旋转的地球，地球绕着太阳转（世界坐标位移），同时它还在自转（局部坐标旋转）。
• 层级关系： 当你把一个物体 A 添加到另一个物体 B 中时（B.add(A)），A 的所有位移和旋转都是相对于 B 的中心点进行的。

右手坐标系

不管是世界坐标系还是局部坐标系，x/y/z三个轴的顺序关系都遵循右手定则，即右手坐标系：

• 大拇指：X 轴（正值向左）

• 食指：Y 轴（正值向上）

• 中指：Z 轴（正值向前）

AxesHelper

Three.js中提供了AxesHelper工具，可以将场景或者物体的坐标轴可视化显示。AxesHelper 会在场景中绘制三条彩色线条，分别代表 X、Y、Z 三个轴，红色为X轴、绿色为Y轴、蓝色为Z轴。

我们在上节基于Vite搭建第一个场景中代码的基础上增加以下代码即可：

const axesHelper = new THREE.AxesHelper(30);
scene.add(axesHelper);

参数 5 表示坐标轴线条的长度，这是一个相对值，没有具体的单位。由于相机视角问题，我们用鼠标旋转一下场景，就能和上面的图对上：

有了AxesHelper的辅助，后面在增加物体时就有了明确的参考目标。

GridHelper

为了更方便后续的开发，GridHelper也需要做个说明。GridHelper 提供了一个水平网格，非常适合作为地面参考。通常我们会将 GridHelper 放在场景底部，作为放置物体的基准面。

在之前的代码中继续增加以下代码：

const gridHelper = new THREE.GridHelper(50, 10);
scene.add(gridHelper);

• 参数 1：网格的总长度和宽度
• 参数 2：网格细分的次数（每边有多少个格子）

本节总结

本节学习坐标系中的世界坐标系和局部坐标系，并且给场景中增加了AxesHelper和GridHelper、这两个辅助工具对于后续场景的开发有很大的帮助。从下节开始，我们将开始涉及Three.js的核心概念和功能。