Scene rotation when centering object in scene

Questions
, ,
1

Hello person, how are you?
I have a map with spherical assets

image
image1920×1050 76.2 KB

When I click on an asset it opens the canvas on the side and if I can focus on it with this function below

handlefocusOnObject(id: string) {
    const item = this.scene.children.find((item) => item.userData.id === id);
    const currentZoom = this.camera.zoom;
    const currentTarget = this.controls.target.clone();
    const currentRotation = this.camera.rotation.clone();
    const currentPosition = this.camera.position.clone();
    const verticalAngle = 45;
    const horizontalAngle = 45;
    const Objectsdistance = 10000;
    const camera = this.camera;
    const controls = this.controls;

    if (item) {
      const vector = new THREE.Vector3();
      const box = new THREE.Box3();
      box.setFromObject(item);
      box.getCenter(vector);
      this.camera.lookAt(vector);
      this.controls.enableRotate = false;
      new TWEEN.Tween({ zoom: currentZoom })
        .to({ zoom: this.minZoom + 0.03 }, 1000)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .onUpdate(({ zoom }) => {
          this.camera.zoom = zoom;
          this.camera.updateProjectionMatrix();
        })
        .onComplete(() => {
          this.camera.position.copy(currentPosition);
          this.controls.update();
        })
        .start();

      new TWEEN.Tween(this.camera.position)
        .to(currentPosition, 1000)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .onUpdate(() => {
          if (this.viewMode === '3D')
            this.camera.lookAt(currentPosition);
        })
        .start();

      new TWEEN.Tween(currentTarget)
        .to(vector, 1000)
        .easing(TWEEN.Easing.Quadratic.InOut)
        .onUpdate(() => {
          this.controls.target.copy(currentTarget);
          this.camera.rotation.copy(currentRotation);
          this.handleModelOrientation({ camera, controls, vertical: verticalAngle, horizontal: horizontalAngle, distance: Objectsdistance });
        })
        .onComplete(() => {
          this.camera.position.set(currentPosition.x, currentPosition.y, 0);
          this.controls.enableRotate = true;
          this.camera.position.copy(currentPosition);

        })
        .start();
      TWEEN.update();
    }
    this.camera.updateMatrixWorld();
    this.controls.update();
  }

The problem is that the map is rotating with I center the asset with focus.

image
image1920×1050 70.2 KB

Does anyone have any idea what it could be?

2

What would be the expected behaviour :eyes:?

2 Likes
3

Hi @mjurczyk
in this case it would be centering with zoom without map rotation

4

  1. You can’t use camera.lookAt and controls. The moment you add controls to the project - let go of the sweet memories of being able control camera manually. Controls will override your chances on the next frame if they feel like doing so.

  2. To avoid rotation, instead of lookAt - calculate the distance vector between controls.target and the selected object world position, then just move the camera by that distance (that way you’ll look at the new position, and controls won’t need to update camera rotation):

const targetPosition = new Three.Vector3();
targetElement.getWorldPosition(targetPosition);

const delta = targetPosition.sub(controls.target);

camera.position.add(delta);
camera.lookAt(targetPosition);

controls.target.copy(targetPosition);