Make position of camera zoom and fiit to object after click

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.

 this.control.enabled = false;
      const coord = {

   new Tween(coord)
          x: this.pickedObject.position.x,
          y: this.pickedObject.position.y + 2,
          z: this.pickedObject.position.z,
        .onUpdate(() => {
, coord.y, coord.z);
        .onComplete(() => {
          this.control.enabled = true;


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

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

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.

you can try this