javascript 使用键盘箭头使用three.js进行第一人称模拟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13261270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
First person simulation with three.js using keyboard arrows
提问by AlexMorley-Finch
For my source, visit http://jsfiddle.net/fYtwf/
对于我的来源，请访问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, leftand rightkeys. Just like moving your head
我使用three.js进行了一个简单的3d模拟，其中相机被立方体包围在3维中。这些立方体有助于在视图控件编码和测试之前可视化相机正在查看的位置。我想创建一个简单的 3D 应用程序，通过向上、向下、向左和向右键控制相机。就像摇头一样
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...
在我目前的申请中，当面向前方并开始抬头时，我们成功了。然而，当我们向左转 90 度时，我们按下向上箭头......错误的事情发生了。相机增加 x 轴，但因为我们面向另一个方向，单独修改 x 轴是错误的......
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.
现在我假设这是因为需要一些三角函数来计算 z 轴的正确值。但是，我的触发并不出色。
Current
当前的
To get a better understanding of what i mean, please visit my jsfiddle : http://jsfiddle.net/fYtwf/
为了更好地理解我的意思，请访问我的 jsfiddle：http: //jsfiddle.net/fYtwf/
UPkey ONLY increments X
UP键只增加 X
DOWNkey ONLY decrements X
DOWN键仅递减 X
LEFTkey ONLY increments Y
左键只增加 Y
RIGHTkey ONLY decrements Y
RIGHT键仅递减 Y
Qkey ONLY increments Z
Q键只增加 Z
Wkey ONLY decrements Z
W键仅递减 Z
( Q and W were only coded to try and help me understand. )
（Q 和 W 只是为了帮助我理解而编码。）
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 :(
根据我目前的理解，当我按下 UP 键时，X 必须递增，Z 轴必须根据当前的 Y 轴进行修改。但是我不知道算法:(
So X and Z must be modified in the KEYUP code ( I think, please correct me if I am wrong )
所以必须在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;
}
采纳答案by WestLangley
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 orderto "YXZ" like so:
您只需要像这样将相机欧拉顺序设置为“YXZ”：
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)
这是一个更新的小提琴：http: //jsfiddle.net/fYtwf/3/（但是这个演示使用的是 r.54）
Once you change camera.rotation.zfrom it's default value of zero, things will become very confusing. So don't do that. :-)
一旦你改变camera.rotation.z了它的默认值zero，事情就会变得非常混乱。所以不要那样做。:-)
three.js r.65
三.js r.65
回答by Tapio
While this does not directly fix your code, I thought I'd mention that Three.js provides two ready-made controllers to navigate in FPS mode. They both use mouse for looking and can move, but should be rather simple to adapt to keyboard look and remove movement if needed. They are:
虽然这不会直接修复您的代码，但我想我会提到 Three.js 提供了两个现成的控制器来在 FPS 模式下导航。它们都使用鼠标进行查看并且可以移动，但应该相当简单以适应键盘外观并在需要时移除移动。他们是：
I'd recommend the latter as a starting point because it's rather simple and the former confusingly has the looking code twice, probably as an artifact from old features.
我建议将后者作为起点，因为它相当简单，而前者令人困惑地两次查看代码，可能是旧功能的产物。
回答by Lee Stemkoski
I have created an example of exactly what you are looking for - a chase-camera (that follows a box around) at:
我已经创建了一个你正在寻找的例子 - 一个追逐相机（跟随一个盒子）在：
