update about page camera animation

components/models/about-model.tsx

@@ -9,8 +9,8 @@ const CloudModel = lazy(() => import('components/models/cloud-model'));
 const AboutModel = () => {
   return (
     <>
-      <div className={clsx('fixed top-0 left-0 z-10', 'w-full h-full')}>
-        <Canvas>
+      <div className={clsx('fixed top-0 left-0 -z-10', 'w-full h-full')}>
+        <Canvas camera={{ position: [0, 1.8, 10] }}>
           <ambientLight color={0xffffff} intensity={0.6} />
           <Suspense fallback={<></>}>
             <CloudModel />

components/models/cloud-model.tsx

@@ -1,15 +1,30 @@
 import { easings, useSpring } from '@react-spring/three';
 import { useFrame, useLoader, useThree } from '@react-three/fiber';
+import { getMousePosition } from 'lib/utils';
+import { useTheme } from 'next-themes';
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { rotationX, rotationY } from './home-model';
 
 const CloudModel = () => {
   const mixer = useRef<THREE.AnimationMixer | null>(null);
 
   const camera = useThree((state) => state.camera);
 
+  // After model loading, set theme to dark mode.
+  const restore = useRef(false);
+  const { systemTheme, theme, setTheme } = useTheme();
+  const currentTheme = theme === 'system' ? systemTheme : theme;
+  // setDarkMode is async called by setTimeout, when component is unmounted
+  // it should not be called.
+  const setDarkMode = () => {
+    if (currentTheme === 'dark') return;
+    restore.current = true;
+    document.body.style.transition = 'all 1.2s ease-out';
+    setTheme('dark');
+  };
   const [_, api] = useSpring(
     {
       from: {
@@ -20,7 +35,7 @@ const CloudModel = () => {
         easing: easings.easeOutCirc,
       },
       to: {
-        z: camera.position.z - 2,
+        z: camera.position.z - 5.2,
       },
       pause: true,
       onChange: (e) => {
@@ -45,22 +60,44 @@ const CloudModel = () => {
       mixer.current?.clipAction(clip).play();
     });
     gltf.scene.position.set(0, 0, 0);
-    camera.position.y = 2.2;
-    camera.lookAt(0, 1.2, 0);
+    camera.lookAt(0, 1, 0);
+
+    const halfWidth = Math.floor(window.innerWidth / 2);
+    const halfHeight = Math.floor(window.innerHeight / 2);
+
+    const moveHandler = (e: MouseEvent | globalThis.TouchEvent) => {
+      const { x, y } = getMousePosition(e);
+      // > 0 is right, < 0 is left
+      // if (directionX > 0) root.rotation.y += 0.01;
+      gltf.scene.rotation.x = rotationX * ((y - halfHeight) / halfHeight);
+      gltf.scene.rotation.y = rotationY * ((x - halfWidth) / halfWidth);
+    };
+    window.addEventListener('mousemove', moveHandler);
+    window.addEventListener('touchmove', moveHandler);
 
     setTimeout(() => {
       api.resume();
+      setDarkMode();
     }, 1000);
+
+    return () => {
+      window.removeEventListener('mousemove', moveHandler);
+      window.removeEventListener('touchmove', moveHandler);
+
+      if (!restore.current) return;
+      setTheme('light');
+      document.body.style.transition = 'all 0.3s ease-out';
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // update camera position
-  const vec = useRef(new THREE.Vector3());
-  useFrame(({ mouse, camera }, delta) => {
+  // const vec = useRef(new THREE.Vector3());
+  useFrame((_, delta) => {
     mixer.current?.update(delta);
-    vec.current.set(-mouse.x * 3, -mouse.y * 3 + 2.2, camera.position.z);
-    camera.position.lerp(vec.current, 0.025);
-    camera.lookAt(0, 1.2, 0);
+    // vec.current.set(-mouse.x * 3, -mouse.y * 3 + 2.2, camera.position.z);
+    // camera.position.lerp(vec.current, 0.025);
+    // camera.lookAt(0, 1.2, 0);
   });
 
   return (