# Changing lookat producing non-intuitive (to me) results

**URL:** <https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089>\
**Category:** Questions\
**Tags:** transform\
**Created:** [February 15, 2023, 9:00pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089 "2023-02-15T21:00:54Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jxt](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@jxt](https://discourse.threejs.org/u/jxt)\
**Post date:** [February 15, 2023, 9:00pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/1 "2023-02-15T21:00:54Z")

</div>

I am still having trouble understanding the effects of changing a camera’s lookat point. If I merely move the camera without changing the lookat point, I understand the behavior, but if I then change the lookat point to rotate the camera to look back at the original point, I am seeing an unexpected rotation about the y-axis.

Below are three drawings. First is the initial drawing with camera at (297, -2323, 2031) and the camera’s lookat point set to (272, -644, 606), shown by the blue sphere.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/3/e349a4048d3205d3660f4fbbaf5a73f11ec2984e.png)

Then I move the camera to the right by 800 units to (1097, -2323, 2031), resulting in the structure moving left and almost off screen but the lookat point remaining fixed because the camera angle has not changed, just the camera x position.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/4/d428bd0997cddd90d5162b8ff61e520015f977b0.png)

That makes sense to me. Now, if I reset the lookat point back to the original value, then the structure moves back into view, as desired and expected, but also produces a rotation about what appears to be (pretty close to) the y-axis, which is not what I expected. Can someone convince me that this non-intuitive (to me, anyway) result is correct, or else, tell me what I’m doing wrong?

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/8/e88efc8717cd6e1a3c9839459482cf4b9ba6651b.png)

There is a large amount of code to generate these drawings, so it’s not practical to post it here, but the relevant parts, once the drawing is done, is simple:

```javascript
camera.position.x += 800;
// re-render

```

and then

```javascript
const preferred_lookat = // ...some method to retrieve it
camera.lookAt (preferred_lookat)
// reposition the blue sphere to preferred_lookat
// re-render

```

Thanks so much.

---

<div class="post-metadata">

**Author:** ![jxt](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@jxt](https://discourse.threejs.org/u/jxt)\
**Post date:** [February 15, 2023, 9:12pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/2 "2023-02-15T21:12:40Z")

</div>

To clarify, when I move the camera to the right, then the **coordinates** of the look at point do change – by the same amount as the camera movement – but the **position in space** of the look at point does not change (i.e., the camera’s world direction remains constant) until I call the camera.lookAt() method to force the look at point back to the original value.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [February 15, 2023, 9:46pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/3 "2023-02-15T21:46:42Z")

</div>

It may be an illusion but it looks like your model is not on the xz plane but on the xy plane, is that correct? The look at method always ensures that an objects z axis remains unrotated (0,1,0) or “up”, if your model is on the xy plane you’ll need to rotate it 90 degrees on to the xz plane to get the desired result you’re after. To clarify, the default forward axis is z and the default up axis is y in threejs

---

<div class="post-metadata">

**Author:** ![jxt](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@jxt](https://discourse.threejs.org/u/jxt)\
**Post date:** [February 15, 2023, 10:16pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/4 "2023-02-15T22:16:39Z")

</div>

Ahhh, that would explain a lot. Yes, z is up for me. Here is the original drawing with the AxesHelper turned on.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/4/048c055b02164e484cbc4b0c4e4eb29fdb432990.png)

Okay, how do I “rotate it 90 degrees” and maintain the original view? All my data to draw the model, about 5 MB of JSON, assumes z is up. Thanks.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [February 15, 2023, 10:37pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/5 "2023-02-15T22:37:00Z")

</div>

I assume you’re using `ObjectLoader` to load the JSON model? You can rotate the object returned by the loader with something like this…

```javascript
loader.load(url, function(obj){
  obj.rotation.x = -90 * Math.PI / 180
} 

```

Then it should be as simple as swapping the y and z values in your `Vector3`’s eg…

```javascript
(297, -2323, 2031)

```

Would become

```javascript
(297, 2031, -2323)

```

---

<div class="post-metadata">

**Author:** ![jxt](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@jxt](https://discourse.threejs.org/u/jxt)\
**Post date:** [February 15, 2023, 10:50pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/6 "2023-02-15T22:50:34Z")

</div>

> [@Lawrence3DPK](#):
>
> I assume you’re using `ObjectLoader` to load the JSON model?

Ummm, actually, no. The JSON data was given to me in its current format, which long pre-dated using Three.js. I read it with a simple JSON.parse() method and then build Three.js mesh data by manually looping over all the parsed JSON, building a Float32Array from all the triangle vertices and another from the triangle normals and then load those into BufferGeometry attributes and then finally build a THREE.Mesh from the geometry. It may not have been the most efficient way to do it, but I eventually made it work. I rather doubt that ObjectLoader would know how to grok the existing JSON data.

Now what? Thanks again.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [February 15, 2023, 10:59pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/7 "2023-02-15T22:59:54Z")

</div>

OK no worries, it’d be the same process, are you creating a single mesh out of the entire geometry? If so you can just apply the rotation to that mesh, otherwise you can add the meshes to a group and rotate the entire group…

```javascript
Let modelGroup = new THREE.Group()
modelGroup.add(yourJsonMesh1, yourJsonMesh2) 
modelGroup.rotation.x = -90 * Math.PI / 180
scene.add(modelGroup)

```

---

<div class="post-metadata">

**Author:** ![jxt](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@jxt](https://discourse.threejs.org/u/jxt)\
**Post date:** [February 15, 2023, 11:25pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/8 "2023-02-15T23:25:49Z")

</div>

Awesome. Thanks. I’ll try that tomorrow.

---

<div class="post-metadata">

**Author:** ![jxt](https://avatars.discourse-cdn.com/v4/letter/j/ee7513/32.png) [@jxt](https://discourse.threejs.org/u/jxt)\
**Post date:** [February 21, 2023, 7:37pm UTC](https://discourse.threejs.org/t/changing-lookat-producing-non-intuitive-to-me-results/48089/9 "2023-02-21T19:37:02Z")

</div>

Well, I didn’t quite get to it when I wanted, but this was indeed the answer I needed. Thanks so much. It turns out that for my data I had to switch y and z and then negate the new z, but rotating the group was exactly what I needed to solve my problems. Thanks again.