使用四元数旋转Three.js对象时特定角度出现缩放问题求助

首先，你的旋转操作导致对象缩放的核心原因是手动操作矩阵并转换四元数的方式，会累积浮点精度误差，破坏矩阵的正交性，最终让Three.js在更新对象变换时错误引入缩放。

为什么会出现这个问题？ #

你当前的代码流程存在两个关键问题：

• 矩阵乘法顺序与旋转逻辑不匹配：如果对象不在世界原点，直接用旋转矩阵乘以对象当前矩阵，会导致旋转同时改变对象位置，而非单纯绕世界轴旋转；即使对象在原点，多次浮点运算后，纯旋转矩阵的正交性（行列式为1的核心特性）会逐渐丢失。
• 累积误差放大：当旋转步长很小时，你会进行大量的矩阵运算，每次运算的微小浮点误差会被不断累积。虽然Three.js会对提取的四元数做归一化处理，但无法完全消除非正交矩阵带来的偏差，最终这种偏差会被放大为明显的缩放现象。

正确的绕世界轴旋转实现 #

避免手动操作矩阵，直接使用四元数处理旋转是更可靠的方案——四元数天生适配3D旋转逻辑，能更好地保持正交性，从根源上减少浮点误差。实现代码如下：

function rotateWorldAxis(axis, angle) {
  // 创建对应世界轴旋转的四元数
  const worldRotQuat = new THREE.Quaternion().setFromAxisAngle(axis, angle);
  // 使用premultiply将旋转应用在世界空间（postmultiply对应局部空间旋转）
  mesh.quaternion.premultiply(worldRotQuat);
  // 若开启matrixAutoUpdate（默认开启），无需手动调用updateMatrix()
  // mesh.updateMatrix();
}

为什么这个方法有效？ #

• premultiply方法会按正确顺序将世界旋转四元数与对象当前四元数相乘（世界旋转四元数 * 对象当前四元数），确保旋转是在世界空间中执行的，完全符合你的需求。
• 四元数运算会自动保持单位长度（归一化），彻底避免了矩阵运算带来的正交性破坏问题，从根源上消除了缩放误差。

额外注意事项 #

• 确保你传入的axis是世界空间的轴向量（比如new THREE.Vector3(1, 0, 0)对应世界X轴），而非对象的局部轴。
• 如果对象有父对象且父对象存在变换，premultiply会自动处理层级关系，无需额外转换轴向量。

内容的提问来源于stack exchange，提问作者Tom B.