feat: animator

src/components/3d/AnimatedModel.tsx

@@ -66,48 +66,14 @@ export function AnimatedModel({
   children,
 }: AnimatedModelProps): React.JSX.Element {
   const groupRef = useRef<THREE.Group>(null);
+
+  void groupRef;
   const { scene, animations } = useGLTF(modelPath);
-  const { actions, names, mixer } = useAnimations(animations, groupRef);
+  const { actions, names, mixer } = useAnimations(animations, scene);
+
   const [currentAnim, setCurrentAnim] = useState(defaultAnimation);
   const [isReady, setIsReady] = useState(false);
 
-  // DEBUG: Analyser la structure du modèle
-  useEffect(() => {
-    console.log("=== DEBUG ANIMATED MODEL ===");
-    console.log("modelPath:", modelPath);
-    console.log("scene:", scene);
-    console.log("scene.children.length:", scene.children.length);
-    console.log(
-      "scene.children types:",
-      scene.children.map((c) => c.type),
-    );
-
-    let foundMesh = false;
-    let foundSkeleton = false;
-
-    scene.traverse((child: THREE.Object3D) => {
-      if (child.type === "SkinnedMesh") {
-        console.log("✅ Found SkinnedMesh:", child.name);
-        console.log("  visible:", child.visible);
-        console.log("  skeleton:", (child as THREE.SkinnedMesh).skeleton);
-        foundMesh = true;
-      }
-      if (child.type === "Mesh") {
-        console.log("✅ Found Mesh:", child.name);
-        console.log("  visible:", child.visible);
-        foundMesh = true;
-      }
-      if (child.type === "Skeleton") {
-        console.log("✅ Found Skeleton:", child);
-        foundSkeleton = true;
-      }
-    });
-
-    if (!foundMesh) console.log("❌ AUCUN MESH TROUVÉ!");
-    if (!foundSkeleton) console.log("❌ AUCUN SKELETON TROUVÉ!");
-    console.log("=========================");
-  }, [scene, modelPath]);
-
   useEffect(() => {
     if (mixer) {
       mixer.timeScale = speed;
@@ -179,35 +145,30 @@ export function AnimatedModel({
 
   useEffect(() => {
     if (autoPlay && names.length > 0) {
-      // Essayer d'abord l'animation par défaut, sinon la première disponible
+      console.log(`[AnimatedModel] Available animations: ${names.join(", ")}`);
+
       let defaultAction = actions[defaultAnimation as string];
 
-      // Si l'animation par défaut n'existe pas, utiliser la première disponible
       if (!defaultAction && names.length > 0) {
         console.log(
-          `Animation "${defaultAnimation}" non trouvée, utilisation de:`,
-          names[0],
+          `[AnimatedModel] "${defaultAnimation}" not found, using: ${names[0]}`,
         );
         defaultAction = actions[names[0] as string];
       }
 
       if (defaultAction) {
-        console.log("Lecture de l'animation:", defaultAction.getClip().name);
         defaultAction.play();
         setIsReady(true);
         setCurrentAnim(defaultAction.getClip().name);
         onLoaded?.();
       } else {
-        console.log("Aucune animation disponible dans les actions");
+        console.log("[AnimatedModel] No available animation in actions");
       }
     } else if (names.length === 0) {
-      console.log("Aucune animation trouvée dans le modèle");
+      console.log("[AnimatedModel] No animation found in model");
     }
   }, [actions, defaultAnimation, names, autoPlay, onLoaded]);
 
-  const parsedScale =
-    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
-
   const contextValue: AnimatedModelContextValue = {
     play,
     stop,
@@ -218,17 +179,23 @@ export function AnimatedModel({
     names,
   };
 
+  // Apply transforms to scene directly
+  useEffect(() => {
+    scene.position.set(...position);
+    scene.rotation.set(
+      (rotation[0] * Math.PI) / 180,
+      (rotation[1] * Math.PI) / 180,
+      (rotation[2] * Math.PI) / 180,
+    );
+    const s =
+      typeof scale === "number" ? [scale, scale, scale] : (scale ?? [1, 1, 1]);
+    scene.scale.set(s[0] ?? 1, s[1] ?? 1, s[2] ?? 1);
+  }, [scene, position, rotation, scale]);
+
   return (
     <AnimatedModelContext.Provider value={contextValue}>
-      <group
-        ref={groupRef}
-        position={position}
-        rotation={rotation}
-        scale={parsedScale}
-      >
-        <primitive object={scene.clone()} />
-        {children}
-      </group>
+      <primitive object={scene} />
+      {children}
     </AnimatedModelContext.Provider>
   );
 }

src/world/debug/TestScene.tsx

@@ -1,8 +1,9 @@
 import { useRef } from "react";
-import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
 import * as THREE from "three";
+import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
 import { GrabbableObject } from "@/components/3d/GrabbableObject";
 import { TriggerObject } from "@/components/3d/TriggerObject";
+import { AnimatedModel } from "@/components/3d";
 import {
   TEST_SCENE_FLOOR_COLLIDER_HALF_EXTENTS,
   TEST_SCENE_FLOOR_POSITION,
@@ -21,28 +22,7 @@ import {
   TEST_SCENE_TRIGGER_SOUND_PATH,
 } from "@/data/testSceneConfig";
 import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
-import type { OctreeReadyHandler } from "@/types/3d";;import { SimpleModel } from "@/components/3d";
-
-import { useGLTF } from "@react-three/drei";
-// Dans votre composant
-
-
-// ---
-import { AnimatedModel, useAnimatedModel } from "@/components/3d";
-
-const MODEL_PATH = "/models/elec/model.gltf";
-
-function AnimationTester(): React.JSX.Element {
-  const { scene } = useGLTF("/models/elec/model.gltf");
-return (
-  <primitive 
-    object={scene.clone()} 
-    position={[0, 0, -5]} 
-    scale={[1, 1, 1]}
-  />
-);
-}
-
+import type { OctreeReadyHandler } from "@/types/3d";
 
 interface TestSceneProps {
   onOctreeReady: OctreeReadyHandler;
@@ -105,22 +85,14 @@ export function TestScene({
             />
           </mesh>
         </TriggerObject>
-
-          
-
       </Physics>
+
       <AnimatedModel
-            modelPath={MODEL_PATH}
-            defaultAnimation="Idle"
-            position={[0, 0, -5]}
-          >
-            <AnimationTester />
-          </AnimatedModel>
-      {/* <SimpleModel
-          modelPath="/models/electricenne/model.gltf"
-          position={[0, 1, -5]}
-          scale={1}
-        /> */}
+        modelPath="/models/elec/model.gltf"
+        defaultAnimation="Idle"
+        position={[0, 0, -5]}
+        scale={1}
+      />
     </>
   );
-}
+}