如何使用四元数(Three.js)根据模型的当前方向调整所需的旋转？

Question

我有一个只有一个模型的Three.js web应用程序。我用鼠标旋转模型。这是通过记录鼠标向下和鼠标向上事件之间随时间变化的X/Y移动量，并使用增量X/Y值围绕所需的轴(X或Z)旋转模型。我不改变相机的角度或方向。

对于鼠标Y的移动，我围绕X轴旋转模型，在YZ平面上旋转。当模型处于四元数值为(0，0，0 1)的原始状态时，这是很好的工作，因为我希望模型的顶部在移动鼠标时远离摄像机(me)，而当我移动鼠标向下时，它将转向照相机。

然而，在模型旋转之后，我当然失去了这个运动视角。例如，如果我把模型绕Y轴旋转180度(水平翻转)，感觉到的运动就会倒转。鼠标向上移动将模型移向摄像机，向下移动将模型从摄像机移开。

我的问题是，如何调整旋转操作以保持所需的感知的运动，而不管模型的四元数值因移动而发生了什么变化？，也就是说，考虑到模型当前的四元数，我需要采取哪些步骤/操作来补偿模型当前的方向，所以在移动鼠标时，我可以得到模型相同的运动感觉？

我使用下面的代码旋转模型，其中对象是模型，轴是所需的轴(纯X、Y或Z)，弧度是所需的旋转角度：

function rotateAroundObjectAxis(object, axis, radians)
{
    var rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

    object.matrix.multiply(rotObjectMatrix);

    object.rotation.setFromRotationMatrix(object.matrix);
}

Answer 1

您需要从旋转对象的角度旋转，所以您需要左乘旋转。

因此，如果最终的MVP矩阵来自perspective*view*model，那么您需要插入模型和视图矩阵之间的旋转。

function rotateAroundObjectAxis(object, axis, radians)
{
    var rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

    rotObjectMatrix.multiply(object.matrix);

    object.matrix = rotObjectMatrix;

    object.rotation.setFromRotationMatrix(object.matrix);
}