Three.js camera rotation and behavior

Question

I'm just getting into Three.js and the camera is causing some problems. Basically, I want to implement spectator-like movement controls, so that I can move around freely in the scene. The problem is that the camera seems to have it's own coordinate system, so rotating it rotates the camera, while the system itself is left untouched. This, in turn, causes problems when moving the camera.

To better illustrate the problem, please have a look at the scene. Use the arrow keys to look around and press w to move forward.

http://jsbin.com/anarid/1/

Ideally, I'd like to apply the rotation to the 'whole' camera instead, including its coordinate system. I know that Three.js provides controls, but I'd like to implement them myself for learning purposes. I also know that a lot of people do have this problem and that there are a couple posts dealing with this. However, I mostly fail to understand the solutions. If someone could shed some light on this, I'd really appreciate it. :)

Greetings

Answer 1

You don't move a "whole coordinate system." The world coordinate system is meant to be completely independent of the camera (you might even have more than one camera, after all).

Take your movement vector, apply the camera's world-space rotation, and then add that the camera's world position. It's as simple as that.

That is, if you want to move forward (negative Z for sake of example), you'd have a movement vector <0,0,-1>. If your camera was turned 90 degrees right then after applying the rotation matrix to this vector you'd get <1,0,0>. Now add this vector to the camera's position to move along the positive X axis, which is the way the camera is facing and what you wanted.

Answer 2

I am creating a Third Person game and i just add the player mesh to the camera like this.-

camera.add(charactermesh);

That is a simple way of moving the camera with your mesh.Hope this helps