feat: bezier rotation

MineBuilders · Jan 21, 2025 · 2066809 · 2066809
1 parent 868393f
commit 2066809
Showing 1 changed file with 41 additions and 3 deletions.
diff --git a/website/src/assets/javascripts/main.ts b/website/src/assets/javascripts/main.ts
@@ -7,7 +7,7 @@ setTimeout(() => animatedDone = true, 1600);
 const img = document.querySelector('#index-page .logo img');
 const canvas = document.querySelector('#index-page .logo canvas');
 const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 64);
+const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 80);
 const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas });
 
 camera.position.set(0, 0, 56);
@@ -30,9 +30,9 @@ loader.load("./assets/models/logo.glb", data => {
     postShowCanvas();
 });
 
-// let currentRotationY = 0;
+let currentRotationY = 0;
 function animate() {
-    // if (logo) logo.rotation.y = (-90 + currentRotationY) * deg;
+    if (logo) logo.rotation.y = (-90 + currentRotationY) * deg;
     renderer.render(scene, camera);
     requestAnimationFrame(animate);
 }
@@ -48,3 +48,41 @@ function showCanvas() {
     const [ width, height ] = [clientWidth * devicePixelRatio, clientHeight * devicePixelRatio];
     renderer.setSize(width, height, false);
 }
+
+
+const bezier = cubicBezier(1, -0.54, 0, 1.54);
+setInterval(() => {
+    const endN = 300;
+    let n = 0;
+    const timer = setInterval(() =>
+        // @ts-ignore
+        currentRotationY = ++n >= endN ? clearInterval(timer) || 0 : 360 * bezier(n / endN), 1);
+}, 5000);
+
+function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {
+    const bezier = (t: number, p0: number, p1: number, p2: number, p3: number) => {
+        const u = 1 - t;
+        return u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3;
+    }
+    const solveX = (t: number) => bezier(t, 0, x1, x2, 1);
+    const solveY = (t: number) => bezier(t, 0, y1, y2, 1);
+    return function(t: number) {
+        let left = 0;
+        let right = 1;
+        const epsilon = 0.0001;
+        let x = solveX(t);
+
+        while (right - left > epsilon) {
+            let mid = (left + right) / 2;
+            let xMid = solveX(mid);
+            if (xMid < x) {
+                left = mid;
+            } else {
+                right = mid;
+            }
+        }
+
+        let resultT = (left + right) / 2;
+        return solveY(resultT);
+    };
+}