Animation Loop

Animation Loop

Three.js scenes are static until you animate them. The browser provides requestAnimationFrame which calls your function ~60 times per second, synchronized with the display refresh rate.

Basic Loop

function animate() {
  requestAnimationFrame(animate); // schedule next frame
  mesh.rotation.y += 0.01;       // update state
  renderer.render(scene, camera); // draw
}
animate(); // kick it off

Each call to requestAnimationFrame schedules exactly one future call — the loop is self-sustaining.

Delta Time

Running at exactly 60 fps isn't guaranteed. For frame-rate-independent animation, use a Clock:

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta(); // seconds since last frame
  mesh.rotation.y += delta * 1.5; // 1.5 radians/sec
  renderer.render(scene, camera);
}

Animating Properties

Any numeric property can be animated: rotation, position, scale, material color/opacity.

// Oscillate position with a sine wave
mesh.position.y = Math.sin(clock.getElapsedTime()) * 2;

// Pulse scale
const s = 1 + Math.sin(clock.getElapsedTime() * 2) * 0.3;
mesh.scale.set(s, s, s);

Your Task

Implement buildAnimator(mesh) that takes a mesh and returns an object { step } where:

• step(delta) increments mesh.rotation.y by delta * 2 and mesh.rotation.x by delta * 1
• Returns the mesh (unchanged)