背景

我有一个简单的三维模拟使用three.js，其中相机被三维立方体包围。这些立方体有助于可视化摄像机的外观，直到视图控件被编码和测试。我想创建一个简单的3D应用程序，通过向上，向下，向左和向右来控制相机键。就像移动你的头一样

问题

在我目前的应用程序中，当面向前方并开始查找时，我们是成功的。然而，当我们向左转90度时，我们按向上箭头......错误的事情发生了。相机增加x轴，但因为我们正面向另一个方向，修改x轴ALONE是错误的......

现在我假设这是因为需要一些三角法来计算z轴的正确值。但是，我的触发并不精彩。

电流

为了更好地理解我的意思，请访问我的jsfiddle：http://jsfiddle.net/fYtwf/

UP 键仅增加X

DOWN 键只能减少X

LEFT 键仅增加Y

RIGHT 键只能减少Y

Q 键仅增加Z

W 键只能减少Z

（Q和W只是为了帮助我理解而编码。）

根据我目前的理解，当我按下UP键时，X必须递增，并且必须根据当前Y轴修改Z轴。但是我不知道算法：（

因此必须在KEYUP代码中修改X和Z（我想，如果我错了，请纠正我）

// setRotateX, getRotateX, setRotateY and getRotateY are extended
// camera functions I wrote so I could work with degrees. Solution
// IS NOT required to use them, they just helped me

switch( key )
{
    case KEYUP:
        if ( camera.getRotateX() < 90 ){ // restrict so they cannot look overhead
            camera.setRotateX( camera.getRotateX() + VIEW_INCREMENT );
        }
        break;

    case KEYDOWN:
        if ( camera.getRotateX() > -90 ){ // restrict so they cannot look under feet
            camera.setRotateX( camera.getRotateX() - VIEW_INCREMENT );
        }
        break;

    case KEYLEFT:
        camera.setRotateY( camera.getRotateY() + VIEW_INCREMENT );
        break;

    case KEYRIGHT:
        camera.setRotateY( camera.getRotateY() - VIEW_INCREMENT );
        break;
}

Answer 1

此问题有多种解决方案，但由于您只希望相机向上，向下，向左和向右旋转，因此这种情况下的答案很简单。

您只需要将相机 Euler order 设置为“YXZ”，如下所示：

camera.rotation.order = "YXZ"; // three.js r.65

如果你这样做，一切都变得非常直观。

这是一个更新的小提琴：http://jsfiddle.net/fYtwf/3/（此演示使用的是r.54）

从camera.rotation.z的默认值更改zero后，事情就会变得非常混乱。所以不要这样做。： - ）

three.js r.65

Answer 2

虽然这并没有直接修复你的代码，但我想我会提到Three.js提供了两个现成的控制器来在FPS模式下导航。它们都使用鼠标进行观察并且可以移动，但是应该相当简单以适应键盘外观并在需要时移除移动。他们是：

我建议将后者作为起点，因为它相当简单，前者容易混淆地看起来有两次，可能是旧功能的神器。

Answer 3

我已经创建了一个完全正在寻找的例子 - 一个追逐相机（在一个方框后面）：

http://stemkoski.github.com/Three.js/#chase-camera

使用键盘箭头使用three.js进行第一人称模拟

对于我的来源，请访问http://jsfiddle.net/fYtwf/

背景

问题

电流

3 个答案: