本文图片均来自网络，侵权联系删除
背景
最近因为公司业务需要，在尝试学习 Three.js。作为一个之前从未接触过 3D 开发的纯前端选手，刚上手就被“空间坐标系”上了一课。
原本以为“坐标”不就是 X、Y、Z 吗？但当我在 Threejs 项目中尝试放置一个立方体，发现怎么放都和预期的方向对不上。翻了官方文档，才发现——Three.js 使用的是右手坐标系，而我直觉中想象的是另一个方向。
在 CubeTextureLoader 文档 中有一句话其实就点明了这一点：
Because Three.js uses a right-handed coordinate system...
这背后其实涉及到两个非常基础但容易忽略的概念：左手 / 右手坐标系。
什么是“右手坐标系”？
右手坐标系（Right-handed Coordinate System）是 3D 图形开发中最常见的一种空间坐标系统。判断方式如下：
你伸出右手，掌心朝向自己
- 拇指：X 轴正方向
- 食指：Y 轴正方向
- 中指：自然弯曲，指向 Z 轴正方向
在 Three.js 中：
- X 轴：向右
- Y 轴：向上
- Z 轴：垂直屏幕 向外（朝自己）
也就是说，如果你站在摄像机前，眼睛看向的方向是 Z 轴的负方向。
什么是“左手坐标系”？
左手坐标系（Left-handed Coordinate System）与右手系的唯一区别就是 Z 轴的方向相反：
用左手做相同的手势， 掌心向外
- Z 轴指向的是 屏幕里面（远离你）
有哪些使用左手坐标系呢？欢迎评论留言，一起学习～ 😀
左手定则 vs 右手定则（物理）
这两个“定则”在物理中用来判断磁场、力、电流方向，虽然和坐标系不是一回事，但它们的手势规则很相似，容易混淆。
右手螺旋定则
表示电流和电流激发磁场的磁感线方向间关系
- 通电直导线中
- 用右手握住通电直导线，让大拇指指向电流的方向，那么四指的指向就是磁力线的环绕方向
- 通电螺线管中
- 用右手握住通电螺线管，使四指弯曲与电流方向一致，那么大拇指所指的那一端是通电螺线管的N极
右手定则
伸开右手，使大拇指跟其余四个手指垂直并且都跟手掌在一个平面内，把右手放入磁场中，让磁感线垂直穿入手心，大拇指指向导体运动方向，则其余四指指向动生电流的方向。
左手定则
张开左手，让磁感线穿过手心，5根手指，指向电流方向，此时大拇指所指的方向就是该通电导体在磁场中的运动方向。
记忆口诀：左力，右电
你们当年的记忆口诀是什么呢？ 😏
为什么这很重要？
坐标系决定了你在 3D 世界中：
- 摄像机朝向
- 物体移动的方向
- 贴图方向、光照方向
搞错坐标系，“向上”可能变成“向下”，“顺时针”也可能是“逆时针”。
如何在 Three.js 中验证它？
Three.js 提供了一个好用的小工具，来验证：AxesHelper。
由于本篇文章不介绍Threejs，所以可自行查阅官方文档研究。
理解 Three.js 的右手坐标系，是我学习 Three.js 的第一步，也希望这篇文章能帮到你少踩一个坑！
感谢你的阅读 ❤️