ThreeJS 坐标系（旋转跳跃，永不停歇）

ThreeJS 坐标系（旋转跳跃，永不停歇）

本文主要介绍 threejs 中3D坐标系的内容，内容包含世界坐标系（world coordinate system）与局部坐标系（local coordinate system）之间的区别与关系；3D 对象之间建立父子关系时平移、旋转、缩放转换；简单介绍底层数学层面如何支持 3D 对象进行平移、旋转、缩放。

3D 坐标系

3D 空间通常采用3个坐标轴来进行表示分别是x、y、z。 这三个坐标轴有两种布置方式分别是左手坐标系和右手坐标系（它们是以坐标轴的朝向来命名的）。

openGL 采用的是右手坐标系，WebGL 是openGL的JS版本也是右手坐标系。ThreeJS 依然采用的右手坐标系。而 Direct3D 使用的坐标系则是左手坐标系。右手坐标系和 3D 笛卡尔坐标系是一样的。

  3D笛卡尔坐标系

ThreeJS 中有几个 2D、3D 坐标系，本文主要介绍最重要的世界坐标系（world coordinate system）、局部坐标系（local coordinate system）两个。剩余的会在该系列的其他文章中进行介绍（屏幕坐标系、相机坐标系等）。

世界坐标系&局部坐标系

上一篇文章【加个传送门: ThreeJS 入门创建第一个3D对象】中有介绍 THREE.Scene 创建 scene 场景，创建后的 scene 就是个小宇宙，这个小宇宙就是世界空间，世界空间中的坐标系称为世界坐标系。

        scene 定义世界坐标系

当我们往 scene 中添加 3D 对象并进行平移、旋转、缩放等操作时，该对象就是相对于 scene的世界坐标系进行移动。

scene 中的 Mesh

通常使用修改 position 值来实现平移；通过修改 rotation 值来实现旋转；使用设置 scale 来实现缩放。