A színtérben való objektum és kamera mozgások a renderelő függvényből vezérelhetők. A legegyszerűbb megoldás esetén a mozgás paramétereinek változása konstans. A probléma ezzel az, hogy lassabb megjelenítés esetén (pl. 60 FPS helyett csak 30 FPS-t tud a rendszer biztosítani) az egységnyi idő alatt megtett mozgások is lelassulnak. Ez nem szerencsés.

A változó FPS hatását kiküszöbölhetjük, ha az új pozíció számításakor figyelembe vesszük az utolsó renderelés óta eltelt időt. A beépített kamera interakciók képesek erre az alább bemutatott módon. Ezt az elvet saját mozgási paramétereink változtatásánál is alkalmazhatjuk.

let clock = new THREE.Clock();

function animate() {
    let delta = clock.getDelta();
    trackballControls.update( delta );
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

A 07_02_DeltaTimeAnimationTester.html példaprogram az alábbi lépéseket valósítja meg.

• Egy 2 egység élhosszúságú drótvázas kocka modell jobbra-balra történő váltakozó irányú, konstans sebességű mozgást végez a [-5, 5] tartományban az X-tengely mentén.
• A mozgás pozícióváltozását renderelési ciklusonként 0.1 értékre állítjuk. Vegyük észre, hogy ez 60 FPS mellett 1 másodperc alatt 6 egységnyi mozgást jelent.
• A határok túllépésénél a túllépés mértékével csökkentjük a pozíciót a határhoz képest. (Erre igazán az FPS-től függetlenített modellezéskor a lassú frissítési ráták esetén van szükség.)
• Az FPS számláló segítségével követhetjük az újrarajzolás frekvenciáját.

A programban definiáltunk egy sleep() függvényt, ami hívásakor megadott ezredmásodperces várakozást idéz elő.

• Próbáljuk ki, és magyarázzuk meg, mi történik, ha kikommentározzuk a sleep( 55 ); függvényhívást!
• Próbáljunk ki más várakozási paraméter értékeket!

Módosítsuk a programunkat úgy, hogy FPS értéktől függetlenül 1 másodperc alatt 6 egységnyi mozgást végezzen a kocka!

• Vezessünk be egy új globális változót, amiben megadjuk az 1 másodperc alatt elvégzendő mozgás nagyságát!
• Használjuk a delta értéket a pozíció frissítésénél!