Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Hunyuan World Navigator</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: Arial, sans-serif; | |
| background: #1a1a1a; | |
| color: white; | |
| text-align: center; | |
| } | |
| #header { | |
| padding: 20px; | |
| background: #282828; | |
| border-bottom: 1px solid #444; | |
| } | |
| #header h1 { | |
| margin: 0 0 10px 0; | |
| font-size: 2em; | |
| } | |
| #header p { | |
| margin: 0 0 20px 0; | |
| color: #ccc; | |
| } | |
| #header a { | |
| color: #61dafb; | |
| text-decoration: none; | |
| } | |
| #header a:hover { | |
| text-decoration: underline; | |
| } | |
| #examples-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| padding: 20px; | |
| gap: 20px; | |
| background: #222; | |
| } | |
| .example-card { | |
| background: #333; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| width: 200px; | |
| cursor: pointer; | |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |
| } | |
| .example-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 16px rgba(0,0,0,0.3); | |
| } | |
| .example-card img { | |
| width: 100%; | |
| height: 120px; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .example-card p { | |
| margin: 0; | |
| padding: 15px; | |
| font-weight: bold; | |
| } | |
| #viewer-container { | |
| position: relative; | |
| width: 100%; | |
| height: 65vh; | |
| } | |
| canvas { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #upload-container { | |
| margin-top: 15px; | |
| } | |
| #file-input { | |
| display: none; | |
| } | |
| .upload-btn { | |
| background: #4CAF50; | |
| color: white; | |
| padding: 10px 15px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| .upload-btn:hover { | |
| background: #45a049; | |
| } | |
| #loading { | |
| 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; | |
| /* Smoother transition for the bar */ | |
| transition: width 0.2s ease-out; | |
| } | |
| #controls { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| z-index: 10; | |
| } | |
| .control-btn { | |
| padding: 8px 12px; | |
| margin-right: 5px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| background: rgba(85, 85, 85, 0.8); | |
| color: white; | |
| } | |
| .control-btn:hover { | |
| background: rgba(102, 102, 102, 0.9); | |
| } | |
| #instructions { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| color: white; | |
| background: rgba(0,0,0,0.5); | |
| padding: 10px; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <h1>Hunyuan World Navigator</h1> | |
| <p> | |
| <a href="https://huggingface.co/tencent/HunyuanWorld-1" target="_blank" rel="noopener noreferrer">HunyuanWorld-1 on Hugging Face</a> | | |
| <a href="https://github.com/camenduru/HunyuanWorld-1.0-jupyter" target="_blank" rel="noopener noreferrer">Generate your own on Google Colab</a> | |
| </p> | |
| <p>Click an example below or upload your own files to begin.</p> | |
| <div id="upload-container"> | |
| <label for="file-input" class="upload-btn">Select Custom PLY/DRC Files</label> | |
| <input id="file-input" type="file" accept=".ply,.drc" multiple> | |
| </div> | |
| </div> | |
| <div id="examples-container"></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"> | |
| <button id="rotate-toggle" class="control-btn">Pause Rotation</button> | |
| <button id="reset-view" class="control-btn">Reset View</button> | |
| </div> | |
| <div id="instructions"> | |
| Controls: WASD to move, Mouse drag to look around | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/PLYLoader.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/DRACOLoader.js"></script> | |
| <script> | |
| // --- CACHE & DATA --- | |
| const modelCache = new Map(); | |
| const baseURL = 'https://huggingface.co/datasets/multimodalart/HunyuanWorld-panoramas/resolve/main/'; | |
| const examplesData = [ | |
| { name: 'Cyberpunk City', 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: 'Restaurant', 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: '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'] } | |
| ]; | |
| const examples = examplesData.map(ex => ({ | |
| name: ex.name, | |
| previewImage: baseURL + ex.previewImage, | |
| files: ex.files.map(file => baseURL + file) | |
| })); | |
| // --- 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.addEventListener('click', () => loadExample(example)); | |
| examplesContainer.appendChild(card); | |
| }); | |
| // --- THREE.JS INITIALIZATION --- | |
| const viewerContainer = document.getElementById('viewer-container'); | |
| const scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x222222); | |
| const camera = new THREE.PerspectiveCamera(75, viewerContainer.clientWidth / viewerContainer.clientHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(viewerContainer.clientWidth, viewerContainer.clientHeight); | |
| viewerContainer.appendChild(renderer.domElement); | |
| // --- LOADERS --- | |
| const plyLoader = new THREE.PLYLoader(); | |
| const dracoLoader = new THREE.DRACOLoader(); | |
| dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco/'); | |
| // --- MOVEMENT & CONTROL VARIABLES --- | |
| const moveSpeed = 0.01; | |
| const maxDistance = 0.3; | |
| const keys = { w: false, a: false, s: false, d: false }; | |
| let isMouseDown = false; | |
| let previousMousePosition = { x: 0, y: 0 }; | |
| let isRotating = false; | |
| let animationId = null; | |
| // --- SCENE HELPER FUNCTIONS --- | |
| function clearScene() { | |
| scene.children.slice().forEach(child => { | |
| if (child instanceof THREE.Mesh) { | |
| if (child.geometry) child.geometry.dispose(); | |
| if (child.material) child.material.dispose(); | |
| scene.remove(child); | |
| } | |
| }); | |
| } | |
| function onLoadingComplete() { | |
| loadingDiv.style.display = 'none'; | |
| positionCamera(); | |
| isRotating = true; | |
| document.getElementById('rotate-toggle').textContent = 'Pause Rotation'; | |
| if (!animationId) { | |
| animate(); | |
| } | |
| } | |
| function positionCamera() { | |
| scene.rotation.y = 0; | |
| camera.position.set(0, 0, 0); | |
| camera.quaternion.set(0, 0, 0, 1); | |
| camera.lookAt(0, 0, -10); | |
| } | |
| // --- LOADING LOGIC --- | |
| 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 = chunks.reduce((acc, chunk) => acc + chunk.length, 0); | |
| const buffer = new Uint8Array(totalLength); | |
| let offset = 0; | |
| chunks.forEach(chunk => { | |
| buffer.set(chunk, offset); | |
| offset += chunk.length; | |
| }); | |
| return buffer.buffer; | |
| } | |
| async function loadExample(example) { | |
| clearScene(); | |
| loadingDiv.style.display = 'block'; | |
| 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())); | |
| setTimeout(onLoadingComplete, 50); | |
| return; | |
| } | |
| progressContainer.style.display = 'block'; | |
| progressBar.style.width = '0%'; | |
| loadingText.textContent = 'Calculating size...'; | |
| let loadedSize = 0; | |
| let totalSize = 0; | |
| let progressAnimationId = null; | |
| try { | |
| const headPromises = example.files.map(url => fetch(url, { method: 'HEAD' })); | |
| const responses = await Promise.all(headPromises); | |
| totalSize = responses.reduce((acc, res) => acc + Number(res.headers.get('Content-Length') || 0), 0); | |
| const updateProgressUI = () => { | |
| const percent = totalSize > 0 ? (loadedSize / totalSize) * 100 : 0; | |
| progressBar.style.width = `${percent}%`; | |
| loadingText.textContent = `Downloading... ${Math.round(percent)}%`; | |
| if (loadedSize < totalSize) { | |
| progressAnimationId = requestAnimationFrame(updateProgressUI); | |
| } | |
| }; | |
| progressAnimationId = requestAnimationFrame(updateProgressUI); | |
| const onProgress = (chunkSize) => { loadedSize += chunkSize; }; | |
| const contentPromises = example.files.map(url => fetchWithProgress(url, onProgress)); | |
| const buffers = await Promise.all(contentPromises); | |
| cancelAnimationFrame(progressAnimationId); | |
| loadingText.textContent = `Processing files...`; | |
| const newMeshes = []; | |
| 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); | |
| newMeshes.push(mesh); | |
| }); | |
| modelCache.set(example.name, newMeshes); | |
| onLoadingComplete(); | |
| } catch (error) { | |
| console.error('Error loading example:', error); | |
| alert('Failed to load example files. Check console for details.'); | |
| if (progressAnimationId) cancelAnimationFrame(progressAnimationId); | |
| loadingDiv.style.display = 'none'; | |
| } | |
| } | |
| document.getElementById('file-input').addEventListener('change', function(e) { | |
| const files = e.target.files; | |
| if (files.length === 0) return; | |
| loadingDiv.style.display = 'block'; | |
| loadingText.textContent = 'Loading...'; | |
| progressContainer.style.display = 'none'; | |
| clearScene(); | |
| let loadedCount = 0; | |
| const totalFiles = files.length; | |
| Array.from(files).forEach(file => { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| try { | |
| const buffer = event.target.result; | |
| let geometry; | |
| if (file.name.endsWith('.ply')) { | |
| geometry = plyLoader.parse(buffer); | |
| } else if (file.name.endsWith('.drc')) { | |
| dracoLoader.parse(buffer, (decodedGeometry) => { | |
| geometry = decodedGeometry; | |
| if (!geometry.attributes.normal) geometry.computeVertexNormals(); | |
| 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); | |
| loadedCount++; | |
| if (loadedCount === totalFiles) onLoadingComplete(); | |
| }); | |
| return; | |
| } | |
| if (geometry) { | |
| 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); | |
| } | |
| } catch (error) { | |
| console.error('Error loading file:', file.name, error); | |
| } | |
| loadedCount++; | |
| if (loadedCount === totalFiles) onLoadingComplete(); | |
| }; | |
| reader.readAsArrayBuffer(file); | |
| }); | |
| }); | |
| // --- CONTROLS & EVENT LISTENERS --- | |
| document.getElementById('rotate-toggle').addEventListener('click', function() { | |
| isRotating = !isRotating; | |
| this.textContent = isRotating ? 'Pause Rotation' : 'Start Rotation'; | |
| }); | |
| 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; | |
| // 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; | |
| }); | |
| 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 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(); | |
| renderer.setSize(viewerContainer.clientWidth, viewerContainer.clientHeight); | |
| }); | |
| // --- ANIMATION LOOP --- | |
| function 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); | |
| 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); | |
| } | |
| } | |
| 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> | |
| </html> |