add camera zoom animation

add react spring

components/models/cloud-model.tsx

@@ -1,3 +1,4 @@
+import { easings, useSpring } from '@react-spring/three';
 import { useFrame, useLoader, useThree } from '@react-three/fiber';
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
@@ -9,6 +10,26 @@ const CloudModel = () => {
 
   const camera = useThree((state) => state.camera);
 
+  const [_, api] = useSpring(
+    {
+      from: {
+        z: camera.position.z,
+      },
+      config: {
+        duration: 1200,
+        easing: easings.easeOutCirc,
+      },
+      to: {
+        z: camera.position.z - 2,
+      },
+      pause: true,
+      onChange: (e) => {
+        camera.position.z = Number(e.value.z);
+      },
+    },
+    [],
+  );
+
   const gltf = useLoader(
     GLTFLoader,
     './models/cloud_station/modelDraco.gltf',
@@ -26,27 +47,27 @@ const CloudModel = () => {
     gltf.scene.position.set(0, 0, 0);
     camera.position.y = 2.2;
     camera.lookAt(0, 1.2, 0);
+
+    setTimeout(() => {
+      api.resume();
+    }, 1000);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // 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);
+    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 (
     <>
-      <mesh position={[0, 1.2, 0]}>
-        <boxGeometry />
-        <meshStandardMaterial />
-      </mesh>
       <primitive object={gltf.scene} />
       {/* <OrbitControls /> */}
-      <axesHelper args={[5]} />
+      {/* <axesHelper args={[5]} /> */}
     </>
   );
 };