First person simulation with three.js using keyboard arrows

Question

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 dimens

Answer 1

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:

• FirstPersonControls
• PointerLockControls

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.

Answer 2

I have created an example of exactly what you are looking for - a chase-camera (that follows a box around) at:

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

Answer 3

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