使用键盘箭头使用three.js进行第一人称模拟 [英] First person simulation with three.js using keyboard arrows

问题描述

我使用three.js进行了一个简单的3d模拟，其中相机被立方体包围在3维中.这些立方体有助于在视图控件编码和测试之前可视化相机正在查看的位置.我想创建一个简单的 3D 应用程序，通过 up、down、left 和 right 控制相机键.就像摇头一样

I have a simple 3d simulation using three.js where the camera is surrounded in 3 dimensions by cubes. These cubes are to help visualise where the camera is looking until the view controls are coded and tested. I want to create a simple 3D application, where the camera is controlled via up, down, left and right keys. Just like moving your head

在我目前的申请中，当面向前方并开始抬头时，我们成功了.然而，当我们向左转 90 度时，我们按下向上箭头......错误的事情发生了.相机增加 x 轴，但因为我们面向另一个方向，单独修改 x 轴是错误的...

In my current application, when facing forward, and starting to look up, we are successful. However when we turn left 90 degrees, and we press the up arrow... The wrong thing happens. the camera increments the x axis, but because we're facing another direction, modifying the x axis ALONE is WRONG...

现在我假设这是因为需要一些三角函数来计算 z 轴的正确值.但是，我的触发并不出色.

Now I'm assuming this is because some trigonometry is required to calculate the correct values for the z axis. However, my trig isn't brilliant.

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

To get a better understanding of what i mean, please visit my jsfiddle : http://jsfiddle.net/fYtwf/

UP 键仅递增 X

DOWN 键仅减少 X

LEFT 键仅递增 Y

RIGHT 键仅递减 Y

Q 键只能增加 Z

W 键仅减少 Z

(Q 和 W 的编码只是为了帮助我理解.)

根据我目前的理解，当我按下 UP 键时，X 必须递增，Z 轴必须根据当前的 Y 轴进行修改.但是我不知道算法:(

From my current understanding, when I press the UP key, X must increment and the Z axis must be modified based on what the current Y axis is. However I don't know the algorithm :(

所以必须在KEYUP代码中修改X和Z(我认为，如果我错了，请纠正我)

So X and Z must be modified in the KEYUP code ( I think, please correct me if I am wrong )

// 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;
}

推荐答案

这个问题有很多解决方案，但是既然你只想让相机上下左右旋转，那么这个案例的答案很简单.

There are a number of solutions to this problem, but since you only want the camera to rotate up, down, left, and right, the answer in this case is easy.

您只需要像这样将相机欧拉阶设置为YXZ":

You just need to set the camera Euler order to "YXZ" like so:

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

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

If you do that, everything becomes very intuitive.

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

Here is an updated fiddle: http://jsfiddle.net/fYtwf/3/ (this demo is using r.54, however)

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

Once you change camera.rotation.z from it's default value of zero, things will become very confusing. So don't do that. :-)

three.js r.65

three.js r.65

这篇关于使用键盘箭头使用three.js进行第一人称模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！