three.js 是一个基于 WebGL 技术的 JavaScript 库，它可以方便地创建和渲染 3D 场景。在 three.js 中，我们可以通过操作对象的属性来实现对 3D 对象的旋转、平移等变换。
本文将介绍如何在 three.js 中绕轴旋转 3D 对象，并提供示例代码和相关指导。具体来说，我们将讨论以下几个方面：
- 使用 Euler 角度进行旋转
- 使用四元数进行旋转
- 绕不同轴旋转
使用 Euler 角度进行旋转
在 three.js 中，我们可以使用 Object3D 类的 rotation 属性来控制对象的旋转。其中，rotation 属性是一个 Euler 对象，包含了三个角度分量：x、y 和 z 分别表示绕 X、Y、Z 轴的旋转角度。
要绕特定轴进行旋转，我们只需要修改对应的角度分量即可。例如，要绕 Y 轴旋转 45 度，可以这样写：
object.rotation.y = Math.PI / 4;
需要注意的是，Euler 角度存在万向锁问题，可能会导致旋转出现奇怪的效果。因此，如果需要连续进行多次旋转，建议使用四元数进行计算。
使用四元数进行旋转
四元数是一种复数的扩展，可以用来表示三维空间中的旋转。在 three.js 中，我们可以使用 Quaternion 类来进行四元数运算。
四元数旋转的优点是不会有万向锁问题，并且可以方便地进行连续旋转和插值。具体来说，我们可以通过以下方式进行四元数旋转：
const axis = new THREE.Vector3(0, 1, 0); // 绕 Y 轴旋转 const angle = Math.PI / 4; const quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle); object.quaternion.multiply(quaternion);
其中，axis 表示旋转轴，angle 表示旋转角度，quaternion 表示由轴和角度计算得到的四元数。最后，我们将对象的 quaternion 属性与计算得到的四元数相乘，即可实现绕轴旋转的效果。
绕不同轴旋转
除了绕 X、Y、Z 轴旋转外，我们还可以绕任意轴进行旋转。具体来说，我们需要先将旋转轴转换为对象坐标系中的向量，然后再进行四元数旋转。例如，要绕 (1, 1, 1) 方向上的向量进行旋转，可以这样写：
const axis = new THREE.Vector3(1, 1, 1).normalize(); const angle = Math.PI / 4; const quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle); object.quaternion.multiply(quaternion);
其中，normalize() 函数用于将向量归一化，保证旋转轴为单位向量。然后，我们按照之前的方法计算四元数并进行相乘即可。
示例代码
下面是一个完整的示例代码，它会创建一个立方体，并通过鼠标拖动实现绕 Y 轴旋转的效果。你可以根据需要修改代码中的参数和函数，以实现更多种类的旋转效果。
-- -------------------- ---- ------- ------ - -- ----- ---- -------- --- ------- ------ --------- --- ------- -------- ------ - -- ----------- ----- - --- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------