I've successfully used a gltf loader to load a model and implemented a click function on it. The desired behavior is that when a specific part of the model is clicked, the camera should smoothly transition to focus on that part instead of abruptly changing position and rotation. How can I animate the camera's position change for a smoother transition?
var loader = new THREE.GLTFLoader();
loader.load('perseverance.gltf', function(gltf){
scene.add(gltf.scene);
box_model = gltf.scene.getObjectByName( "box" )
mast_cams = gltf.scene.getObjectByName( "Mastcam_Z_cams" )
console.log(mast_cams);
domEvents.addEventListener(mast_cams, 'click', function(event){
if(!mast_cams_clicked){
console.log("mast_cams clicked")
camera.position.set(-1.340 ,2.6 , 2.180);
camera.rotation.set(-13, -18.40, -3.20);
controls.update();
mast_cams_clicked = true;
}else{
console.log("Reset")
controls.reset();
mast_cams_clicked = false;
}
})
// animate();
});