Im trying to emulate the behaviour on this website, when the user clicks an object the camera zooms in and rotate slightly to focus on the object and all controls are disabled until the user clicks anywhere again and the animation is reversed and controls are enabled.
Currently I have it working to the point where you click and the camera is animated to focus on the object 'Tree006', but it's not working very well.
var mesh=[];
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 && intersects[0].object.name==="Tree006") {
var object = intersects[0].object;
gsap.to( camera.position, {
duration: 1,
x: mesh["Tree006"].position.x,
y: mesh["Tree006"].position.y,
z: mesh["Tree006"].position.z,
onUpdate: function() {
camera.lookAt(0,0,0);
}
} );
console.log( 'Intersection:', intersects[ 0 ] );
}
}