Three JS reset Camera animation

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;
 });

user_5250847 · Answer

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;
}

Three JS reset Camera animation

1 Answers