Merge branch 'dev'

package.json

@@ -18,6 +18,7 @@
     "@docsearch/react": "3",
     "@giscus/react": "^2.2.0",
     "@mapbox/rehype-prism": "^0.8.0",
+    "@tweenjs/tween.js": "^18.6.4",
     "algoliasearch": "^4.14.2",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.5",
@@ -58,4 +59,4 @@
     "tailwindcss": "^3.1.8",
     "typescript": "4.8.4"
   }
-}
+}

pages/about.tsx

@@ -1,12 +1,137 @@
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
+import { InitFn, useThree, THREE } from 'rua-three';
 import { NextPageWithLayout } from 'types';
+import TWEEN from '@tweenjs/tween.js';
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+
+const glftLoader = new GLTFLoader();
+const rotationY = 0.4;
+const rotationX = 0.2;
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 
 const About: NextPageWithLayout = () => {
+  const init: InitFn = ({
+    scene,
+    controls,
+    camera,
+    isOrbitControls,
+    frameArea,
+    isPerspectiveCamera,
+    addRenderCallback,
+    addWindowEvent,
+  }) => {
+    scene.add(new THREE.AmbientLight(0xffffff, 0.8));
+
+    if (isOrbitControls(controls)) {
+      controls.enablePan = false;
+      controls.enableZoom = false;
+      controls.enableRotate = false;
+    }
+
+    const handleLoad = (gltf: GLTF) => {
+      const root = gltf.scene;
+      scene.add(root);
+
+      const clock = new THREE.Clock();
+      const mixer = new THREE.AnimationMixer(root);
+      gltf.animations.forEach((clip) => {
+        mixer.clipAction(clip).play();
+      });
+      addRenderCallback(() => {
+        mixer.update(clock.getDelta());
+      });
+
+      const box = new THREE.Box3().setFromObject(root);
+      const boxSize = box.getSize(new THREE.Vector3()).length();
+      const boxCenter = box.getCenter(new THREE.Vector3());
+
+      if (isPerspectiveCamera(camera)) {
+        frameArea(boxSize, boxSize, boxCenter, camera);
+      }
+      controls.target.copy(boxCenter);
+      controls.update();
+
+      // Rotate 180 degress
+      root.rotation.y = Math.PI * 2;
+
+      // Enter animation
+      const entryValue = {
+        rotationY: root.rotation.y,
+        meshY: root.position.y,
+        cameraY: camera.position.y,
+        z: camera.position.z,
+      };
+      const enter = new TWEEN.Tween(entryValue)
+        .to(
+          {
+            rotationY: 0,
+            meshY: entryValue.meshY - 1,
+            cameraY: entryValue.cameraY + 0.5,
+            z: entryValue.z - 16,
+          },
+          1000
+        )
+        .onUpdate((obj) => {
+          // root.rotation.y = obj.rotationY;
+          root.position.y = obj.meshY;
+          camera.position.y = obj.cameraY;
+          camera.position.z = obj.z;
+        })
+        .easing(TWEEN.Easing.Circular.Out);
+      setTimeout(() => {
+        enter.start();
+      }, 1000);
+
+      // Render animation
+      addRenderCallback((time) => {
+        TWEEN.update(time / 0.001);
+      });
+
+      const halfWidth = Math.floor(window.innerWidth / 2);
+      const halfHeight = Math.floor(window.innerHeight / 2);
+
+      const updateMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
+        let x;
+        let y;
+        if (e instanceof MouseEvent) {
+          x = e.clientX;
+          y = e.clientY;
+        } else {
+          x = e.touches[0].clientX;
+          y = e.touches[0].clientY;
+        }
+
+        // > 0 is right, < 0 is left
+        const directionX = x - halfWidth;
+        const directionY = y - halfHeight;
+
+        // if (directionX > 0) root.rotation.y += 0.01;
+        root.rotation.y = rotationY * (directionX / halfWidth);
+        root.rotation.x = rotationX * (directionY / halfHeight);
+      };
+
+      addWindowEvent('mousemove', updateMousePosition, {
+        passive: true,
+      });
+      addWindowEvent('touchmove', updateMousePosition, {
+        passive: true,
+      });
+    };
+
+    glftLoader.load('./models/cloud_station/scene.gltf', handleLoad);
+  };
+
+  const { ref } = useThree({
+    init,
+    alpha: true,
+  });
+
   return (
     <>
+      <canvas ref={ref} className="fixed top-0 left-0 -z-10"></canvas>
+
       <main className="h-[calc(100vh-142px)] flex flex-col">
         <div
           className={classNames(
@@ -35,8 +160,6 @@ const About: NextPageWithLayout = () => {
             </div>
           </div> */}
           <h1 className="text-5xl font-semibold font-Barlow">About</h1>
-
-          <p></p>
         </div>
       </main>
     </>

pages/index.tsx

@@ -84,12 +84,11 @@ const Home: NextPageWithLayout = () => {
       gltf.animations.forEach((clip) => {
         mixer.clipAction(clip).play();
       });
-      addRenderCallback((time) => {
+      addRenderCallback(() => {
         mixer.update(clock.getDelta());
       });
 
       const box = new THREE.Box3().setFromObject(root);
-
       const boxSize = box.getSize(new THREE.Vector3()).length();
       const boxCenter = box.getCenter(new THREE.Vector3());
 
@@ -99,9 +98,10 @@ const Home: NextPageWithLayout = () => {
       isPerspectiveCamera(camera) &&
         frameArea(boxSize * 0.8, boxSize, boxCenter, camera);
 
-      // controls.maxDistance = boxSize * 10;
       controls.target.copy(boxCenter);
       controls.update();
+      root.position.y += 0.1;
+      camera.position.z -= 0.2;
 
       const halfWidth = Math.floor(window.innerWidth / 2);
       const halfHeight = Math.floor(window.innerHeight / 2);

public/models/cloud_station/license.txt

@@ -0,0 +1,11 @@
+Model Information:
+* title:	Cloud Station
+* source:	https://sketchfab.com/3d-models/cloud-station-26f81b24d83441ba88c7e80a52adbaaf
+* author:	Alexa Kruckenberg (https://sketchfab.com/AlexaKruckenberg)
+
+Model License:
+* license type:	CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements:	Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Cloud Station" (https://sketchfab.com/3d-models/cloud-station-26f81b24d83441ba88c7e80a52adbaaf) by Alexa Kruckenberg (https://sketchfab.com/AlexaKruckenberg) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

yarn.lock

@@ -1788,6 +1788,11 @@
   resolved "https://registry.npmmirror.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@tweenjs/tween.js@^18.6.4":
+  version "18.6.4"
+  resolved "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz#40a3d0a93647124872dec8e0fd1bd5926695b6ca"
+  integrity sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==
+
 "@types/acorn@^4.0.0":
   version "4.0.6"
   resolved "https://registry.npmmirror.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"