fix: Fix 3d models

src/widgets/MediaViewer/ThreeView.tsx

@@ -1,5 +1,7 @@
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, Stage, useGLTF } from "@react-three/drei";
+import { useEffect, Suspense } from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
 
 type ModelViewerProps = {
   width?: string;
@@ -7,21 +9,72 @@ type ModelViewerProps = {
   height?: string;
 };
 
+const Model = ({ fileUrl }: { fileUrl: string }) => {
+  const { scene } = useGLTF(fileUrl);
+  return <primitive object={scene} />;
+};
+
+const LoadingFallback = () => {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 2,
+        zIndex: 1000,
+        backgroundColor: "background.paper",
+        p: 3,
+        borderRadius: 2,
+      }}
+    >
+      <CircularProgress size={48} />
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        style={{ whiteSpace: "nowrap" }}
+      >
+        Загрузка 3D модели...
+      </Typography>
+    </Box>
+  );
+};
+
 export const ThreeView = ({
   fileUrl,
   height = "100%",
   width = "100%",
 }: ModelViewerProps) => {
-  const { scene } = useGLTF(fileUrl);
+  // Очищаем кеш при размонтировании
+  useEffect(() => {
+    return () => {
+      useGLTF.clear(fileUrl);
+      console.log("🧹 ThreeView: Очистка кеша модели", { fileUrl });
+    };
+  }, [fileUrl]);
 
   return (
-    <Canvas style={{ height: height, width: width }}>
-      <ambientLight />
-      <directionalLight />
-      <Stage environment="city" intensity={0.6}>
-        <primitive object={scene} />
-      </Stage>
-      <OrbitControls />
-    </Canvas>
+    <Box sx={{ position: "relative", width, height }}>
+      <Suspense fallback={<LoadingFallback />}>
+        <Canvas
+          style={{ height: height, width: width }}
+          camera={{
+            position: [1, 1, 1],
+            fov: 30,
+          }}
+        >
+          <ambientLight />
+          <directionalLight />
+          <Stage environment="city" intensity={0.6} adjustCamera={false}>
+            <Model fileUrl={fileUrl} />
+          </Stage>
+          <OrbitControls />
+        </Canvas>
+      </Suspense>
+    </Box>
   );
 };