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