adjust about page camera position

add leva

components/models/about-model.tsx

@@ -9,13 +9,14 @@ 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')}>
+      <div className={clsx('fixed top-0 left-0 z-10', 'w-full h-full')}>
         <Canvas>
           <ambientLight color={0xffffff} intensity={0.6} />
           <Suspense fallback={<></>}>
             <CloudModel />
           </Suspense>
         </Canvas>
+        {/* <Leva /> */}
       </div>
     </>
   );

components/models/cloud-model.tsx

@@ -1,15 +1,14 @@
 import { useFrame, useLoader, useThree } from '@react-three/fiber';
-import { getMousePosition } from 'lib/utils';
 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);
+
   const gltf = useLoader(
     GLTFLoader,
     './models/cloud_station/modelDraco.gltf',
@@ -24,34 +23,30 @@ const CloudModel = () => {
     gltf.animations.forEach((clip) => {
       mixer.current?.clipAction(clip).play();
     });
-
-    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);
-
-    return () => {
-      window.removeEventListener('mousemove', moveHandler);
-      window.removeEventListener('touchmove', moveHandler);
-    };
+    gltf.scene.position.set(0, 0, 0);
+    camera.position.y = 2.2;
+    camera.lookAt(0, 1.2, 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useFrame((_, delta) => {
+  // update camera position
+  const vec = useRef(new THREE.Vector3());
+  useFrame(({ mouse, camera }, delta) => {
+    vec.current.set(-mouse.x * 2, -mouse.y * 2 + 2.2, camera.position.z);
     mixer.current?.update(delta);
+    camera.position.lerp(vec.current, 0.025);
+    camera.lookAt(0, 1.2, 0);
   });
 
   return (
     <>
+      <mesh position={[0, 1.2, 0]}>
+        <boxGeometry />
+        <meshStandardMaterial />
+      </mesh>
       <primitive object={gltf.scene} />
+      {/* <OrbitControls /> */}
+      <axesHelper args={[5]} />
     </>
   );
 };