← 全部概念
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 · 中文整理与交互改编