1

index.html

@@ -275,33 +275,40 @@
             letter-spacing: 2px;
         }
 
-        /* 进度条样式 */
+        /* 加载遮罩样式 */
         #progress-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 80%;
-            max-width: 500px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            padding: 10px;
-            z-index: 1000;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.7);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
         }
 
-        #progress-bar {
-            width: 0%;
-            height: 10px;
-            background: linear-gradient(90deg, #4CAF50, #45a049);
-            border-radius: 5px;
-            transition: width 0.1s ease;
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-top-color: #4CAF50;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
         }
 
-        #progress-text {
-            color: white;
-            text-align: center;
-            margin-top: 5px;
-            font-size: 14px;
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        .loading-text {
+            color: #fff;
+            font-size: 16px;
+            margin-top: 20px;
         }
     </style>
 </head>
@@ -312,8 +319,8 @@
         <div id="canvas-container">
             <canvas id="renderDom"></canvas>
             <div id="progress-container" style="display: none;">
-                <div id="progress-bar"></div>
-                <div id="progress-text">0%</div>
+                <div class="spinner"></div>
+                <div class="loading-text">加载中...</div>
             </div>
 
             <!-- 生成放置区域按钮 -->
@@ -892,6 +899,7 @@
 
         // 移除按钮事件
         document.getElementById('remove-model-btn').addEventListener('click', () => {
+            
             const pickedMesh = window.getCurrentPickedMesh();
             if (pickedMesh) {
                 const meshName = pickedMesh.name;
@@ -916,9 +924,25 @@
 
         // 监听放置区域点击事件
         kernel.on('dropzone:click', async (dropzone_data) => {
+            // 显示进度条
+            const progressContainer = document.getElementById('progress-container');
+            if (progressContainer) {
+                progressContainer.style.display = 'flex';
+            }
+
             getEvent(dropzone_data, sku)
         });
 
+        // 监听模型加载完成事件
+        kernel.on('model:loaded', (data) => {
+            console.log('模型加载完成', data);
+            // 隐藏进度条
+            const progressContainer = document.getElementById('progress-container');
+            if (progressContainer) {
+                progressContainer.style.display = 'none';
+            }
+        });
+
 
         // 存储当前选中的材质名和网格
         let currentMaterialName = '';
@@ -994,6 +1018,8 @@
 
         // 暴露 kernel 到全局，方便调试
 
+        kernel.on('model:loaded', (event) => {
+        });
 
         kernel.on('hotspot:click', (event) => {
             console.log('热点被点击:', event);