Update index.html

index.html

@@ -65,7 +65,7 @@
         #viewer-container {
             position: relative;
             width: 100%;
-            height: 65vh; /* Adjusted height for the viewer */
+            height: 65vh;
         }
         canvas { 
             display: block; 
@@ -91,10 +91,28 @@
             background: #45a049;
         }
         #loading {
-            display: none;
-            margin-top: 10px;
+            display: none; /* Hidden by default */
+            padding: 15px;
+        }
+        #loading-text {
             color: #aaa;
             font-size: 18px;
+            margin-bottom: 10px;
+        }
+        #progress-container {
+            width: 80%;
+            max-width: 400px;
+            margin: 0 auto;
+            background-color: #555;
+            border-radius: 5px;
+            overflow: hidden;
+            display: none; /* Hidden by default, shown for web loads */
+        }
+        #progress-bar {
+            width: 0%;
+            height: 20px;
+            background-color: #4CAF50;
+            transition: width 0.1s linear;
         }
         #controls {
             position: absolute;
@@ -141,11 +159,14 @@
         </div>
     </div>
     
-    <div id="examples-container">
-        <!-- Examples will be dynamically inserted here -->
-    </div>
+    <div id="examples-container"></div>
     
-    <div id="loading">Loading...</div>
+    <div id="loading">
+        <div id="loading-text">Loading...</div>
+        <div id="progress-container">
+            <div id="progress-bar"></div>
+        </div>
+    </div>
 
     <div id="viewer-container">
         <div id="controls">
@@ -155,7 +176,6 @@
         <div id="instructions">
             Controls: WASD to move, Mouse drag to look around
         </div>
-        <!-- Canvas will be appended here by Three.js -->
     </div>
 
 
@@ -165,32 +185,32 @@
     <script>
         // --- DATA FOR EXAMPLES ---
         const baseURL = 'https://huggingface.co/datasets/multimodalart/HunyuanWorld-panoramas/resolve/main/';
-
         const examplesData = [
             { name: 'Cyberpunk', previewImage: 'cyberpunk/cyberpunk.webp', files: ['cyberpunk/mesh_layer0.ply', 'cyberpunk/mesh_layer1.ply'] },
             { name: 'European Town', previewImage: 'european/european.webp', files: ['european/mesh_layer0.ply', 'european/mesh_layer1.ply'] },
             { name: 'Italian Village', previewImage: 'italian/italian.webp', files: ['italian/mesh_layer0.ply', 'italian/mesh_layer1.ply', 'italian/mesh_layer2.ply', 'italian/mesh_layer3.ply'] },
             { name: 'Mountain', previewImage: 'mountain/mountain.webp', files: ['mountain/mesh_layer0.ply', 'mountain/mesh_layer1.ply'] },
-            { name: 'WXP', previewImage: 'wxp/wxp.webp', files: ['wxp/mesh_layer0.ply', 'wxp/mesh_layer1.ply', 'wxp/mesh_layer2.ply'] },
-            { name: 'ZLD', previewImage: 'zld/zld.webp', files: ['zld/mesh_layer0.ply', 'zld/mesh_layer1.ply'] }
+            { name: 'Windows XP', previewImage: 'wxp/wxp.webp', files: ['wxp/mesh_layer0.ply', 'wxp/mesh_layer1.ply', 'wxp/mesh_layer2.ply'] },
+            { name: 'Zelda', previewImage: 'zld/zld.webp', files: ['zld/mesh_layer0.ply', 'zld/mesh_layer1.ply'] }
         ];
-        
-        // Prepend the base URL to all example file paths
         const examples = examplesData.map(ex => ({
             name: ex.name,
             previewImage: baseURL + ex.previewImage,
             files: ex.files.map(file => baseURL + file)
         }));
 
-        // --- UI SETUP ---
+        // --- UI & DOM ELEMENTS ---
         const examplesContainer = document.getElementById('examples-container');
+        const loadingDiv = document.getElementById('loading');
+        const loadingText = document.getElementById('loading-text');
+        const progressContainer = document.getElementById('progress-container');
+        const progressBar = document.getElementById('progress-bar');
+        
+        // --- UI SETUP ---
         examples.forEach(example => {
             const card = document.createElement('div');
             card.className = 'example-card';
-            card.innerHTML = `
-                <img src="${example.previewImage}" alt="${example.name}">
-                <p>${example.name}</p>
-            `;
+            card.innerHTML = `<img src="${example.previewImage}" alt="${example.name}"><p>${example.name}</p>`;
             card.addEventListener('click', () => loadExample(example));
             examplesContainer.appendChild(card);
         });
@@ -215,7 +235,7 @@
         const keys = { w: false, a: false, s: false, d: false };
         let isMouseDown = false;
         let previousMousePosition = { x: 0, y: 0 };
-        let isRotating = false; // Start paused
+        let isRotating = false;
         let animationId = null;
 
         // --- SCENE HELPER FUNCTIONS ---
@@ -230,56 +250,104 @@
         }
 
         function onLoadingComplete() {
-            document.getElementById('loading').style.display = 'none';
+            loadingDiv.style.display = 'none';
             positionCamera();
             isRotating = true;
             document.getElementById('rotate-toggle').textContent = 'Pause Rotation';
-            if (!animationId) {
-                animate();
-            }
+            if (!animationId) animate();
         }
         
         function positionCamera() {
             scene.rotation.y = 0;
             camera.position.set(0, 0, 0);
-            camera.quaternion.set(0, 0, 0, 1); // Reset camera rotation
+            camera.quaternion.set(0, 0, 0, 1);
             camera.lookAt(0, 0, -10);
         }
 
         // --- LOADING LOGIC ---
 
-        // Load pre-defined examples from server
-        function loadExample(example) {
-            document.getElementById('loading').style.display = 'block';
+        /**
+         * Fetches a file and reports progress via a callback.
+         * @param {string} url - The URL of the file to fetch.
+         * @param {function(number)} onProgress - Callback function that receives the size of each downloaded chunk.
+         * @returns {Promise<ArrayBuffer>} - A promise that resolves with the file's ArrayBuffer.
+         */
+        async function fetchWithProgress(url, onProgress) {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status} for ${url}`);
+            if (!response.body) throw new Error('Response body is null');
+
+            const reader = response.body.getReader();
+            const chunks = [];
+            
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                chunks.push(value);
+                onProgress(value.length);
+            }
+            
+            let totalLength = 0;
+            chunks.forEach(chunk => totalLength += chunk.length);
+            const buffer = new Uint8Array(totalLength);
+            let offset = 0;
+            chunks.forEach(chunk => {
+                buffer.set(chunk, offset);
+                offset += chunk.length;
+            });
+
+            return buffer.buffer;
+        }
+
+        // Load pre-defined examples from server with progress
+        async function loadExample(example) {
+            loadingDiv.style.display = 'block';
+            progressContainer.style.display = 'block';
+            progressBar.style.width = '0%';
+            loadingText.textContent = 'Calculating size...';
             clearScene();
 
-            const promises = example.files.map(url => 
-                fetch(url).then(res => {
-                    if (!res.ok) throw new Error(`Failed to fetch ${url}`);
-                    return res.arrayBuffer();
-                })
-            );
+            try {
+                // Step 1: Get total size of all files
+                const headPromises = example.files.map(url => fetch(url, { method: 'HEAD' }));
+                const responses = await Promise.all(headPromises);
+                const 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);
+                
+                let loadedSize = 0;
+                loadingText.textContent = 'Loading... 0%';
+
+                // Step 2: Fetch files with progress tracking
+                const onProgress = (chunkSize) => {
+                    loadedSize += chunkSize;
+                    const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0;
+                    progressBar.style.width = `${percent}%`;
+                    loadingText.textContent = `Loading... ${Math.round(percent)}%`;
+                };
+
+                const contentPromises = example.files.map(url => fetchWithProgress(url, onProgress));
+                const buffers = await Promise.all(contentPromises);
 
-            Promise.all(promises)
-                .then(buffers => {
-                    buffers.forEach(buffer => {
-                        const geometry = plyLoader.parse(buffer);
-                        const material = new THREE.MeshBasicMaterial({
-                            side: THREE.DoubleSide,
-                            vertexColors: true,
-                        });
-                        const mesh = new THREE.Mesh(geometry, material);
-                        mesh.rotateX(-Math.PI / 2);
-                        mesh.rotateZ(-Math.PI / 2);
-                        scene.add(mesh);
-                    });
-                    onLoadingComplete();
-                })
-                .catch(error => {
-                    console.error('Error loading example:', error);
-                    alert('Failed to load example files. Check console for details.');
-                    document.getElementById('loading').style.display = 'none';
+                // Step 3: Process downloaded files
+                loadingText.textContent = 'Processing files...';
+                buffers.forEach(buffer => {
+                    const geometry = plyLoader.parse(buffer);
+                    const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
+                    const mesh = new THREE.Mesh(geometry, material);
+                    mesh.rotateX(-Math.PI / 2);
+                    mesh.rotateZ(-Math.PI / 2);
+                    scene.add(mesh);
                 });
+
+                onLoadingComplete();
+
+            } catch (error) {
+                console.error('Error loading example:', error);
+                alert('Failed to load example files. Check console for details.');
+                loadingDiv.style.display = 'none';
+            }
         }
 
         // Load custom files from user's computer
@@ -287,7 +355,9 @@
             const files = e.target.files;
             if (files.length === 0) return;
             
-            document.getElementById('loading').style.display = 'block';
+            loadingDiv.style.display = 'block';
+            loadingText.textContent = 'Loading...';
+            progressContainer.style.display = 'none'; // Hide progress bar for local files
             clearScene();
             
             let loadedCount = 0;
@@ -297,14 +367,14 @@
                 const reader = new FileReader();
                 reader.onload = function(event) {
                     try {
+                        const buffer = event.target.result;
                         let geometry;
                         if (file.name.endsWith('.ply')) {
-                            geometry = plyLoader.parse(event.target.result);
+                            geometry = plyLoader.parse(buffer);
                         } else if (file.name.endsWith('.drc')) {
-                            dracoLoader.setDecoderConfig({ type: 'js' }); // Ensure decoder is set
-                            dracoLoader.parse(event.target.result, (decodedGeometry) => {
+                            dracoLoader.setDecoderConfig({ type: 'js' });
+                            dracoLoader.parse(buffer, (decodedGeometry) => {
                                 geometry = decodedGeometry;
-                                // Draco decoding is async, handle mesh creation inside callback
                                 if (!geometry.attributes.normal) geometry.computeVertexNormals();
                                 const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: true });
                                 const mesh = new THREE.Mesh(geometry, material);
@@ -315,7 +385,7 @@
                                 loadedCount++;
                                 if (loadedCount === totalFiles) onLoadingComplete();
                             });
-                            return; // Exit onload as Draco is async
+                            return;
                         }
 
                         if (geometry) {
@@ -340,48 +410,34 @@
             isRotating = !isRotating;
             this.textContent = isRotating ? 'Pause Rotation' : 'Start Rotation';
         });
-        
-        document.getElementById('reset-view').addEventListener('click', function() {
+        document.getElementById('reset-view').addEventListener('click', () => {
             positionCamera();
             if (!animationId) animate();
         });
-
         document.addEventListener('keydown', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = true;
             if (!animationId && Object.values(keys).some(k => k)) animate();
         });
-
         document.addEventListener('keyup', (event) => {
             if (event.key.toLowerCase() in keys) keys[event.key.toLowerCase()] = false;
         });
-
         renderer.domElement.addEventListener('mousedown', (event) => {
             isMouseDown = true;
             previousMousePosition = { x: event.clientX, y: event.clientY };
             event.preventDefault();
         });
-
         document.addEventListener('mouseup', () => { isMouseDown = false; });
-
         document.addEventListener('mousemove', (event) => {
             if (isMouseDown) {
-                const deltaMove = {
-                    x: event.clientX - previousMousePosition.x,
-                    y: event.clientY - previousMousePosition.y
-                };
-                
+                const deltaMove = { x: event.clientX - previousMousePosition.x, y: event.clientY - previousMousePosition.y };
                 const up = new THREE.Vector3(0, 1, 0);
                 const right = new THREE.Vector3(1, 0, 0);
-                
                 camera.rotateOnWorldAxis(up, -deltaMove.x * 0.002);
                 camera.rotateOnAxis(right, -deltaMove.y * 0.002);
-                
                 previousMousePosition = { x: event.clientX, y: event.clientY };
             }
         });
-
         renderer.domElement.addEventListener('contextmenu', (event) => event.preventDefault());
-
         window.addEventListener('resize', function() {
             camera.aspect = viewerContainer.clientWidth / viewerContainer.clientHeight;
             camera.updateProjectionMatrix();
@@ -391,41 +447,26 @@
         // --- ANIMATION LOOP ---
         function animate() {
             animationId = requestAnimationFrame(animate);
-
-            let hasMoved = false;
             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);
-                
                 forward.y = 0; right.y = 0;
                 forward.normalize(); right.normalize();
-                
                 const movement = new THREE.Vector3();
                 if (keys.w) movement.add(forward);
                 if (keys.s) movement.sub(forward);
                 if (keys.a) movement.sub(right);
                 if (keys.d) movement.add(right);
-                
                 if (movement.length() > 0) {
                     movement.normalize().multiplyScalar(moveSpeed);
                     camera.position.add(movement);
-                    hasMoved = true;
                 }
             }
-
-            // Limit movement
-            if (camera.position.length() > maxDistance) {
-                 camera.position.setLength(maxDistance);
-            }
-            
-            if (isRotating && scene.children.some(c => c instanceof THREE.Mesh)) {
-                scene.rotation.y += 0.0005;
-            }
-            
+            if (camera.position.length() > maxDistance) camera.position.setLength(maxDistance);
+            if (isRotating && scene.children.some(c => c instanceof THREE.Mesh)) scene.rotation.y += 0.0005;
             renderer.render(scene, camera);
         }
-        
-        animate(); // Start the animation loop
+        animate();
     </script>
 </body>
 </html>