使用四元数进行旋转会使我的对象以特定角度缩放

Question

我正在尝试为我的 threejs 对象构建一个旋转控制器。我的旋转方法如下：

function rotate(axis, angle) {
    rotMat = new THREE.Matrix4().makeRotationAxis(axis, angle);
    rotMat.multiply(mesh.matrix);
    rotQuat = new THREE.Quaternion().setFromRotationMatrix(rotMat);
    mesh.quaternion.copy(rotQuat);
    mesh.updateMatrix();
}

我需要这样做才能绕世界轴而不是局部轴旋转（与this post -> I also cannot use the Euler rotation member here because of a problem i describe here相关）

解决我的问题：

我制作了 this JSFiddle，它很好地说明了这个问题。

如何重新创建：

1) 打开 fiddle link.

2) 按键盘上的 X、Y 或 Z 键进入所需轴的旋转模式。

3) 按住'Arrow Up' 键并旋转，直到发生'strange' 缩放。应该以 90-100 度的角度发生。请注意，如果您继续旋转，缩放会继续

另请注意，我在到达特定角度区域时减小了旋转步长（旋转速度）。缩放仅在旋转步长非常小时发生。

我的问题是：

有人知道为什么旋转会导致缩放吗？

Answer 1

发生这种情况的原因是因为您需要将 'pure' 旋转矩阵提供给 Quaternion.setFromRotationMatrix 方法。因此，将旋转功能更改为以下内容将起作用：

function rotate (axis, angle) {
  rotMat = new THREE.Matrix4().makeRotationAxis(axis, angle);
  rotMat.multiply(mesh.matrix);
  var rotMat2 = new THREE.Matrix4().extractRotation(rotMat);
  rotQuat = new THREE.Quaternion().setFromRotationMatrix(rotMat2);
  mesh.quaternion.copy(rotQuat);
  mesh.updateMatrix();
}

使用四元数进行旋转会使我的对象以特定角度缩放

Using quaternions for rotation causes my object to scale at specific angle

rotation

quaternions

three.js