fix img dark

frontend/src/components/ModelViewer.jsx

@@ -7,6 +7,42 @@ import { Spin } from 'antd';
 import JSZip from 'jszip';
 import * as THREE from 'three';
 
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("3D Model Viewer Error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'center', 
+          height: '100%', 
+          color: '#888',
+          padding: 20,
+          textAlign: 'center',
+          fontSize: '14px'
+        }}>
+          3D 模型加载失败
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
 const Model = ({ objPath, mtlPath, scale = 1 }) => {
   // If mtlPath is provided, load materials first
   const materials = mtlPath ? useLoader(MTLLoader, mtlPath) : null;
@@ -158,21 +194,23 @@ 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={paths.obj} mtlPath={paths.mtl} 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>
+      <ErrorBoundary>
+        <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={paths.obj} mtlPath={paths.mtl} 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>
+      </ErrorBoundary>
     </div>
   );
 };