进度条颜色

src/App.jsx

@@ -13,11 +13,12 @@ function readParams() {
   let zoomMin = Math.min(minZoom, maxZoom)
   const zoomMax = Math.max(minZoom, maxZoom)
   zoomMin = Math.max(1, zoomMin)
-  return { src, zoomMin, zoomMax }
+  const progressColor = params.get('progressColor')
+  return { src, zoomMin, zoomMax, progressColor }
 }
 
 export default function App() {
-  const { src, zoomMin, zoomMax } = useMemo(readParams, [])
+  const { src, zoomMin, zoomMax, progressColor } = useMemo(readParams, [])
   return (
     <div style={{ width: '100vw', height: '100vh'}}>
       <Canvas
@@ -25,7 +26,7 @@ export default function App() {
         gl={{ antialias: true }}
         style={{ touchAction: 'none' }}
       >
-        <Scene url={src} zoomMin={zoomMin} zoomMax={zoomMax} />
+        <Scene url={src} zoomMin={zoomMin} zoomMax={zoomMax} progressColor={progressColor} />
       </Canvas>
     </div>
   )

src/scene.jsx

@@ -82,20 +82,20 @@ function useFetchLoader(url) {
   return state;
 }
 
-function Loader({ customState }) {
+function Loader({ customState, color }) {
   // 只负责显示手动下载的进度
   // 如果没有在下载，直接返回 null
   if (!customState || !customState.loading) return null;
 
-  return <LoaderUI progress={customState.progress} loaded={customState.loaded} total={customState.total} status="downloading" />;
+  return <LoaderUI progress={customState.progress} loaded={customState.loaded} total={customState.total} status="downloading" color={color} />;
 }
 
 // 专门用于 Suspense fallback 的解析状态提示
-function ParsingLoader() {
-  return <LoaderUI progress={100} loaded={0} total={0} status="parsing" />;
+function ParsingLoader({ color }) {
+  return <LoaderUI progress={100} loaded={0} total={0} status="parsing" color={color} />;
 }
 
-function LoaderUI({ progress, loaded, total, status }) {
+function LoaderUI({ progress, loaded, total, status, color }) {
   // 判断是否无法计算总大小
   const isIndeterminate = status === "downloading" && total === 0 && loaded > 0;
 
@@ -116,7 +116,7 @@ function LoaderUI({ progress, loaded, total, status }) {
           style={{
             width: isIndeterminate ? "100%" : `${progress}%`,
             height: "100%",
-            background: "#4C7F7A", // 已加载进度颜色是 #4C7F7A
+            background: color || "#4C7F7A", // 已加载进度颜色
             transition: isIndeterminate ? "none" : "width 0.2s ease-out",
             position: "absolute",
             left: 0,
@@ -369,9 +369,6 @@ function SceneContent({ url, zoomMin, zoomMax, fileType }) {
     isInteracting: false, // 用户是否正在交互
   });
 
-  // 全局背景颜色 (默认 null，表示透明)
-  const [bgColor, setBgColor] = useState(null);
-
   // isReady: 标记是否完成初始飞入动画，完成后才解锁交互
   // 修改：默认 false，既控制交互也控制场景的可见性（避免跳变被用户看到）
   const [isReady, setIsReady] = useState(false);
@@ -529,10 +526,6 @@ function SceneContent({ url, zoomMin, zoomMax, fileType }) {
   // 暴露全局 API 给外部使用 (window.sceneFc)
   useEffect(() => {
     window.sceneFc = {
-      setBackgroundColor: (color) => {
-        console.log("设置背景颜色:", color);
-        setBgColor(color);
-      },
       resetView: () => {
         // 手动重置时，如果当前正在自动旋转，是否应该关闭自动旋转？
         // 通常手动重置意味着用户想回到初始状态，可能希望停止自动旋转。
@@ -664,7 +657,6 @@ function SceneContent({ url, zoomMin, zoomMax, fileType }) {
 
   return (
     <>
-      {bgColor && <color attach="background" args={[bgColor]} />}
       {/* Bounds: 自动计算模型包围盒并调整相机视角 */}
       {/* 不渲染任何 UI，仅负责逻辑检测 */}
       {/* 
@@ -689,7 +681,7 @@ function SceneContent({ url, zoomMin, zoomMax, fileType }) {
   );
 }
 
-export default function Scene({ url, zoomMin, zoomMax }) {
+export default function Scene({ url, zoomMin, zoomMax, progressColor }) {
   // 使用自定义 Hook 加载文件
   const fetchState = useFetchLoader(url);
 
@@ -709,11 +701,11 @@ export default function Scene({ url, zoomMin, zoomMax }) {
       {url ? (
         <>
           {fetchState.blobUrl && (
-            <Suspense fallback={<ParsingLoader />}>
+            <Suspense fallback={<ParsingLoader color={progressColor} />}>
               <SceneContent url={fetchState.blobUrl} zoomMin={zoomMin} zoomMax={zoomMax} fileType={fileType} />
             </Suspense>
           )}
-          <Loader customState={fetchState} />
+          <Loader customState={fetchState} color={progressColor} />
         </>
       ) : (
         <Html center style={{ width: "200px", color: "#222", fontSize: 14 }}>