Three JS reset Camera animation - three.js

Question

Is there a way to animate the camera reset movement us Three JS?
I am using the following code to reset the camera, but it reset instantly. I wonder if there is a way to animate the camera reset movement.
$(".rest-btn").on('click', (e) => {
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 150;
});

Answer 1

This can be implemented with a animation library like GSAP. E.g.
let renderer, scene, camera;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 30);
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
gsap.to(camera.position, {
duration: 2,
x: 0,
y: 0,
z: 15
});
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
body {
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.127/build/three.js"></script>