Update index.html

index.html

@@ -256,7 +256,9 @@
             positionCamera();
             isRotating = true;
             document.getElementById('rotate-toggle').textContent = 'Pause Rotation';
-            if (!animationId) animate();
+            if (!animationId) {
+                animate();
+            }
         }
         
         function positionCamera() {
@@ -293,20 +295,15 @@
             clearScene();
             loadingDiv.style.display = 'block';
 
-            // --- CACHE CHECK ---
             if (modelCache.has(example.name)) {
                 loadingText.textContent = 'Loading from cache...';
                 progressContainer.style.display = 'none';
-                
                 const cachedMeshes = modelCache.get(example.name);
-                cachedMeshes.forEach(mesh => scene.add(mesh.clone())); // Clone to avoid issues
-                
-                // Use a short timeout to let the "Loading from cache..." message be visible
+                cachedMeshes.forEach(mesh => scene.add(mesh.clone()));
                 setTimeout(onLoadingComplete, 50);
                 return;
             }
 
-            // --- DOWNLOAD & PROCESS (CACHE MISS) ---
             progressContainer.style.display = 'block';
             progressBar.style.width = '0%';
             loadingText.textContent = 'Calculating size...';
@@ -316,40 +313,27 @@
             let progressAnimationId = null;
             
             try {
-                // Step 1: Get total size
                 const headPromises = example.files.map(url => fetch(url, { method: 'HEAD' }));
                 const responses = await Promise.all(headPromises);
-                totalSize = responses.reduce((acc, res) => {
-                    if (!res.ok) throw new Error(`Failed to get headers for ${res.url}`);
-                    return acc + Number(res.headers.get('Content-Length') || 0);
-                }, 0);
+                totalSize = responses.reduce((acc, res) => acc + Number(res.headers.get('Content-Length') || 0), 0);
                 
-                // Step 2: Animate progress bar smoothly
                 const updateProgressUI = () => {
+                    const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0;
+                    progressBar.style.width = `${percent}%`;
+                    loadingText.textContent = `Downloading... ${Math.round(percent)}%`;
                     if (loadedSize < totalSize) {
-                        const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0;
-                        progressBar.style.width = `${percent}%`;
-                        loadingText.textContent = `Downloading... ${Math.round(percent)}%`;
                         progressAnimationId = requestAnimationFrame(updateProgressUI);
-                    } else {
-                         progressBar.style.width = `100%`;
-                         loadingText.textContent = `Processing files...`;
                     }
                 };
                 progressAnimationId = requestAnimationFrame(updateProgressUI);
 
-                // Step 3: Fetch files and update progress
-                const onProgress = (chunkSize) => {
-                    loadedSize += chunkSize;
-                };
-
+                const onProgress = (chunkSize) => { loadedSize += chunkSize; };
                 const contentPromises = example.files.map(url => fetchWithProgress(url, onProgress));
                 const buffers = await Promise.all(contentPromises);
                 
-                // Stop the progress animation loop
                 cancelAnimationFrame(progressAnimationId);
+                loadingText.textContent = `Processing files...`;
 
-                // Step 4: Process and cache downloaded files
                 const newMeshes = [];
                 buffers.forEach(buffer => {
                     const geometry = plyLoader.parse(buffer);
@@ -361,7 +345,7 @@
                     newMeshes.push(mesh);
                 });
 
-                modelCache.set(example.name, newMeshes); // Store in cache
+                modelCache.set(example.name, newMeshes);
                 onLoadingComplete();
 
             } catch (error) {
@@ -372,7 +356,6 @@
             }
         }
 
-        // Load custom files from user's computer
         document.getElementById('file-input').addEventListener('change', function(e) {
             const files = e.target.files;
             if (files.length === 0) return;
@@ -391,7 +374,6 @@
                         if (file.name.endsWith('.ply')) {
                             geometry = plyLoader.parse(buffer);
                         } else if (file.name.endsWith('.drc')) {
-                            dracoLoader.setDecoderConfig({ type: 'js' });
                             dracoLoader.parse(buffer, (decodedGeometry) => {
                                 geometry = decodedGeometry;
                                 if (!geometry.attributes.normal) geometry.computeVertexNormals();
@@ -432,7 +414,13 @@
             if (!animationId) animate();
         });
         document.addEventListener('keydown', (event) => {
-            if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = true;
+            if (event.key.toLowerCase() in keys) {
+                keys[event.key.toLowerCase()] = true;
+                // BUG FIX: Ensure the animation loop is running when a key is pressed.
+                if (!animationId) {
+                    animate();
+                }
+            }
         });
         document.addEventListener('keyup', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = false;
@@ -462,7 +450,7 @@
 
         // --- ANIMATION LOOP ---
         function animate() {
-            animationId = requestAnimationFrame(animate);
+            // Process movement
             if (keys.w || keys.a || keys.s || keys.d) {
                 const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
                 const right = new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion);
@@ -479,9 +467,18 @@
                 }
             }
             if (camera.position.length() > maxDistance) camera.position.setLength(maxDistance);
+            
+            // Process rotation
             if (isRotating && scene.children.some(c => c instanceof THREE.Mesh)) scene.rotation.y += 0.0005;
+            
+            // Render the scene
             renderer.render(scene, camera);
+            
+            // BUG FIX: Request the next frame at the *end* of the function for robustness.
+            animationId = requestAnimationFrame(animate);
         }
+        
+        // Start the initial animation loop
         animate();
     </script>
 </body>