3D应用开发中的欧拉角和旋转矩阵

前言

在二维平面内，我们用 (x, y) 来表示点的位置，通过向坐标原始值累加偏移值即可将点移动。但在三维空间内除了位置偏移外，还存在着旋转变化，因此空间内的每个物体都具有至少两个基础特性：位置和方向。位置我们可以用坐标来表达，那么方向由什么概念来表达呢？

1.欧拉角(Euler Angles)

三维空间中物体的旋转变化，可以映射为坐标系的方向变化。换言之，我们去旋转一个空间内的物体，可以将其转化为旋转坐标系。所谓一图胜千言，直接看下图：

我们尽量用简明意赅的语言来描述图片所传达出来的信息。图中有两个三维坐标系，一个蓝色 (xyz) ，另一个是红色 (XYZ) 。首先，我们先将蓝色坐标系沿 z 轴旋转 α 角度，再将蓝色坐标系沿新的 x 轴旋转 β 角度，最后将蓝色坐标系沿新 Z 轴旋转 γ 角度，就得到新的红色坐标系(XYZ)。如果将三次变换所围绕轴和角度记录下来，那么本次旋转的欧拉角为 (z-x-z)-(α, β, γ) 。对三种旋转轴顺序进行排列组合后，我们总结共有12种旋转顺序组合，也就是十二种欧拉角。

对于某些简单的旋转方式，比如先绕 x 轴旋转 90 度，再绕 y 轴旋转 90 度，最后绕 x 轴旋转 -90 度，得到的结果与直接围绕 z 轴旋转 -90 度结果相同。也就是说实现一个三维旋转不一定非要围绕 xyz 三个轴每个轴都旋转一次。因此可以对十二种欧拉角做如下分类：

• 经典欧拉角：(z-x-z，x-y-x，y-z-y，z-y-z, x-z-x，y-x-y)
• 泰特-布莱恩角：(x-y-z，y-z-x，z-x-y，x-z-y，z-y-x，y-x-z)

旋转轴顺序形如 ABA 的经典欧拉角适用于相对简单的旋转场景，而需要三个旋转轴的泰布莱恩角更多应用于复杂的旋转场景，比如航空航天领域。

2.旋转矩阵(Rotation Matrix)

线性代数中的矩阵不同于我们熟悉的形如 y = ax + b 的数学关系式，很容易被”古怪”的概念和各种”方框”搞的晕头转向。正因为矩阵不同于传统具体的数学关系式，在学习和理解矩阵需要转换思考方式。比如，我们可以用具体公式来描述曲线，像贝塞尔曲线、三角函数曲线，但他们都是基于二维平面的，如何用数学来描述线性三维空间内的变换呢？矩阵因此应运而生。

回到本文主题，旋转顺序和角度我们可以用欧拉角来表示，那么如何将其实际应用呢？答案是用旋转矩阵来表示旋转角。以前文坐标系转换为例，抽象出矩阵关系式：

依据矩阵除法求得M的值，即可得到旋转矩阵。在实际推导三维旋转矩阵之前，我们首先推导二维旋转矩阵，有助于我们更好的理解三维旋转矩阵：

原始向量 op 围绕 o 点旋转 φ 角度，原坐标 (x, y) 变为 (x', y') ，由图中标注可得：

由三角函数关系式可得：

依据矩阵乘法法则，以上关系式用矩阵表示为：

三维变换就是比二维变换多了一个 z 轴罢了，当空间内的物体围绕 x 轴旋转时，我们可以理解为在 yz 平面进行二维变换。实际推导过程与上式类似，只是 x 坐标保持不变：

得出围绕 x 轴的旋转矩阵为：

同理，当空间内的物体围绕 y 轴和 z 轴旋转时，记围绕 x 、 y 、 z 三轴的旋转角分别为 θ 、 β 、 γ （即欧拉角），矩阵分别为 P 、 M 、 Q ，有：

3.万向节死锁(Gimbal lock)

使用欧拉角来描述三维方向变化并不是完美的，很经典的例子就是炮台问题：

假设地面上有一个炮台，它可以与地面平行的360度环绕，围绕轴记为 x 轴，与地面垂直，也可以俯仰（仰视90度或俯视-90度），俯仰旋转时所围绕的轴记为 y 轴，与地面平行。正北地平线方向记做 x=0, y=0 。此时一个飞行器从正东 x=90 y=10 方向向炮台飞来，炮口跟踪瞄准了该飞行器。当飞行器飞到炮台头顶时，飞行器的坐标（同时也是炮口的指向）也从 x=90 y=10 逐渐递增到了 x=90 y=90 。突然飞行器向南飞行，但此时炮口垂直地面，无论如何旋转 x 轴炮口始终指向天顶。从数据的角度说，从正东的 x=90 到 x=180 发生了不连续突变，然而飞行器的位置却是连续的。

究其根本原因，欧拉角的理论基础是分别计算围绕 x 、 y 、 z 三轴旋转角度后合并而成的，多种旋转方式的结果会对应同一个三维空间角度，导致在插值场景中使用欧拉角会出现不连续的死锁问题（如上文的大炮跟踪）。死锁问题与解决在3D空间轨迹跟踪等领域有广泛的应用，更多例子有兴趣的读者可以自行google。

如何解决死锁问题呢？答案是四元数。核心理念就是摆脱对围绕 x 、 y 、 z 旋转计算的依赖，空间内的旋转基于围绕任意轴计算，比如围绕 (0, 4, 7) 轴。不过四元数就是另一个复杂的话题了。

4.前端应用

在前端应用层，并非只有旋转这一种场景，除了旋转，还有平移、缩放等等。在上文中我们使用三阶矩阵来表达变换，但在更复杂的变换场景中通常使用四阶矩阵来做计算，例如设平移距离分别为 Tx 、 Ty 、 Tz ，那么得到平移四阶矩阵：

三阶矩阵的运算已经很繁琐，四阶更让人头皮发麻。万幸的是矩阵计算早已工程化了，不必手工操作底层矩阵运算。以代表性的 three.js 为例，它有很多封装成熟的 api 可供使用，大大降低了开发前端3D应用的成本。还有函数库 glmatrix ，开发者只关心输入输出即可。

了解欧拉角和矩阵变换随便只是开发3D应用的第一步，更宽广的世界依然需要我们不懈探索。