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

Question

有关我的来源,请访问http://jsfiddle.net/fYtwf/

背景

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

问题

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

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

当前

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

UP键仅增加X.

DOWN键仅减少X.

左键仅增加Y.

右键仅减少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顺序设置为"YXZ",如下所示:

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

如果你这样做,一切都变得非常直观.

这是一个更新的小提琴:http://jsfiddle.net/fYtwf/3/(这个演示使用r.54,但是)

一旦你改变camera.rotation.z它的默认值zero,事情就会变得非常混乱.所以不要这样做.:-)

three.js r.65