fix: restore animated model

src/components/three/models/AnimatedModel.tsx

@@ -1,13 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useAnimations } from "@react-three/drei";
 import type { AnimationAction } from "three";
-import * as THREE from "three";
 import {
   AnimatedModelContext,
   type AnimatedModelContextValue,
 } from "@/components/three/models/useAnimatedModel";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
-import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
+import type { ModelTransformProps } from "@/types/three/three";
 
 export interface AnimatedModelConfig extends ModelTransformProps {
   modelPath: string;
@@ -37,15 +36,13 @@ export function AnimatedModel({
   onAnimationEnd,
   children,
 }: AnimatedModelProps): React.JSX.Element {
-  const groupRef = useRef<THREE.Group>(null);
   const { scene, animations } = useLoggedGLTF(modelPath, {
     scope: "AnimatedModel",
     position,
     rotation,
     scale,
   });
-  const model = useMemo(() => scene.clone(true), [scene]);
+  const { actions, names, mixer } = useAnimations(animations, scene);
-  const { actions, names, mixer } = useAnimations(animations, groupRef);
 
   const [currentAnim, setCurrentAnim] = useState(defaultAnimation);
   const isReady = names.length > 0;
@@ -146,19 +143,22 @@ export function AnimatedModel({
     names,
   };
 
-  const parsedScale =
+  useEffect(() => {
-    typeof scale === "number" ? ([scale, scale, scale] as Vector3Tuple) : scale;
+    scene.position.set(...position);
+    scene.rotation.set(rotation[0], rotation[1], rotation[2]);
+
+    const parsedScale =
+      typeof scale === "number" ? [scale, scale, scale] : (scale ?? [1, 1, 1]);
+    scene.scale.set(
+      parsedScale[0] ?? 1,
+      parsedScale[1] ?? 1,
+      parsedScale[2] ?? 1,
+    );
+  }, [scene, position, rotation, scale]);
 
   return (
     <AnimatedModelContext.Provider value={contextValue}>
-      <group
+      <primitive object={scene} />
-        ref={groupRef}
-        position={position}
-        rotation={rotation}
-        scale={parsedScale}
-      >
-        <primitive object={model} />
-      </group>
       {children}
     </AnimatedModelContext.Provider>
   );

src/world/debug/TestMap.tsx

@@ -154,7 +154,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
       <ModelPreviewErrorBoundary modelPath={ELECTRICIENNE_ANIMATED_MODEL_PATH}>
         <AnimatedModel
           modelPath={ELECTRICIENNE_ANIMATED_MODEL_PATH}
-          defaultAnimation="Idle"
+          defaultAnimation="Dance"
           position={[0, 0, -5]}
           scale={1}
         />