Three.js · 4 / 6

Dashboard
Module 4 · Clock

Smooth motion with elapsed time

Avoid tying animation to raw frame counts — frame rates drift. Use THREE.Clock: getElapsedTime() and getDelta() give stable seconds across devices. Combine with Math.sin / cos for loops and bobbing motion. 

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  mesh.position.y = Math.sin(t * 1.8) * 0.85;
  renderer.render(scene, camera);
}
Pro tip

Use delta (getDelta()) when stepping physics-style integrations.

Next

Module 5 adds OrbitControls so users steer the camera.