CODEWITHSUNDEEP
three.js3d
Yang Zeng
Yang Zeng

Reputation: 71

Three JS reset Camera animation

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

Upvotes: 2

Views: 540

Answers (1)

Mugen87
Mugen87

Reputation: 31076

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/[email protected]/build/three.js"></script>

Upvotes: 1

Related Questions