Three.js 3D立方体旋转动画

3D 立方体的旋转动画，算是前端里挺经典的一块练习题了。用得多的场景像是产品展示、游戏背景、动效过渡，炫酷还挺有沉浸感的。实现方式呢，也分门道：你可以用CSS 3D来搞基础的旋转，也可以上WebGL玩真三维，或者直接用Three.js来省心。像绕X 轴、Y 轴、Z 轴这种旋转，数学上就是套一套旋转矩阵，或者更高级的四元数，避免万向节死锁。用得顺手的话，动画也就自然起来了，平滑过渡不卡顿。

绕轴旋转的逻辑其实不复杂。比如你要绕 Y 轴旋转，可以用下面这个矩阵：

// Y 轴旋转矩阵
[
  cos(θ), 0, sin(θ),
  0,      1, 0,
 -sin(θ), 0, cos(θ)
]

你拿立方体顶点坐标乘上这个矩阵，每帧更新一下，就能实现自然转动了。角度用弧度来算，别写 180°那种，要用 Math.PI。

如果你用的是Three.js，那就更轻松了。像这样：

cube.rotation.y += 0.01;

一句话搞定绕 Y 轴的连续旋转，响应也快，代码也清爽。

不想被数学卡住？那你可以直接上手这些资源：

• 旋转矩阵四元数欧拉角，讲得还挺系统
• 四元数运算与旋转矩阵库，想自己封装库的可以看看
• 旋转矩阵到四元数源代码，写工具类时好用
• 旋转矩阵与四元数互算，转来转去全靠它

如果你刚接触3D 旋转，建议先理解下欧拉角和旋转矩阵，实在绕不过再去碰四元数，别一上来就被绕晕了。

嗯，一句：如果你在做立体动画、交互动效或者游戏界面，真的推荐花点时间搞明白3D 旋转的底层逻辑，不然调参数的时候，真能把你整崩溃。