Unexpected camera rotation after animation

Questions
, , ,
1

Hi guys!

I’m encountering an issue where the camera undergoes an unintended rotation at the end of a tween animation. The tween animation smoothly moves the camera to a target position using interpolation, but upon reaching the target position, the camera rotates unexpectedly. I have identified that the lookAt function, which is used to orient the camera towards a specified point, is causing this rotation. However, How can I fix this issue to ensure the camera remains stationary at the end of the tween animation without any unwanted rotation?

topView(camera: Camera): void {
    const distance = camera.position.distanceTo(new Vector3(0, 0, 0));
    const targetPosition = new Vector3(0, distance, 0);

    this.prepareTween({
      currentPosition: camera.position,
      targetPosition,
      camera
    });

    this.start();
}


prepareTween({ currentPosition, targetPosition, camera }: TweenProps): void {
    if (this.isActive) {
      return;
    }

    this.isActive = true;

    const { x, y, z } = currentPosition;

    this.tw = new Tween({
      x,
      y,
      z
    })
      .to(
        { x: targetPosition.x, y: targetPosition.y, z: targetPosition.z },
        this.duration
      )
      .easing(Easing.Quadratic.InOut)
      .onUpdate((position) => {
        const { x, y, z } = position;
        camera.position.set(x, y, z);
        camera.lookAt(0, 0, 0);
      })
      .onComplete(() => this.stop())
      .start();
  }

stop(): void {
    this.isActive = false;
    cancelAnimationFrame(this.animationRef);
  }

ezgif.com-video-to-gif

2

Without a way to run the program, it is just a guess – maybe your camera position is along the camera up direction (usually this is (0,1,0)). Try with a targetPosition that does not reach (0, distance, 0):

For example try this:

const targetPosition = new Vector3(
          camera.position.x/1000,
          distance,
          camera.position.z/1000);

or one of these:

const targetPosition = new Vector3(+0.001, distance, +0.001);
const targetPosition = new Vector3(+0.001, distance, -0.001);
const targetPosition = new Vector3(-0.001, distance, +0.001);
const targetPosition = new Vector3(-0.001, distance, -0.001);
1 Like
3

Absolutely right! It’s not cleanest solution but its working much much better than now.

Thank you very much!

1 Like