1
\$\begingroup\$

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

Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
1
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Thanks for the answer. I was able to fix the movement, however, the rotation is still behaving rather unintuitive. With the forward movement fixed, how would I go about fixing the rotational behavior? Right now, you can rotate on the x axis just fine, but if you use y afterwards, it still doesn't work as expected. (Just as in the code above) \$\endgroup\$
    – user30340
    Jun 18, 2013 at 23:51
  • 1
    \$\begingroup\$ Sounds like you're just calculating the matrix wrong. Could be one of a dozen things. If you implement your camera as a pair or triplet of vectors, make sure you rotate them all as appropriate, renormalize, and reorthagonalize where needed. That is, if you have forward and up vector, make sure you rotate both when looking up or down. \$\endgroup\$
    – Sean Middleditch
    Jun 18, 2013 at 23:55
0
\$\begingroup\$

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

Improve this answer
\$\endgroup\$

You must log in to answer this question.