跳到主要内容
← 全部概念
3D 与渲染 / 07

四元数

沿最短路径旋转

交互演示

交互演示 · 移动指针或点击画面,观察变化

欧拉角用绕 X、Y、Z 轴的三个旋转角度记录旋转;逐一对这三个数值做插值,会让物体绕远路。四元数用四个数值记录相同的旋转,而 slerp 会沿最短圆弧,以恒定速度在两个四元数之间插值。两艘飞船都在同样的两个朝向之间转动:机头轨迹显示,左边翻转了 371°,右边则沿着简洁的 143° 圆弧转动。

适用场景

使用四元数处理镜头转动、骨骼动画和 3D 朝向混合。四元数表示朝向,而角速度描述朝向变化的快慢。

实现示例

不依赖特定引擎的伪代码。请根据你使用的引擎调整函数和坐标约定。

a = normalize(startRotation)
b = normalize(targetRotation)
if dot(a, b) < 0: b = -b
rotation = slerp(a, b, clamp(elapsed / duration, 0, 1))

常见错误

四元数乘法与运算顺序有关。数值误差累积后应重新归一化,也不要把四个分量理解为四个相互独立的角度。

延伸阅读

Three.js 手册 ↗
内容原作 Nicolas Zullo · 中文整理与交互改编