Actualizado y reparado

src/pages/Previewer.tsx

@@ -0,0 +1,36 @@
+import { Canvas } from "@react-three/fiber";
+import { useGLTF, useAnimations, Environment, Loader } from "@react-three/drei";
+import { Suspense, useEffect } from "react";
+
+function Model({ url }: { url: string }) {
+  const { scene, animations } = useGLTF(url);
+  const { actions } = useAnimations(animations, scene);
+
+  useEffect(() => {
+    if (actions && animations.length > 0) {
+      actions[animations[0].name]?.play(); // Play the first animation if available
+    }
+  }, [actions, animations]);
+
+  return <primitive object={scene} scale={0.01} position={[0, -2, 0]} rotation={[0, -3 * Math.PI / 5, 0]} />;
+}
+
+// Preload the model for smoother loading
+useGLTF.preload("/models/sample.glb");
+
+// Main 3D Viewer
+export default function Previewer({ modelUrl }: { modelUrl: string }) {
+  return (
+    <div className="grow w-full bg-white/10 shadow-xl shadow-gray-300/25 rounded-lg p-6 backdrop-blur-lg">
+      <div className="w-full h-100 grow">
+        <Suspense fallback={<Loader />}>
+          <Canvas
+            camera={{ position: [0, 0, 12], fov: 20 }}>
+            <Environment preset="city" />
+            <Model url={modelUrl} />
+          </Canvas>
+        </Suspense>
+      </div>
+    </div>
+  );
+}