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

问题描述

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

背景

我有一个简单的3d模拟使用three.js，其中相机被立方体包围在3维。这些立方体可以帮助直观地查看相机在哪里查看，直到视图控件被编码和测试。我想创建一个简单的3D应用程序，其中相机通过向上，向下，向左和向右键。就像移动头一样

问题

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

现在我假设这是因为一些需要三角学来计算z轴的正确值。

当前

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

UP 键只增加X

向下键只减少X

LEFT 键只能增加Y

右
$ b

Q 键只增加Z

p>

（Q和W只是编码，可以帮助我理解。）

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

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

  // setRotateX，getRotateX，setRotateY和getRotateY被扩展
 //相机函数我写的，所以我可以工作与度。解决方案
 //不需要使用它们，他们只是帮助我
 
 switch（key）
 {
 case KEYUP：
 if（camera。 getRotateX（）< 90）{//限制，所以他们看不到开销
 camera.setRotateX（camera.getRotateX（）+ VIEW_INCREMENT）; 
} 
 break; 
 
 case KEYDOWN：
 if（camera.getRotateX（）> -90）{//限制所以他们不能看下
 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; 
} 
  

解决方案

对于这个问题，但由于你只想让相机旋转上，下，左，右，在这种情况下的答案很容易。

你只需要设置将相机欧拉顺序改为YXZ，如下所示：

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

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

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

一旦更改 camera.rotation.z 从它的默认值零，事情会变得很混乱。所以不要这样做。 ： - ）

three.js r.65

For my source, visit http://jsfiddle.net/fYtwf/

Background

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

Issues

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...

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.

Current

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

UP key ONLY increments X

DOWN key ONLY decrements X

LEFT key ONLY increments Y

RIGHT key ONLY decrements Y

Q key ONLY increments Z

W key ONLY decrements Z

( Q and W were only coded to try and help me understand. )

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 :(

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.

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.

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

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的第一人称模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！