Clock
Quick answer
Clock is a lightweight timer that reports seconds since the previous getDelta() call and total elapsed time since start(). Drive animations with getDelta() instead of frame counts so motion stays consistent across 60 Hz and 144 Hz displays. Set autoStart to false when you want explicit control over when timing begins.
new THREE.Clock ( autoStart ) → Clock
Key points
- autoStart defaults to true, so the first getDelta() call starts the timer automatically.
- stop() pauses accumulation and start() resets the origin; elapsed time is preserved between them.
- Clamp delta to a small maximum to survive tab switches and long stalls.
Example
const clock = new THREE.Clock();
renderer.setAnimationLoop(function () {
const dt = Math.min(clock.getDelta(), 0.1);
mesh.rotation.y += dt * 0.8;
mesh.position.y = Math.sin(clock.elapsedTime * 1.4) * 0.3;
renderer.render(scene, camera);
});clock.stop();
clock.start();
clock.start();
clock.elapsedTime = 0;Notes
- getElapsedTime() internally calls getDelta(), so mixing both in a frame double-advances elapsed time.
- A huge delta after a background tab resumes can teleport objects through walls; cap it.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Clock. https://www.jingweizhi.com/en/three/api/clock.html (accessed 2026-11-03).