在三维空间中，一切的物体和相机都需求依据一个一致的坐标系来进行定位和操作。了解坐标系的根本概念，关于创立安稳、精确的三维作用至关重要。

根底

Three.js 选用的是右手坐标系，这意味着假如你将右手的三个手指伸直，别离指向 X、Y 和 Z 轴的方向，你的拇指指向的方向即为 X 轴，食指指向的方向即为 Y 轴，而中指指向的方向则是 Z 轴的正方向。

• X 轴：表明水平方向，正方向指向右侧。
• Y 轴：表明笔直方向，正方向指向上方。
• Z 轴：表明深度方向，正方向指向观察者外，负方向指向观察者内。
  这一坐标系为咱们供给了一个标准化的办法来描绘三维空间中的物体方位、旋转和缩放。
  

坐标轴的作用

在 Three.js 中，坐标轴用于表明和定位物体。每个物体都有一个 position 特色，这个特色决议了物体在三维空间中的方位。经过调整 position 特色的 X、Y 和 Z 值，咱们能够在三维空间中自在移动物体。

此外，坐标轴还有助于了解物体的旋转和缩放。经过旋转和缩放矩阵，咱们能够对物体进行旋转、缩放等操作，而这些操作的根底便是 Three.js 中的坐标系。

Three.js 坐标系中的各个概念

国际坐标系与部分坐标系

在 Three.js 中，坐标系分为国际坐标系和部分坐标系。它们别离用于描绘物体在大局场景中的方位与物体相关于本身的改换。

国际坐标系

国际坐标系（World Coordinate System）是整个 Three.js 场景的大局坐标体系，用于一致描绘场景中一切物体的方位、旋转和缩放。它是肯定的、仅有的，类似于地图中的全球坐标，一切的物体都经过相关于这个大局坐标系的数值来定位。

特色

• 固定原点：国际坐标系的原点 (0, 0, 0) 是整个场景的基准点。
• 一致参照系：不管物体怎么移动、旋转或缩放，国际坐标系一直不变。
• 肯定性：物体的国际坐标描绘的是它在整个场景中的肯定方位和状况。

用处

• 描绘物体在场景中的肯定方位。
• 用于相机、灯火等大局性的设置。
• 烘托引擎依据物体的国际坐标来决议终究的显现作用。
• 创立一个物体并设置其方位：

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
cube.position.set(5, 3, -2); // 设置物体在国际坐标系中的方位 scene.add(cube);`;

在这个比如中，立方体 cube 的方位为 (5, 3, -2)，这表明它相关于场景的原点 (0, 0, 0) 在 X 方向移动了 5，Y 方向移动了 3，Z 方向移动了 -2。

部分坐标系

部分坐标系（Local Coordinate System）是物体本身的坐标体系，每个物体都有自己的部分坐标系，用于描绘其内部的坐标参照。部分坐标系的原点一般坐落物体的中心（除非模型本身界说了不同的原点）。

特色

• 动态原点：物体的部分坐标系原点一直跟从物体的方位和旋转。
• 相对性：部分坐标系中的改换是相关于物体本身的，而不是国际坐标系。
• 层级联系：部分坐标系会遭到父物体坐标系的影响。

用处

• 用于物体的自界说改换（如部分旋转或部分平移）。
• 在杂乱的层级场景中，子物体相关于父物体的方位和方向能够经过部分坐标系来界说。
• 在动画和交互中，对物体的部分坐标系进行操作更灵敏。
• 在部分坐标系中，旋转物体：

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
cube.rotation.set(Math.PI / 4, 0, 0); // 绕部分 X 轴旋转 45 度
scene.add(cube);

在这里，立方体 cube 绕本身的部分 X 轴旋转，而不是绕场景的国际 X 轴旋转。

物体改换：方位、旋转与缩放

Three.js 中的物体改换一般由三个根本操作构成：方位、旋转和缩放。

方位（Position）：物体的方位由其在三维空间中的坐标来表明。经过修正物体的 .position 特色，能够改动物体在场景中的方位。

object.position.set(10, 5, -3);

旋转（Rotation）：旋转是指物体环绕某个轴进行旋转。Three.js 运用 Euler 角和四元数两种办法来描绘物体的旋转。Euler 角经过三个视点来表明物体的旋转，而四元数则防止了万向锁问题。你能够运用 .rotation 特色来设置物体的旋转，或许运用 .quaternion 特色来直接运用四元数旋转。

object.rotation.set(Math.PI / 2, 0, 0); // 旋转 90 度

缩放（Scale）：缩放决议物体的巨细。Three.js 中的 .scale 特色答应你别离调整 X、Y 和 Z 轴方向上的缩放份额。

object.scale.set(2, 2, 2); // 将物体缩放到本来的 2 倍巨细

视图坐标系与国际坐标系的联系

相机视图坐标系是相关于相机的方位和方向而言的，与国际坐标系的联系经过相机的投影矩阵来转化。当咱们烘托一个物体时，Three.js 会将物体的国际坐标转化为相机坐标系中的坐标，再经过投影矩阵将其映射到屏幕坐标系中。

经过这种办法，物体的实践方位、旋转和缩放信息终究影响它在屏幕上的显现。

坐标系在 Three.js 烘托流程中的运用

烘托时坐标系的转化

Three.js 烘托时触及多个坐标系的转化进程：

从模型坐标系到国际坐标系：物体在其部分坐标系中的方位、旋转和缩放运用后，转化到国际坐标系。
从国际坐标系到相机坐标系：物体的国际坐标经过相机的视角改换后，得到相关于相机的坐标。
从相机坐标系到屏幕坐标系：经过投影矩阵将物体从三维坐标映射到二维屏幕上，终究显现在浏览器中。

常见坐标系改换的示例

举个比如，假定咱们有一个物体，并期望将其从国际坐标系转化到屏幕坐标系，能够经过以下过程：

const vector = new THREE.Vector3(10, 5, -10); // 物体在国际坐标系中的方位
vector.project(camera); // 将物体方位从国际坐标系转化为相机坐标系

这段代码演示了怎么经过相机将物体的国际坐标转化为屏幕坐标，便于后续的烘托和交互操作。

坐标系调试与东西

坐标轴协助东西
在 Three.js 中，AxesHelper 和 GridHelper 是两个常用的调试东西，它们别离用于显现三维坐标轴和网格。

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper); // 在场景中增加坐标轴协助器

经过这些东西，咱们能够直观地看到物体的坐标轴，协助咱们了解物体在三维空间中的方位和方向。

坐标改换东西

Three.js 供给了 applyMatrix4() 办法，能够协助咱们对物体进行手动的坐标改换。经过这种办法，咱们能够对物体运用平移、旋转和缩放等操作。

const matrix = new THREE.Matrix4();
matrix.makeTranslation(10, 0, 0); // 创立一个平移矩阵
object.applyMatrix4(matrix); // 将矩阵运用到物体

坐标系常见问题与处理办法

万向锁问题

在运用 Euler 角进行旋转时，或许会遇到万向锁问题，即某些旋转轴会由于接连旋转而呈现过错的行为。为了处理这个问题，Three.js 供给了四元数（Quaternion）来防止万向锁。

object.rotation.setFromQuaternion(
  new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0))
);

坐标系差错与漂移

在大规模场景中，起浮精度或许导致坐标系呈现漂移现象。一般能够经过优化计算精度和运用大范围坐标系来处理这些问题。