Add application file

app.py

@@ -13,7 +13,7 @@ import gradio as gr
 with gr.Blocks() as demo:
     gr.Markdown("## 3D Model Viewer")
     model = gr.Model3D(
-        label="3D Model Viewer",
+        label="3D Model Viewer 1",
         # value="https://modelviewer.dev/shared-assets/models/Astronaut.glb",  # 示例模型
         clear_color=(0.9, 0.9, 0.9, 1)  # 先设置亮色背景提升基础亮度
     )
@@ -23,30 +23,35 @@ with gr.Blocks() as demo:
         clear_color=(0.1, 0.1, 0.1, 1)  # 先设置亮色背景提升基础亮度
     )
     
-    # demo.load(
-    #     js="""
-    #     () => {
-    #         // 等待组件加载完成（避免选择器找不到元素）
-    #         const observer = new MutationObserver(() => {
-    #             const viewer = document.querySelector('[data-testid="model3d-component"] .model-viewer');
-    #             if (viewer) {
-    #                 const scene = viewer.modelView.scene;
-    #                 observer.disconnect();  // 找到后停止观察
+    demo.load(
+        js="""
+        () => {
+            // 定义光照函数（仅作用于单个 viewer)
+            function addLightingToViewer(viewer) {
+                const scene = viewer.modelView.scene;
                 
-    #                 // 添加环境光（白色，强度 1.5)
-    #                 const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
-    #                 scene.add(ambientLight);
-                    
-    #                 // 添加方向光（从右上方照射，模拟自然光）
-    #                 const directionalLight = new THREE.DirectionalLight(0xffffff, 1.8);
-    #                 directionalLight.position.set(8, 10, 5);  // 调整光源位置
-    #                 scene.add(directionalLight);
-    #             }
-    #         });
-    #         observer.observe(document.body, { childList: true, subtree: true });
-    #     }
-    #     """
-    # )
+                // 添加环境光（白色，强度 3)
+                const ambientLight = new THREE.AmbientLight(0xffffff, 3);
+                scene.add(ambientLight);
+                
+                // 添加方向光（从右上方照射）
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 1.8);
+                directionalLight.position.set(8, 10, 5);
+                scene.add(directionalLight);
+            }
+
+            // 等待第一个组件加载完成（通过 label 定位）
+            const observer = new MutationObserver(() => {
+                const targetViewer = document.querySelector('[aria-label="3D Model Viewer 1"] .model-viewer');
+                if (targetViewer) {
+                    observer.disconnect(); // 找到后停止监听
+                    addLightingToViewer(targetViewer); // 仅处理第一个组件
+                }
+            });
+            observer.observe(document.body, { childList: true, subtree: true });
+        }
+        """
+    )
 
 
 if __name__ == "__main__":