Frame-Rate Independent Motion
Animation & interaction
Lesson 9 of 15
Move an object in units per second, not units per frame.
Animate an orbiting marker by integrating angular velocity with deltaTime and compare it with elapsed-time motion.
How this scene works
deltaTime is the number of seconds since the previous frame. Multiplying angular speed by deltaTime integrates a rotation without depending on how many frames the device renders. elapsedTime is useful for absolute functions such as a sine wave. The runtime pauses its simulation clock when paused and supplies one fixed delta on Step. The ring is static; one sphere follows the integrated angle and another bobs using elapsedTime.
Frame-Rate Independent Motion
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Set angularSpeed to Math.PI / 2 so one orbit takes four seconds. Pause and step through the animation, then double the speed without changing the orbit radius.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
