三.js相机旋转顺序

Three.js camera rotation order

本文关键字：顺序 旋转 相机 js      更新时间：2023-09-26

我正在尝试使用游戏手柄在Three.js中旋转摄像机，使用第一人称射击风格的控件。

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

  • 我想要的：http://jsfiddle.net/fYtwf/3/
  • 正在发生的事情：http://jsfiddle.net/fYtwf/2/

似乎我和这个人遇到了同样的问题，但他的问题使用 Three.js r54 解决了，而我使用的是 r60。他设置了camera.eulerOrder = "YXZ";让它工作，但目前的等效camera.rotation.order = "YXZ";似乎不适合我。

我知道 Three.js 的内置"FirstPersonControls"类，但它不适合我，因为它不接受控制器输入，以后将其他非移动控件硬塞进去会很麻烦。我也知道游戏手柄.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);
    }
}

PointerLockControls使用的方法是创建对象的层次结构：yawObject包含pitchObject包含camera。然后水平鼠标（或操纵杆）移动将改变偏航对象的 Y 旋转，垂直鼠标（或操纵杆）移动将改变俯仰对象的 X 旋转，相机的旋转将固定在默认(0, 0, -1)。这只是手动模拟欧拉YXZ排序，但它可能对您更好。如果您需要获得整体旋转，它确实会产生一些尴尬。

在我最近编写的自定义控制器中，我通过将相机add()到单个父对象并将父对象的欧拉顺序设置为 YXZ 来获得相同的结果。我不记得为什么这比直接在相机上设置更好，但它确实如此。

我自己也遇到了这个问题，我想出了一个简单的解决方案。在执行 y 旋转之前，始终将相机的 x 旋转重置为零。然后，恢复 x 旋转。所以：

// Rotate camera Fps style
function rotateCamera(dx,dy){
    //store previous x rotation
    var x = camera.rotation.x;
    //reset camera's x rotation.
    camera.rotateX(-x);
    //rotate camera on y axis
    camera.rotateY(dy);
    //check if we are trying to look to high or too low
    if ( Math.abs( dx + x ) > Math.Pi/2 - 0.05) {
        camera.rotateX(x);
    else
        camera.rotateX(x+dx);
    //reset z rotation. Floating point operations might change z rotation during the above operations.
    camera.rotation.z = 0;
}
相关文章：