My personal site cherry.computer
htmx tailwind axum askama

Maintain animation speed regardless of frametime

+9 -4
+9 -4
frontend/src/ts/logo.ts
··· 7 7 import { FontLoader } from "./three/FontLoader.js"; 8 8 import { TextGeometry } from "./three/TextGeometry.js"; 9 9 10 + let previous: DOMHighResTimeStamp; 11 + 10 12 const scene = new Scene(); 11 13 const camera = new PerspectiveCamera(40, 25 / 10, 0.1, 1000); 12 14 camera.zoom = 0.05; ··· 38 40 camera.position.y = 1.9; 39 41 camera.position.z = 15; 40 42 41 - function render() { 42 - requestAnimationFrame(render); 43 + function render(now: DOMHighResTimeStamp) { 44 + const elapsed = now - (previous ?? now); 45 + previous = now; 43 46 44 47 if (text) { 45 - text.rotation.y += 0.1; 48 + text.rotation.y += elapsed * 0.006; 46 49 } 47 50 48 51 renderer.render(scene, camera); 52 + 53 + requestAnimationFrame(render); 49 54 } 50 55 51 - render(); 56 + requestAnimationFrame(render);