011. The Animation Loop
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
The heart of any game engine or 3D scene is the Game Loop. In the browser, we use `requestAnimationFrame`. It calls a function up to 60 or 120 times per second (depending on the monitor).
The heart of any game engine or 3D scene is the Game Loop. In the browser, we use requestAnimationFrame. It calls a function up to 60 or 120 times per second (depending on the monitor).
022. useFrame in R3F
React Three Fiber abstracts the render loop. Simply drop a useFrame hook into any component inside the Canvas. It provides state (clock, camera) and delta (time since last frame) so animations run at the same speed regardless of framerate.
?Frequently Asked Questions
Why use 'delta' time?
If you add +0.01 per frame, a 144Hz monitor will spin the cube twice as fast as a 60Hz monitor. Multiplying by `delta` time ensures it spins at the exact same speed everywhere.
