3D旋转与四元数(Quaternion)

3D旋转与四元数(Quaternion)

本来只是一个很简单的一个需求:把精灵按z轴随机旋转0-360度。但是 cocos Node 的 setRotation 只接收一个 math.Quat 类型的四元数。

原来我们经常用的那种先按某个坐标轴旋转多少度,再按某个坐标轴旋转多少度,这个叫欧拉旋转。但是欧拉旋转会出现万向节死锁的问题,即可能会出现一个旋转自由度的缺失。只有仅旋转一个轴时,其它两个轴的角度总是为0(不旋转),这时候使用欧拉旋转的结果才是可预期的。

如果我们只旋转z轴,则可以这样:

1
2
3
4
const quat = new Quat()

Quat.fromEuler(quat, 0, 0, getRandomInt(0, 360))
node.setRotation(quat)

其它在3D世界的复杂情况,都需要使用四元数进行旋转来确保结果可预期。

参考链接

  1. 如何形象地理解四元数 - 知乎
  2. 四元数与三维旋转 - PDF
  3. 四元数的可视化 - 3Blue1Brown
  4. 四元数的可视化交互式动画 - 3Blue1Brown
  5. 3D Rotation Converter