Three.js Demos
Three.js Demos

Three.js Timer vs Clock Delta Demo (r183)

Side-by-side demo showing why r183 recommends `THREE.Timer` for frame-delta reads, especially when multiple systems request timing in the same animation frame.

Key topics: three.js timer, three.js clock, r183, delta time, animation loop, frame rate independent animation

What this code does

- r183 Timing Update: `THREE.Timer` is designed for stable delta retrieval when multiple subsystems read timing in the same frame.
- Clock Pitfall: repeated `Clock.getDelta()` calls in one tick can produce inconsistent near-zero deltas for later reads.
- Side-by-Side Behavior: the left cube uses `Clock` with duplicate delta reads, while the right cube uses `Timer` with repeat-safe reads.
- Frame-Rate Independence: both cubes apply radians-per-second rotation, so speed is tied to elapsed time, not frame count.
- Migration Pattern: call `timer.update(timestamp)` once per animation frame, then read `timer.getDelta()` wherever needed.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'

const timer = new THREE.Timer()
timer.connect(document)
const clock = new THREE.Clock()

function animate (timestamp) {
  requestAnimationFrame(animate)

  // Old pattern can return inconsistent deltas if called multiple times
  clock.getDelta()
  const clockDelta = clock.getDelta()

  // Timer is stable within a frame after update()
  timer.update(timestamp)
  timer.getDelta()
  const timerDelta = timer.getDelta()

  clockMesh.rotation.y += 1.25 * clockDelta
  timerMesh.rotation.y += 1.25 * timerDelta

  renderer.render(scene, camera)
}

animate()
← Back