Add clonepbject3

src/components/Cat.tsx

@@ -1,15 +1,60 @@
-import { useAnimations, useGLTF } from "@react-three/drei";
+import { Clone, useAnimations, useGLTF } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import { useRef } from "react";
 
-const Cat = () => {
-    const { scene, animations } = useGLTF("cat.glb");
+const CloneCat = ({
+    scene,
+    animations,
+    position,
+    animationName,
+}: {
+    scene: any;
+    animations: any;
+    position: any;
+    animationName: str;
+}) => {
     const ref = useRef();
     const { actions } = useAnimations(animations, ref);
-    console.log(scene);
     useFrame(() => {
-        actions.walk?.play();
+        actions[animationName]?.play();
     });
-    return <primitive object={scene} ref={ref} />;
+    return (
+        <Clone
+            object={scene}
+            scale={0.35}
+            position-x={-8}
+            ref={ref}
+            position={position}
+        />
+    );
+};
+
+const Cat = () => {
+    const { scene, animations } = useGLTF("/catbeta2.glb");
+    // const ref = useRef();
+    // const { actions } = useAnimations(animations, ref);
+    // console.log(scene);
+    // useFrame(() => {
+    //     actions.stay?.play();
+    // });
+    return (
+        <>
+            {/* <primitive object={scene} ref={ref} scale={0.35} />
+            <Clone object={scene} scale={0.35} position-x={-4} ref={ref} />
+            <Clone object={scene} scale={0.35} position-x={-8} ref={ref} /> */}
+            <CloneCat
+                scene={scene}
+                animations={animations}
+                position={[0, 0, 0]}
+                animationName="stay"
+            />
+            <CloneCat
+                scene={scene}
+                animations={animations}
+                position={[5, 0, 50]}
+                animationName="sit"
+            />
+        </>
+    );
 };
 export default Cat;

src/components/Header.tsx

@@ -8,15 +8,15 @@ export const Header = () => {
             sx={{
                 backgroundColor: "#fffff0",
                 width: "100%",
-                height: "13vh",
+                height: "6vh",
                 margin: "0 0",
             }}
         >
             <Image
                 src="/images/nyan.gif"
                 alt="nyan.gif"
-                height={100}
-                width={100}
+                height={45}
+                width={45}
             />
         </Box>
     );

src/components/Request.tsx

@@ -13,6 +13,7 @@ import DatePick from "../components/DatePick";
 
 export default function Request() {
     const [isOpen, setIsOpen] = useState(false);
+    const [isClose, setIsClose] = useState(false);
     return (
         <div>
             <Button
@@ -55,12 +56,16 @@ export default function Request() {
                         <Image
                             src="/images/catclose.png"
                             alt="cat close.png"
+                            width={100}
+                            height={100}
                             style={{
                                 textAlign: "right",
                                 position: "absolute",
                                 right: 0,
-                                width: "15%",
-                                height: "20%",
+                                top: 0,
+                            }}
+                            onClick={() => {
+                                setIsClose(isClose);
                             }}
                         />
 

src/pages/todo.tsx

@@ -1,11 +1,19 @@
-import { TodoAdd } from "@/components/Todoadd";
+import Cat from "@/components/Cat";
 import { ScheduleCalendar } from "@/components/schedule/ScheduleCalender";
+import { TodoAdd } from "@/components/Todoadd";
 import { Box, Stack } from "@mui/material";
-// import DataPicker from "../components/DataPicker";
+import { OrbitControls } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
 export default function Todo() {
     return (
         <Stack direction="row">
-            <Box component="div" sx={{ height: "100vh", width: "60%" }}></Box>
+            <Box component="div" sx={{ height: "100vh", width: "60%" }}>
+                <Canvas>
+                    <OrbitControls />
+                    <Cat />
+                    <directionalLight />
+                </Canvas>
+            </Box>
             <Box
                 component="div"
                 sx={{ height: "100vh", width: "40%" }}