In my scene, I have created various objects and implemented raycasting/tweening code so that when an object is clicked, it smoothly animates to move in sync with the camera's position and rotation.
Below is the code snippet for the raycasting/tweening operation:
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
x: 0,
y: 0,
z: -100 }, 2000 )
.easing( TWEEN.Easing.Elastic.Out).start();
new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
x: 0,
y: 0,
z: 0 }, 2000 )
.easing( TWEEN.Easing.Elastic.Out).start();
object.lookAt.camera;
}
}
Now, I am contemplating how I can modify the tween animation to make the camera follow and track the selected object instead of the object moving towards the camera. My goal is to have dynamic movement and rotation of objects while enabling the camera to focus and follow individual objects seamlessly.
Just to clarify, all these operations are carried out using a perspective camera.