fix: 3D Show

frontend/src/components/ModelViewer.jsx

@@ -0,0 +1,70 @@
+import React, { Suspense } from 'react';
+import { Canvas, useLoader } from '@react-three/fiber';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
+import { OrbitControls, Stage, useProgress, Environment, ContactShadows } from '@react-three/drei';
+import { Spin } from 'antd';
+
+const Model = ({ objPath, mtlPath, scale = 1 }) => {
+  const materials = useLoader(MTLLoader, mtlPath);
+  
+  const obj = useLoader(OBJLoader, objPath, (loader) => {
+    materials.preload();
+    loader.setMaterials(materials);
+  });
+
+  const clone = obj.clone();
+  return <primitive object={clone} scale={scale} />;
+};
+
+const LoadingOverlay = () => {
+  const { progress, active } = useProgress();
+  if (!active) return null;
+  
+  return (
+    <div style={{ 
+      position: 'absolute', 
+      top: 0, 
+      left: 0, 
+      width: '100%', 
+      height: '100%', 
+      display: 'flex', 
+      alignItems: 'center', 
+      justifyContent: 'center',
+      background: 'rgba(0,0,0,0.5)',
+      zIndex: 10,
+      pointerEvents: 'none'
+    }}>
+      <div style={{ textAlign: 'center' }}>
+        <Spin size="large" />
+        <div style={{ color: '#00b96b', marginTop: 10, fontWeight: 'bold' }}>
+          {progress.toFixed(0)}% Loading
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ModelViewer = ({ objPath, mtlPath, scale = 1, autoRotate = true }) => {
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <LoadingOverlay />
+      <Canvas shadows dpr={[1, 2]} camera={{ fov: 45, position: [0, 0, 5] }} style={{ height: '100%', width: '100%' }}>
+        <ambientLight intensity={0.7} />
+        <pointLight position={[10, 10, 10]} intensity={1} />
+        <spotLight position={[-10, 10, 10]} angle={0.15} penumbra={1} intensity={1} />
+        
+        <Suspense fallback={null}>
+          <Stage environment="city" intensity={0.6} adjustCamera={true}>
+            <Model objPath={objPath} mtlPath={mtlPath} scale={scale} />
+          </Stage>
+          <Environment preset="city" />
+          <ContactShadows position={[0, -0.8, 0]} opacity={0.4} scale={10} blur={2} far={0.8} />
+        </Suspense>
+        <OrbitControls autoRotate={autoRotate} makeDefault />
+      </Canvas>
+    </div>
+  );
+};
+
+export default ModelViewer;