Zoom into object and open popup on click

Questions
,
1

Hey all, Im trying to figure out how to zoom into an object (eg 'Tree01) within a GLTF model when you click on it and also trigger a popup which will contain text.

Here is an example of what I’m trying to achieve - https://madbox.io/

I’ve figured out how to click and select objects within the model using the following code, so I can see the object name when clicked:

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2()

function onClick(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 );

	if ( intersects.length > 0 ) {
        var object = intersects[0].object;
	    console.log( 'Intersection:', intersects[ 0 ] );
	}
}

Any help with this is greatly appreciated!

2

You can try to use an animation library like GSAP to translate the camera towards the selected 3D object. The code for this looks like so:

gsap.to( camera.position, {
    duration: 1, // seconds
    x: target.x,
    y: target.y,
    z: target.z,
    onUpdate: function() {
        camera.lookAt( center );
    }
} );

The target vector is the destination that you have to define in the first place. After that you can put the above code at the place where console.log( 'Intersection:', intersects[ 0 ] ); is now executed.

Related topic: Need help with gsap camera and OrbitControls animations

Opening a popup after the animation has been finished can be triggered in the onComplete() callback.

3

Thats awesome for the animation thanks! The part I’m struggling with the most is to actually target an object. Ive got as far as clicking the object and the name of the object showing in the console log but I’m unsure of how to attach the animation to the clicking of the object. I hope that makes sense!

Would it look something like this?

var Tree01 = new THREE.Box3().setFromObject( Tree01 );

gsap.to( camera.position, {
    duration: 1, // seconds
    x: Tree01.x,
    y: Tree01.y,
    z: Tree01.z,
    onUpdate: function() {
        camera.lookAt( center );
    }
} );
4

Mostly. You can use the same approach like discussed in Need help with gsap camera and OrbitControls animations. Meaning you compute the bounding box for the selected object, and then use its center and size for computing the new camera’s position.

The center vector can also be used for focusing the camrea.

1 Like
5

Annoyingly I’m still struggling with this even after reading through related threads. Would you be able to explain how to target a specific object within a GLTF model and animate it using the GSAP code you provided please?

Here is the line of code from the console log using my initial code and clicking on an object with the name ‘Tree06’, how would you zoom in on that tree when you click it?

object: Mesh {uuid: '34c42657-fd5d-4964-a72d-ebe7fddfca7d', name: 'Tree006', type: 'Mesh', parent: Group, children:

I want to do this with multiple objects within the GLTF, so if you are able to help me get the first one working I can then figure out the rest. Thanks in advance!