javascript - Three.js 相机旋转顺序

Question

我正在尝试使用游戏 handle 在 Three.js 中使用第一人称射击风格控件来旋转相机。

浏览器检测到游戏 handle 并识别它的输入，但相机的旋转顺序是错误的。当我在相机的局部 Y 轴上旋转时，它也会考虑局部 X 旋转，这是不需要的。

• 我想要的:http://jsfiddle.net/fYtwf/3/
• 发生了什么:http://jsfiddle.net/fYtwf/2/

看来我遇到了与 this guy 相同的问题，但他的问题已使用 Three.js r54 解决，而我使用的是 r60。他设置了 camera.eulerOrder = "YXZ"; 使其正常工作，但当前等效的 camera.rotation.order = "YXZ"; 似乎不适用于我。

我知道 Three.js 的内置“FirstPersonControls”类，但它不适合我，因为它不接受 Controller 输入，并且稍后将其他非移动控件塞入其中会很麻烦。我也知道 gamepad.js 但没有兴趣使用它。

有人能帮忙吗？

我的旋转代码:

function pollGamepad()
{
    gamepad = navigator.webkitGetGamepads()[0];

    //Rotation
    if(gamepad.axes[3] > 0.20)
    {
        camera.rotateX(-gamepad.axes[3] * 0.02);
    }
    if(gamepad.axes[3] < -0.20)
    {
        camera.rotateX(-gamepad.axes[3] * 0.02);
    }

    if(gamepad.axes[2] < -0.20)
    {
        camera.rotateY(-gamepad.axes[2] * 0.02);
    }
    if(gamepad.axes[2] > 0.20)
    {
        camera.rotateY(-gamepad.axes[2] * 0.02);
    }
}

Answer 1

PointerLockControls 的方法用途是创建对象的层次结构:yawObject 包含 pitchObject 包含 camera。然后水平鼠标(或操纵杆)移动将改变偏航对象的 Y 轴旋转，垂直鼠标(或操纵杆)移动将改变俯仰对象的 X 轴旋转，并且相机的旋转将保持固定在默认 (0, 0, -1)。这只是手动模拟 Euler YXZ 排序，但它可能更适合您。如果您需要整体旋转，它确实会造成一些尴尬。

在我最近编写的自定义 Controller 中，我通过add()将相机添加到单个父对象并将父对象的欧拉阶数设置为YXZ 来实现相同的结果>。我不记得为什么这比直接在相机上设置效果更好，但确实如此。