Spaces:

myhzht
/

Navigator

Running

App Files Files Community

Navigator / index.html

myhzht

Upload 2 files

57399bc verified 5 months ago

raw

history blame contribute delete

19.8 kB

	<!DOCTYPE html>
	<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/three@0.132.2/build/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/PLYLoader.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/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/three@0.132.2/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>