Move To Object onMouseDown

Questions
,
1

I’m trying to move my camera to an object and have it fit to the center of my screen. At the moment I’ve been able to move the camera to the exact center of the object but can’t figure out how i’m supposed to set the vector length.

I figure I can take the target vector and subtract from its length based on a variable which will have it always fit the screen. I’ve looked at this example https://codepen.io/discoverthreejs/full/vwVeZB which worked great but it doesn’t seem to work as of a couple days ago. Any advice as to make this as simple as possible would be greatly appreciated!

function onMouseDown(event) {

          event.preventDefault();

          mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

          mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

          raycaster.setFromCamera(mouse, camera);

          var intersects = raycaster.intersectObjects(scene.children, true);

          var raycast = new THREE.Vector3(raycaster.setFromCamera(mouse,camera));

          var target = new THREE.Vector3();

    

          for (var i = 0; i < intersects.length; i++) {

            gsap.to( camera.position, {

        duration: 1,

        x: target.x,

        y: target.y,

        z: target.z,

        onUpdate: function() {

        camera.lookAt( intersects[i] );

      }

      

      } );

      

        }
2

Maybe related:

Using this approach should ensure that you position the camera in a way so it can fully see the 3D object.

1 Like
3

Perfect, thanks a lot!

A few tweaks and it works worth setting a more robust z offset but for now multiplying size.z * 2 does the job for me. Code below for anyone else needing a simple solution!

    for (var i = 0; i < intersects.length; i++) {
        var aabb = new THREE.Box3().setFromObject( intersects[i].object );

        var center = aabb.getCenter( new THREE.Vector3() );

        var size = aabb.getSize( new THREE.Vector3() );

        

        gsap.to( camera.position, {

          duration: 1,

          x: center.x,

          y: center.y,

          z: center.z + size.z*2,

          onUpdate: function() {

            camera.lookAt( center );

          }

        } );
1 Like