Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Immersive 3D Gaussian Splat Viewer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { margin: 0; overflow: hidden; background-color: #050505; font-family: 'Inter', sans-serif; } | |
| canvas { display: block; width: 100vw; height: 100vh; outline: none; } | |
| /* Custom Scrollbar for the scene list */ | |
| .scroller::-webkit-scrollbar { height: 6px; } | |
| .scroller::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } | |
| .scroller::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; } | |
| .scroller::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } | |
| /* Glassmorphism utilities */ | |
| .glass { | |
| background: rgba(20, 20, 20, 0.6); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .loading-overlay { | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |
| background: #000; z-index: 50; display: flex; flex-direction: column; | |
| align-items: center; justify-content: center; transition: opacity 0.5s ease; | |
| } | |
| .loader-bar { | |
| width: 200px; height: 2px; background: #333; margin-top: 20px; position: relative; overflow: hidden; | |
| } | |
| .loader-progress { | |
| position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #00d2ff; transition: width 0.2s; | |
| } | |
| </style> | |
| <!-- Import Map for Three.js and Addons --> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="text-white antialiased selection:bg-cyan-500 selection:text-black"> | |
| <!-- Loading Screen --> | |
| <div id="loader" class="loading-overlay"> | |
| <div class="text-2xl font-light tracking-widest uppercase text-cyan-400">Initializing Neural Renderer</div> | |
| <div class="text-xs text-gray-500 mt-2">Loading Gaussian Splats...</div> | |
| <div class="loader-bar"><div id="progress-bar" class="loader-progress"></div></div> | |
| </div> | |
| <!-- Main UI Overlay --> | |
| <div class="absolute inset-0 pointer-events-none flex flex-col justify-between z-10 p-6"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-start pointer-events-auto"> | |
| <div> | |
| <h1 class="text-3xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-600"> | |
| SPLAT<span class="text-white">VIEWER</span> | |
| </h1> | |
| <p class="text-xs text-gray-400 mt-1 max-w-xs"> | |
| Explore photorealistic 3D captures using Gaussian Splatting technology. | |
| <br>Drag to rotate • Scroll to zoom • Right-click to pan. | |
| </p> | |
| </div> | |
| <div class="glass px-4 py-2 rounded-full flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> | |
| <span class="text-xs font-mono text-gray-300">LIVE RENDER</span> | |
| </div> | |
| </header> | |
| <!-- Controls & Info (Right Side) --> | |
| <div class="absolute top-1/2 right-6 transform -translate-y-1/2 flex flex-col gap-3 pointer-events-auto"> | |
| <button id="btn-reset" class="glass w-10 h-10 rounded-full flex items-center justify-center hover:bg-white/10 transition text-cyan-400" title="Reset Camera"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 12"/></svg> | |
| </button> | |
| <button id="btn-rotate" class="glass w-10 h-10 rounded-full flex items-center justify-center hover:bg-white/10 transition text-cyan-400 bg-white/5" title="Toggle Auto-Rotation"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg> | |
| </button> | |
| <button id="btn-wireframe" class="glass w-10 h-10 rounded-full flex items-center justify-center hover:bg-white/10 transition text-cyan-400" title="Toggle Debug View"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg> | |
| </button> | |
| </div> | |
| <!-- Scene Selector (Bottom) --> | |
| <div class="w-full max-w-4xl mx-auto pointer-events-auto"> | |
| <div class="glass p-4 rounded-2xl"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Select World</h3> | |
| <span id="scene-desc" class="text-xs text-cyan-400 font-mono">Loading...</span> | |
| </div> | |
| <div class="scroller flex gap-4 overflow-x-auto pb-2" id="scene-list"> | |
| <!-- Scene items injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Canvas Container --> | |
| <div id="canvas-container" class="absolute inset-0 z-0 bg-black"></div> | |
| <!-- Application Logic --> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; | |
| import { GaussianSplattingMesh } from 'three/addons/objects/GaussianSplattingMesh.js'; | |
| // --- Configuration --- | |
| // Using publicly available demo splats from Three.js examples or similar CDNs | |
| const SCENES = [ | |
| { | |
| id: 'garden', | |
| name: 'The Garden', | |
| description: 'A high-detail capture of a lush garden.', | |
| // Using a standard demo file from three.js repo (approx 30MB) | |
| url: 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/gaussian-splatting/garden.ply', | |
| cameraPos: { x: 0, y: 1, z: 3 }, | |
| scale: 1, | |
| splatAlphaRemovalThreshold: 0.1 | |
| }, | |
| { | |
| id: 'bonsai', | |
| name: 'Bonsai Tree', | |
| description: 'Intricate details of a miniature tree.', | |
| url: 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/gaussian-splatting/bonsai.ply', | |
| cameraPos: { x: 1, y: 0.5, z: 1.5 }, | |
| scale: 2, | |
| splatAlphaRemovalThreshold: 0.05 | |
| }, | |
| { | |
| id: 'stump', | |
| name: 'Old Stump', | |
| description: 'Weathered wood textures in 3D.', | |
| url: 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/gaussian-splatting/stump.ply', | |
| cameraPos: { x: 2, y: 1, z: 2 }, | |
| scale: 1.5, | |
| splatAlphaRemovalThreshold: 0.1 | |
| }, | |
| { | |
| id: 'bicycle', | |
| name: 'Vintage Bike', | |
| description: 'A classic bicycle reconstruction.', | |
| url: 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/gaussian-splatting/bicycle.ply', | |
| cameraPos: { x: 1, y: 0.5, z: 2 }, | |
| scale: 1.2, | |
| splatAlphaRemovalThreshold: 0.05 | |
| } | |
| ]; | |
| // --- State --- | |
| let camera, scene, renderer, controls; | |
| let currentMesh = null; | |
| let isAutoRotating = true; | |
| let targetSceneIndex = 0; | |
| // --- DOM Elements --- | |
| const container = document.getElementById('canvas-container'); | |
| const loader = document.getElementById('loader'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const sceneListEl = document.getElementById('scene-list'); | |
| const sceneDescEl = document.getElementById('scene-desc'); | |
| const btnReset = document.getElementById('btn-reset'); | |
| const btnRotate = document.getElementById('btn-rotate'); | |
| const btnWireframe = document.getElementById('btn-wireframe'); | |
| // --- Initialization --- | |
| init(); | |
| buildUI(); | |
| loadScene(0); | |
| function init() { | |
| // Scene | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x111111); | |
| // Camera | |
| camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.set(0, 1, 3); | |
| // Renderer | |
| renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); | |
| renderer.setPixelRatio(window.devicePixelRatio); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| container.appendChild(renderer.domElement); | |
| // Controls | |
| controls = new OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| controls.dampingFactor = 0.05; | |
| controls.autoRotate = true; | |
| controls.autoRotateSpeed = 1.0; | |
| controls.target.set(0, 0.5, 0); | |
| // Event Listeners | |
| window.addEventListener('resize', onWindowResize); | |
| // Animation Loop | |
| renderer.setAnimationLoop(animate); | |
| } | |
| function buildUI() { | |
| SCENES.forEach((sceneData, index) => { | |
| const btn = document.createElement('button'); | |
| btn.className = ` | |
| flex-shrink-0 w-32 h-20 rounded-xl border border-white/10 overflow-hidden relative group transition-all duration-300 | |
| hover:border-cyan-400 hover:shadow-[0_0_15px_rgba(34,211,238,0.3)] | |
| ${index === 0 ? 'ring-2 ring-cyan-400' : 'opacity-70 hover:opacity-100'} | |
| `; | |
| // Generate a gradient placeholder for the thumbnail since we don't have images | |
| const hue = (index * 60) % 360; | |
| btn.innerHTML = ` | |
| <div class="absolute inset-0 bg-gradient-to-br from-gray-800 to-black group-hover:scale-110 transition-transform duration-500"></div> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center z-10"> | |
| <span class="text-xs font-bold text-white uppercase tracking-widest drop-shadow-md">${sceneData.name}</span> | |
| </div> | |
| <div class="absolute bottom-0 left-0 w-full h-1 bg-cyan-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div> | |
| `; | |
| btn.onclick = () => { | |
| // Update active state UI | |
| Array.from(sceneListEl.children).forEach(c => { | |
| c.classList.remove('ring-2', 'ring-cyan-400', 'opacity-100'); | |
| c.classList.add('opacity-70'); | |
| }); | |
| btn.classList.remove('opacity-70'); | |
| btn.classList.add('ring-2', 'ring-cyan-400', 'opacity-100'); | |
| loadScene(index); | |
| }; | |
| sceneListEl.appendChild(btn); | |
| }); | |
| } | |
| async function loadScene(index) { | |
| const data = SCENES[index]; | |
| targetSceneIndex = index; | |
| // Update UI Text | |
| sceneDescEl.textContent = `Loading: ${data.name}...`; | |
| // Show loader if it's a new load (optional, but good for UX) | |
| // loader.style.opacity = '1'; | |
| // loader.style.pointerEvents = 'all'; | |
| try { | |
| // Remove old mesh | |
| if (currentMesh) { | |
| scene.remove(currentMesh); | |
| currentMesh.dispose(); | |
| currentMesh = null; | |
| } | |
| // Create new Gaussian Splat Mesh | |
| // Note: GaussianSplattingMesh handles the .ply loading internally via a static load method usually, | |
| // but in newer three.js versions, we might need to load buffer and pass it. | |
| // Let's check the API. | |
| // The class usually expects a URL or buffer. | |
| const mesh = new GaussianSplattingMesh(); | |
| mesh.splatAlphaRemovalThreshold = data.splatAlphaRemovalThreshold; | |
| // Load the PLY file | |
| await mesh.load(data.url); | |
| // Adjust Scale and Position | |
| // The raw data might be huge or tiny, we normalize slightly | |
| mesh.scale.set(data.scale, data.scale, data.scale); | |
| // Center the mesh roughly (some splats are centered, some aren't) | |
| // Usually Gaussian Splat data is centered around 0,0,0 or needs bounding box calc. | |
| // For these specific demo files, they are usually centered. | |
| scene.add(mesh); | |
| currentMesh = mesh; | |
| // Camera Transition | |
| // We smoothly move the camera to the predefined position for this scene | |
| moveCamera(data.cameraPos); | |
| sceneDescEl.textContent = `${data.name} • ${data.description}`; | |
| // Hide loader | |
| loader.style.opacity = '0'; | |
| setTimeout(() => { loader.style.pointerEvents = 'none'; }, 500); | |
| } catch (error) { | |
| console.error("Error loading splat:", error); | |
| sceneDescEl.textContent = `Error loading ${data.name}. See console.`; | |
| loader.style.opacity = '0'; | |
| } | |
| } | |
| function moveCamera(targetPos) { | |
| // Simple interpolation could be added here, but for now direct set with controls update | |
| // To make it fancy, we could use TWEEN, but let's stick to vanilla/three logic | |
| camera.position.set(targetPos.x, targetPos.y, targetPos.z); | |
| controls.target.set(0, 0.2, 0); // Look slightly above origin | |
| controls.update(); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| function animate() { | |
| controls.update(); // required if damping enabled | |
| // Subtle floating animation for the mesh if desired, | |
| // but splats are usually static scenes. | |
| renderer.render(scene, camera); | |
| } | |
| // --- Interaction Logic --- | |
| btnReset.addEventListener('click', () => { | |
| const data = SCENES[targetSceneIndex]; | |
| moveCamera(data.cameraPos); | |
| }); | |
| btnRotate.addEventListener('click', () => { | |
| isAutoRotating = !isAutoRotating; | |
| controls.autoRotate = isAutoRotating; | |
| btnRotate.classList.toggle('bg-white/20'); | |
| btnRotate.classList.toggle('text-white'); | |
| }); | |
| btnWireframe.addEventListener('click', () => { | |
| // Toggle a debug mode or just reset camera for now | |
| // Gaussian Splatting doesn't have a "wireframe" mode easily accessible without custom shaders | |
| // So we'll just trigger a flash effect or reset | |
| scene.background = new THREE.Color(scene.background.getHex() === 0x111111 ? 0x222222 : 0x111111); | |
| }); | |
| // Initial progress bar simulation | |
| let p = 0; | |
| const interval = setInterval(() => { | |
| p += 5; | |
| progressBar.style.width = p + '%'; | |
| if(p > 100) clearInterval(interval); | |
| }, 50); | |
| </script> | |
| </body> | |
| </html> |