Lerp position has wrong orientation

Questions
1

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

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

 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.

2

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

3

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.

4

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() or the more low level Quaternion.slerp() to animate from one orientation to a target orientation.

5

are you suggesting I should not be using orbitcontrols?

6

I would probably disable it during the animation.

7

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…

        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;
            }
        }
8

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

9

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

10

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

11

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.

12

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

13

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.

    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);