CODEWITHSUNDEEP
three.js
Steven1
Steven1

Reputation: 13

How do I control the time when the camera is moving

My actual requirement is to move the camera from 1 to another pos in a certain time eg. (0,0,0) to (100,0,100) in say 5 sec.

Upvotes: 0

Views: 35

Answers (1)

Mugen87
Mugen87

Reputation: 31026

You can use an animation library like GSAP or tween.js for solving this issue. The respective APIs make it easy to define the desired duration.

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 2;

  scene = new THREE.Scene();

  const geometry = new THREE.PlaneGeometry();
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  gsap.to(camera.position, {
    duration: 5, // 5 seconds
    x: 1,
    y: 0,
    z: 2
  });

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}
body {
    margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

Upvotes: 1

Related Questions