feat: add FishNavigator component for animated fish movement and upda…

…te App component

package.json

@@ -13,7 +13,8 @@
     "@react-three/drei": "^9.120.0",
     "@react-three/fiber": "^8.17.10",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "three": "^0.171.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

src/App.jsx

@@ -1,11 +1,6 @@
-import React, { Suspense, useRef } from 'react'
-import { Canvas, useFrame } from '@react-three/fiber'
-import { useGLTF } from '@react-three/drei'
-
-// This sandbox shows how to prgressively load an asset through nested suspense blocks
-// 1. A generic fallback
-// 2. Lesser resolution
-// 3. High resolution
+import React, { Suspense } from 'react'
+import { Canvas } from '@react-three/fiber'
+import FishNavigator from './FishNavigator'
 
 export default function App() {
   return (
@@ -15,28 +10,10 @@ export default function App() {
         <directionalLight position={[-10, 10, 5]} intensity={1} />
         <directionalLight position={[-10, 20, 0]} intensity={1.5} />
         <directionalLight position={[0, -10, 0]} intensity={0.25} />
-        <Rotate position-y={0} scale={2}>
-          <Suspense fallback={<Model url="/fish.glb" />}>
-            <Model url="/fish.glb" />
-          </Suspense>
-        </Rotate>
+        <Suspense fallback={null}>
+          <FishNavigator />
+        </Suspense>
       </Canvas>
     </Suspense>
   )
-}
-
-function Model({ url, ...props }) {
-  // useGLTF suspends the component, it literally stops processing
-  const { scene } = useGLTF(url)
-  // By the time we're here the model is gueranteed to be available
-  return <primitive object={scene} {...props} />
-}
-
-function Rotate(props) {
-  const ref = useRef()
-  useFrame((state) => {
-    ref.current.rotation.y = state.clock.elapsedTime;
-    ref.current.position.x = state.mouse.x * 2;
-  })
-  return <group ref={ref} {...props} />
-}
+}

src/FishNavigator.jsx

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { useGLTF, useAnimations } from '@react-three/drei'
+import * as THREE from 'three'
+
+function getRandomPosition() {
+  return {
+    x: (Math.random() - 0.5) * 2,
+    y: (Math.random() - 0.5) * 2,
+    z: (Math.random() - 0.5) * 2,
+  }
+}
+
+function FishNavigator(props) {
+  const ref = useRef()
+  const { scene, animations } = useGLTF('/fish.glb')
+  const { actions } = useAnimations(animations, ref)
+  const [targetPosition, setTargetPosition] = React.useState(getRandomPosition())
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setTargetPosition(getRandomPosition())
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [])
+
+  React.useEffect(() => {
+    if (actions) {
+      const action = actions['swim'] // Replace 'swim' with the actual name of the animation
+      action.reset().fadeIn(0.5).play()
+      action.setLoop(THREE.LoopRepeat)
+    }
+  }, [actions])
+
+  useFrame((state, delta) => {
+    const currentPosition = ref.current.position
+    const direction = {
+      x: targetPosition.x - currentPosition.x,
+      y: targetPosition.y - currentPosition.y,
+      z: targetPosition.z - currentPosition.z,
+    }
+    const distance = Math.sqrt(direction.x ** 2 + direction.y ** 2 + direction.z ** 2)
+    const moveDistance = Math.min(distance, delta * 0.1) // Adjust the speed here
+    if (distance > 0) {
+      currentPosition.x += (direction.x / distance) * moveDistance
+      currentPosition.y += (direction.y / distance) * moveDistance
+      currentPosition.z += (direction.z / distance) * moveDistance
+    }
+  })
+
+  return <primitive ref={ref} object={scene} {...props} />
+}
+
+export default FishNavigator