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

Question

我有一个只有一个模型的 Three.js 网络应用程序。我用鼠标旋转模型。这是通过记录 X/Y 鼠标按下和鼠标抬起事件之间随时间推移的移动量并使用增量 X/Y 值 围绕所需的模型旋转模型 来完成的轴，（X Y 或 Z）。我不会改变相机视角或方向。

对于鼠标 Y 移动，我围绕 X 轴旋转模型，在 YZ 平面内旋转。当模型处于四元数值为 (0, 0, 0 1) 的原始状态时，效果很好，因为我希望模型的 top rotate远离相机（我）当我移动鼠标时向上和朝向相机当我移动鼠标时[=22] =]向下。

但是，我当然会在模型旋转后失去这个运动视角。例如，如果我将模型绕 Y 轴旋转整整 180 度（水平翻转），感知到的运动就会反转。移动鼠标向上移动模型朝向相机并移动它向下移动模型 远离相机。

我的问题是，如何调整旋转操作以保持所需的感知运动，而不管模型的四元数值因运动而发生的变化? 也就是说，在给定当前四元数的情况下，我需要采取什么 steps/operations 来补偿模型的当前方向，以便在移动鼠标时获得相同的模型感知移动？

我使用下面的代码来旋转模型，其中object是模型，axis是想要的轴（纯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);
}

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

How do I adjust a desired rotation by the model's current orientation to the camera using quaternions (Three.js)?

opengl

camera

rotation

quaternions

three.js