Question

我有一个带有单个模型的Three.js Web应用程序。我用鼠标旋转模型。这是通过记录鼠标向下和鼠标向上事件之间的X / Y移动量以及使用增量X / Y值来围绕所需轴旋转模型（XY或Z）来完成的。。我不更改相机视角或方向。

对于鼠标Y移动，我围绕X轴旋转模型，在YZ平面中旋转。当模型处于其原始状态且四元数值为（0,0,0 1）时，这很有效，因为我希望模型的 top 旋转当我将鼠标向下移动时，当我将鼠标向上移动时，将鼠标移动到相机 （我）（我）

然而，在模型旋转后，我当然会失去这种运动视角。例如，如果我围绕Y轴旋转模型一整个180度（水平翻转），则感知的运动会反转。移动鼠标向上将模型移向相机并向向下移动将模型移开从相机移开。

我的问题是，如何调整旋转操作以维持所需的感知运动，而不管模型因移动而导致的四元数值的变化？也就是说，在给定当前四元数的情况下，我需要采取哪些步骤/操作来补偿模型的当前方向，因此在移动鼠标时我得到模型的相同感知移动？

我使用下面的代码来旋转模型，其中 object 是模型，轴是所需的轴（纯X，Y或Z），并且< em> radians 是所需的旋转角度：

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);
}

如何使用四元数（Three.js）通过模型当前朝向相机的方向调整所需的旋转？

1 个答案: