# Lerp position has wrong orientation

**URL:** <https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274>\
**Category:** Questions\
**Tags:** animation\
**Created:** [March 4, 2020, 7:44am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274 "2020-03-04T07:44:25Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 7:44am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/1 "2020-03-04T07:44:26Z")

</div>

While I have a lerp executing on a camera object, it rotates nicely to its target, but the rotation of the camera is wrong slightly.

![q9UApkE47x](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/269ccae6125d9713ba8ca18465ea4dea46e3e735.gif)

How do I make it so that the camera is always straight when it is in top view?

```auto
 update() {
        if (this.target !== undefined) {
            this.position.lerp(this.target, this.lerpSpeed);
            if (this.position.distanceTo(this.target) <= 0.05) {
                this.target = undefined;
            }
        }
    }

```

EDIT: I dont know why the gif is so small, and I dont have access to imgur by company policy… I ve changed the dimensions of the gif in the upload but that makes it pretty blurry.

---

<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:** [March 4, 2020, 9:20am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/2 "2020-03-04T09:20:00Z")

</div>

> [@Torben\_Van\_Assche](#):
>
> but the rotation of the camera is wrong slightly.

How do you update the orientation of your camera per animation step?

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 9:22am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/3 "2020-03-04T09:22:34Z")

</div>

> [@Mugen87](#):
>
> How do you update the orientation of your camera per animation step?

As far as I can see there is no rotation lerp code. So I am just setting it, has no effect because of the lookat on the orbitcontrols though.

---

<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:** [March 4, 2020, 10:06am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/4 "2020-03-04T10:06:26Z")

</div>

Okay, you are using `OrbitControls` (that was the missing bit^^). Personally, I would not rely on `lookAt()` in this situation. Consider to define target orientations similar to your target position. You can then use [Quaternion.rotateTowards()](https://threejs.org/docs/index.html#api/en/math/Quaternion.rotateTowards) or the more low level [Quaternion.slerp()](https://threejs.org/docs/index.html#api/en/math/Quaternion.slerp) to animate from one orientation to a target orientation.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 10:17am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/5 "2020-03-04T10:17:45Z")

</div>

> [@Mugen87](#):
>
> Personally, I would not rely on `lookAt()` in this situation.

are you suggesting I should not be using orbitcontrols?

---

<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:** [March 4, 2020, 10:20am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/6 "2020-03-04T10:20:09Z")

</div>

I would probably disable it during the animation.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 10:52am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/7 "2020-03-04T10:52:03Z")

</div>

Quaternion rotations dont seem to do anything. Or I dont know how they work. looking at the docs it should work but it doesnt. I am disabling the orbitcontrols when I call this as well…

```auto
        if (this.target !== undefined) {
            this.position.lerp(this.target, this.lerpSpeed);

            const quaternion = new THREE.Quaternion();
            quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);
            this.quaternion.rotateTowards(quaternion, 1);

            if (this.position.distanceTo(this.target) <= 0.05) {
                this.target = undefined;
            }
        }

```

---

<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:** [March 4, 2020, 11:45am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/8 "2020-03-04T11:45:34Z")

</div>

> [@Torben\_Van\_Assche](#):
>
> this.quaternion.rotateTowards(quaternion, 1);

You should not pass in `1` here but the angular displacement per animation step. Do it similar like in this example.

[https://threejs.org/examples/webgl\_math\_orientation\_transform](https://threejs.org/examples/webgl_math_orientation_transform)

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 12:10pm UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/9 "2020-03-04T12:10:37Z")

</div>

In terms of best practice you are correct, but the code simply just doesnt do anything. The 1 was preliminary to just test it moving around. but nothing happens

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 6, 2020, 7:29am UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/10 "2020-03-06T07:29:48Z")

</div>

Could it be that this is because I am looking straight down after the camera is rotated around the object?

---

<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:** [March 6, 2020, 12:58pm UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/11 "2020-03-06T12:58:11Z")

</div>

According to your gif, it seems the orientation of the camera is already wrong during the first animation. If it’s really an issue with a top-down view, I would expect the camera “flips” as soon as the target rotation has reached.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 6, 2020, 2:54pm UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/12 "2020-03-06T14:54:15Z")

</div>

I think the issue is more about a gimball lock than a matrix flipping over itself.

---

<div class="post-metadata">

**Author:** ![Shane\_Brumback](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shane_brumback/32/65134_2.png) [@Shane\_Brumback](https://discourse.threejs.org/u/Shane_Brumback)\
**Post date:** [April 14, 2022, 9:04pm UTC](https://discourse.threejs.org/t/lerp-position-has-wrong-orientation/13274/13 "2022-04-14T21:04:33Z")

</div>

I appreciate this information…It helped me on developing smoother multiplayer rotations for one of my game projects. This is what I came up with to handle player rotations not including x and z rotation…still developing.

```javascript
    let originalPosition = new THREE.Vector3()
    let originalRotation = new THREE.Vector3()
    let newPosition = new THREE.Vector3()
                     
    newPosition.x = parseInt(a.X_position.N)
    newPosition.y = parseInt(a.Y_position.N) - 4
    newPosition.z = parseInt(a.Z_position.N)
            
    const object = child
                    
    originalPosition.copy(object.position) 
    originalRotation.copy(object.rotation)
    object.position.lerp(newPosition, 0.1)

    const quaternionPlayer = new THREE.Quaternion();
    quaternionPlayer.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), parseFloat(a.Y_rotation.N) + Math.PI);
    const speedPlayer = 7;
    const stepPlayer = speedPlayer * delta;

    child.quaternion.rotateTowards(quaternionPlayer, stepPlayer);

```

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a1fb557d8bf3db512ac09bb9e1f114feda9a8bc5.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a1fb557d8bf3db512ac09bb9e1f114feda9a8bc5.mp4)