Moving the camera, lookAt and rotations in three.js

48
votes

I'm having trouble understanding lookAt and the rotations of the camera.

I have a circle of small spheres around [0,0,0] on the x-y plane.

The camera is placed at [0,0,30] and after a lookAt the rotation of the camera is [0,0,0]. The circle appears as if looking from above (as expected).

Then I move the camera to [30,0,0] and after a lookAt the rotation of the camera is [0,90deg,0]. The circle appears on its side, but vertically, not horizontally as I would expect. Why is the camera rotated by 90 degrees for y?

After that I move the camera to [0,30,0] and after a lookAt the rotation of the camera is [-90deg,0,90deg]. The circle again appears on its side, vertically, not horizontally.

Why is the camera rotating? I thought that there would be no rotation at all since it was on the x and y axes themselves.

Thank you for any help! :-)

Note: Originally posted at https://github.com/mrdoob/three.js/issues/2917 but was told to come to Stack Overflow.

1
three.js

1 Answers

79
votes

To fix the problem you can specify the up vector for the camera before executing the lookAt() command.

// Place camera on x axis
camera.position.set(30,0,0);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(new THREE.Vector3(0,0,0));

Change the vector to your needs. You can even turn it upside down by specifying a negative value: (0,0,-1). It is important to set the up vector BEFORE using lookAt().

I have created a full example at http://jsfiddle.net/VsWb9/991/ with 2 cubes. The smaller one is suppose to be on top of the big one (on the positive z-axis).