Add all react-fiber stuff for more commits

src/web/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next start --hostname 0.0.0.0",
     "lint": "next lint"
   },
   "dependencies": {

src/web/src/components/Bird.jsx

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useAnimations, useGLTF } from "@react-three/drei";
+
+export default function Bird({ speed, factor, url, ...props }) {
+  const { nodes, animations } = useGLTF(url);
+  const { ref, mixer } = useAnimations(animations);
+
+  useEffect(
+    () => void mixer.clipAction(animations[0], ref.current).play(),
+    [mixer, animations, ref],
+  );
+
+  useFrame((state, delta) => {
+    ref.current.rotation.y +=
+      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5;
+    mixer.update(delta * speed);
+  });
+
+  return (
+    <group ref={ref}>
+      <scene name="Scene" {...props}>
+        <mesh
+          name="Object_0"
+          morphTargetDictionary={nodes.Object_0.morphTargetDictionary}
+          morphTargetInfluences={nodes.Object_0.morphTargetInfluences}
+          rotation={[1.5707964611537577, 0, 0]}
+        >
+          <bufferGeometry attach="geometry" {...nodes.Object_0.geometry} />
+          <meshStandardMaterial
+            attach="material"
+            {...nodes.Object_0.material}
+            name="Material_0_COLOR_0"
+          />
+        </mesh>
+      </scene>
+    </group>
+  );
+}

src/web/src/components/hero.jsx

@@ -1,8 +1,9 @@
-"use client";
+use client";
 import { Suspense, useMemo } from "react";
 import { Canvas } from "@react-three/fiber";
 import { motion, AnimatePresence } from "framer-motion";
 import { useState, useEffect } from "react";
+import { OrbitControls } from "@react-three/drei";
 import Bird from "@/components/Bird";
 
 function HeroSection1() {
@@ -40,6 +41,7 @@ function HeroSection1() {
     <Canvas camera={{ position: [0, 0, 35] }}>
       <ambientLight intensity={2} />
       <pointLight position={[40, 40, 40]} />
+      <OrbitControls />
       <Suspense fallback={null}>
         {birds.map((props) => (
           <Bird {...props} key={props.key} />