Estoy tratando de emular el comportamiento en este sitio web, cuando el usuario hace clic en un objeto, la cámara se acerca y gira ligeramente para enfocar el objeto y todos los controles se desactivan hasta que el usuario vuelve a hacer clic en cualquier lugar y la animación se invierte y los controles están habilitados.
Actualmente lo tengo funcionando hasta el punto en que haces clic y la cámara se anima para enfocar el objeto 'Tree006', pero no funciona muy bien.
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 ] ); } }