camera.lookAt() position changes as I moved camera.position?

Questions
, ,
1

Hi,

I have a checkerboard starting from (0,0,0) and each checker piece is 100 x 100 on the X Y plane. In my init function I have:

camera = new THREE.PerspectiveCamera( 25, 1, 20, 4000 );
camera.position.set( 400, 400, 2200 );
camera.lookAt( 400, 400, 0 );
camera.up.set( 0, 0, 1 );

and it looks like this
checkerboard

The camera lookAt is set at the center of the checkerboard and this is exactly what I expect.
I have an external button that switches this top-down view to a 3d side view with these settings.

camera.position.set( 400, -1800, 800);
camera.lookAt( 400, 400, 0 );
camera.up.set( 0, 0, 1 );
camera.updateProjectionMatrix();

which results to this.
slightRight

However, if I change the camera.lookAt(0,600,0) now it looks at the center.
center

And this is kind of a different issue I am having but when I click back to top-down view with the same init setting, the camera rotates at a 45-degree angle for some reason.
rotated45

I tried using THREE.Vector3(400,400,0) instead of x,y,z coordinate but yields same result.

I think I am missing something in between but what I want to achieve is to have the camera look at the center of the checkerboard (400, 400, 0) where ever I move the camera.

any help will be appreciated

ps: not using any controls

2

ok I think i found a work around for the rotated camera angle by just setting the camera.rotation.z = 0. However I am still puzzled about why the new center is (0,600,0) as I change camera position

3

What is your motivation of doing this?

4

I wanted to keep the camera up right on z-direction (?) This is not the exact angle I saw before but I saw something like this when I changed camera position
Screenshot%20at%20Jul%2018%2009-55-33

setting it to camera.up.set( 0, 0, 1 ) solved some issues (making it appear flat on the ground) but I think I might be using it wrong/don’t need it.

5

is there a specific/prefered order we need to set camera parameters?

I just found out that

camera.position.set(400, 400, 800);
camera.rotation.z = Math.PI
camera.lookAt(0, 600, 0);

and

camera.position.set(400, 400, 800);
camera.lookAt(0, 600, 0);
camera.rotation.z = Math.PI

yields different result.

3 Likes
6

of course. lookAt is a convenience shortcut for changing rotation of an object. So if you rotate an object before you call lookAt - it will basically be overwritten. If you rotate an object after lookAt - you will see the result of the rotation.

I suggest you read some tutorials in OpenGL in general - you might find it really helpful, this is not three.js specific stuff.

2 Likes
7

awesome mate you are genius!