Make position of camera zoom and fiit to object after click

Questions
1

Hi, Here I have implement Tween js when I click an object. However, what happened is camera exactly on the selected object position. What I want is camera zooming to object (centering) and camera look also point to the object.

image
image789×665 32.3 KB

image
image696×671 62.8 KB 

 this.control.enabled = false;
      const coord = {
        x: this.camera.position.x,
        y: this.camera.position.y,
        z: this.camera.position.z,
      };

   new Tween(coord)
        .to({
          x: this.pickedObject.position.x,
          y: this.pickedObject.position.y + 2,
          z: this.pickedObject.position.z,
        })
        .easing(Easing.Quadratic.Out)
        .onUpdate(() => {
          this.camera.position.set(coord.x, coord.y, coord.z);
        })
        .onComplete(() => {
          this.control.enabled = true;

          this.control.update();
        })
        .start();
2
3

i’ve spent long time trying to find code here on discourse, stackoverflow and so on but didn’t find something that is complete.

i started to collect all the bits and pieces into a component and it works, more or less Bounds and makeDefault - CodeSandbox (try window resize, click then rotate, and click-outside). it supports perspective and orthographic camera, can animate, can have margins, calculates near/far, still works if controls (orbit, trackball, …) are present. the code is here if you want to compare notes drei/Bounds.tsx at a5c75f94255e18ec74350b9a7ed73df63ee9ebe2 · pmndrs/drei · GitHub

1 Like
4

All of these not help much, I use native threejs and tweenjs. Still need help other to solve this.

5

It’s just math in the end, that has very little to do with vanilla, the code is all there and works . I had an assignment for this at work and having looked for existing code for a long time, i didn’t find a working, full implementation.

6

you can try this