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

**URL:** <https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563>\
**Category:** Questions\
**Tags:** lookat, camera-controls, camera\
**Created:** [July 17, 2019, 7:38pm UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563 "2019-07-17T19:38:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhonjo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rhonjo/32/6230_2.png) [@rhonjo](https://discourse.threejs.org/u/rhonjo)\
**Post date:** [July 17, 2019, 7:38pm UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/1 "2019-07-17T19:38:13Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e6ebfe289443b7345fa4a7201d3d8193e7eacd37.png)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/8a120e648aebbd8425272198f79597b7450b320c.png)

However, if I change the camera.lookAt(0,600,0) now it looks at the center.  
 ![center](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7d255115100a84701bc9b36c7a54c243f3c4abe5.png)

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/8d1b96571366d44c27f363fbb50016320be736f9.png)

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

---

<div class="post-metadata">

**Author:** ![rhonjo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rhonjo/32/6230_2.png) [@rhonjo](https://discourse.threejs.org/u/rhonjo)\
**Post date:** [July 17, 2019, 8:40pm UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/2 "2019-07-17T20:40:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 18, 2019, 8:16am UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/3 "2019-07-18T08:16:52Z")

</div>

> [@rhonjo](#):
>
> camera.up.set( 0, 0, 1 );

What is your motivation of doing this?

---

<div class="post-metadata">

**Author:** ![rhonjo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rhonjo/32/6230_2.png) [@rhonjo](https://discourse.threejs.org/u/rhonjo)\
**Post date:** [July 18, 2019, 5:00pm UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/4 "2019-07-18T17:00:13Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2387d0a99eca91d639d47f5ebbfd90f2421d8042.png)

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.

---

<div class="post-metadata">

**Author:** ![rhonjo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rhonjo/32/6230_2.png) [@rhonjo](https://discourse.threejs.org/u/rhonjo)\
**Post date:** [July 18, 2019, 5:06pm UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/5 "2019-07-18T17:06:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [July 19, 2019, 8:25am UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/6 "2019-07-19T08:25:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deepak\_G](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deepak_g/32/21537_2.png) [@Deepak\_G](https://discourse.threejs.org/u/Deepak_G)\
**Post date:** [November 17, 2021, 11:18am UTC](https://discourse.threejs.org/t/camera-lookat-position-changes-as-i-moved-camera-position/8563/7 "2021-11-17T11:18:22Z")

</div>

awesome mate you are genius!