Spaces:

aaurelions
/

drones

Running

App Files Files Community

aaurelions commited on Jul 24, 2025

Commit

daa1998

verified ·

1 Parent(s): f193ee6

Update index.html

Browse files

Files changed (1) hide show

index.html +86 -87

index.html CHANGED Viewed

@@ -9,92 +9,96 @@
         @import url('https://rsms.me/inter/inter.css');
         html { font-family: 'Inter', sans-serif; }
-        body { background-color: #111827; /* gray-900 */ }
-        /* Smooth loading overlay for transitions */
         #loading-overlay {
-            backdrop-filter: blur(8px);
-            background-color: rgba(0, 0, 0, 0.5);
             transition: opacity 0.3s ease-in-out;
         }
         #loading-overlay .spinner {
-            border-top-color: #3b82f6; /* blue-500 */
         }
-        /* Slide-out Panel Styling */
         .side-panel {
-            background-color: rgba(17, 24, 39, 0.75); /* gray-900 with opacity */
-            backdrop-filter: blur(16px);
-            border-color: rgba(255, 255, 255, 0.1);
             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .side-panel.left { transform: translateX(-100%); }
         .side-panel.right { transform: translateX(100%); }
         .side-panel.is-open { transform: translateX(0); }
-        /* Panel Trigger Button Styling */
         .panel-trigger {
-            background-color: rgba(17, 24, 39, 0.75);
-            border-color: rgba(255, 255, 255, 0.1);
             transition: background-color 0.2s ease;
         }
         .panel-trigger:hover { background-color: rgba(59, 130, 246, 0.5); }
-        /* Active state for list items in panels */
         .list-item.active {
-            background-color: rgba(59, 130, 246, 0.2);
-            box-shadow: inset 3px 0 0 0 #3b82f6; /* A nice left border highlight */
         }
-        /* Custom scrollbar for panels */
         .panel-content::-webkit-scrollbar { width: 6px; }
         .panel-content::-webkit-scrollbar-track { background: transparent; }
         .panel-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
-        .panel-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
     </style>
 </head>
-<body class="text-white select-none overflow-hidden">
-    <!-- 3D Canvas -->
     <canvas id="bg-canvas" class="absolute top-0 left-0 w-full h-full outline-none z-10"></canvas>
-    <!-- Loading Overlays -->
-    <div id="loading-overlay" class="absolute inset-0 z-40 flex items-center justify-center opacity-0 pointer-events-none">
         <div class="spinner w-12 h-12 border-4 border-gray-600 rounded-full animate-spin"></div>
     </div>
     <div id="main-loader" class="absolute inset-0 bg-gray-900 flex flex-col items-center justify-center z-50 transition-opacity duration-500">
         <div class="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
-        <p class="mt-4 text-xl tracking-wider">Loading Assets...</p>
     </div>
-    <!-- Header -->
-    <header class="absolute top-0 left-0 right-0 p-5 z-20">
-        <h1 class="text-2xl font-bold" style="text-shadow: 0 2px 10px rgba(0,0,0,0.5);">3D Viewer</h1>
     </header>
-    <!-- Left Panel (Models) -->
     <aside id="model-panel" class="side-panel fixed top-0 left-0 h-full w-72 max-w-[80vw] z-30 border-r">
         <div class="h-full flex flex-col">
-            <h2 class="text-xl font-bold p-6 flex-shrink-0">Select Model</h2>
-            <div id="model-selector" class="panel-content flex-grow overflow-y-auto px-4 space-y-2"></div>
         </div>
     </aside>
-    <div id="model-panel-trigger" class="panel-trigger fixed top-1/4 left-0 h-20 w-8 z-20 flex items-center justify-center cursor-pointer rounded-r-lg border-t border-r border-b">
-        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
     </div>
-    <!-- Right Panel (Panoramas) -->
     <aside id="panorama-panel" class="side-panel fixed top-0 right-0 h-full w-80 max-w-[80vw] z-30 border-l">
         <div class="h-full flex flex-col">
-            <h2 class="text-xl font-bold p-6 flex-shrink-0">Select Panorama</h2>
-            <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto px-6 grid grid-cols-2 gap-4"></div>
         </div>
     </aside>
-     <div id="panorama-panel-trigger" class="panel-trigger fixed top-1/4 right-0 h-20 w-8 z-20 flex items-center justify-center cursor-pointer rounded-l-lg border-t border-l border-b">
-        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l-1.586-1.586a2 2 0 00-2.828 0L6 14"/></svg>
     </div>
     <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>
     <script type="module">
@@ -106,6 +110,7 @@
         const modelFiles = [ 'gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb' ];
         let scene, camera, renderer, controls;
         const mainLoader = document.getElementById('main-loader');
         const loadingOverlay = document.getElementById('loading-overlay');
@@ -114,15 +119,12 @@
         async function init() {
             scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 1.2, 4.5);
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('bg-canvas'), antialias: true });
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.setSize(window.innerWidth, window.innerHeight);
-            // CRITICAL: Correct color space and tone mapping setup
-            // This ensures the background panorama is not brightened and models are lit correctly.
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.outputEncoding = THREE.sRGBEncoding;
@@ -130,18 +132,16 @@
             controls.enableDamping = true;
             controls.target.set(0, 1, 0);
-            // Subtle lighting that affects models but doesn't over-brighten the scene
-            scene.add(new THREE.AmbientLight(0xffffff, 0.4));
-            const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            dirLight.position.set(5, 10, 7);
             scene.add(dirLight);
             setupUI();
             setupEventListeners();
-            await preloadAllModels();
             await setPanorama(panoramaFiles[0]);
-            await switchModel(modelFiles[0]);
             mainLoader.style.opacity = '0';
             setTimeout(() => mainLoader.style.display = 'none', 500);
@@ -154,51 +154,59 @@
             return new Promise(resolve => {
                 showLoadingOverlay(true);
                 textureLoader.load(`/jpg/${imageName}`, texture => {
-                    // CRITICAL: Tell three.js the texture is in sRGB color space.
                     texture.encoding = THREE.sRGBEncoding;
                     texture.mapping = THREE.EquirectangularReflectionMapping;
                     scene.background = texture;
-                    scene.environment = texture; // Use the same texture for model reflections/lighting
                     document.querySelectorAll('#panorama-gallery .list-item').forEach(c => c.classList.remove('active'));
                     document.querySelector(`[data-image="${imageName}"]`).classList.add('active');
                     showLoadingOverlay(false);
                     resolve();
                 });
             });
         }
-        function switchModel(modelName) {
             scene.children.forEach(child => {
                 if (child.isGroup) child.visible = (child.name === modelName);
             });
             document.querySelectorAll('#model-selector .list-item').forEach(b => b.classList.toggle('active', b.dataset.model === modelName));
         }
-        function preloadAllModels() {
-            const modelPromises = modelFiles.map(fileName => new Promise(resolve => {
-                gltfLoader.load(`/glb/${fileName}`, gltf => {
                     const model = gltf.scene;
-                    model.name = fileName;
-                    model.visible = false;
                     const box = new THREE.Box3().setFromObject(model);
                     const center = box.getCenter(new THREE.Vector3());
                     model.position.sub(center);
                     const size = box.getSize(new THREE.Vector3());
                     const maxDim = Math.max(size.x, size.y, size.z);
-                    const scale = 2.5 / maxDim;
                     model.scale.set(scale, scale, scale);
                     model.position.y += size.y * scale / 2;
                     scene.add(model);
                     resolve();
                 });
-            }));
-            return Promise.all(modelPromises);
         }
         function setupUI() {
@@ -206,21 +214,21 @@
             modelFiles.forEach(fileName => {
                 const btn = document.createElement('button');
                 btn.textContent = fileName.replace('.glb', '').replace(/(\d)/, ' $1').toUpperCase();
-                btn.className = 'list-item w-full text-left p-4 rounded-lg hover:bg-gray-700 transition-colors duration-200';
                 btn.dataset.model = fileName;
-                btn.onclick = () => switchModel(fileName);
                 modelSelector.appendChild(btn);
             });
             const panoramaGallery = document.getElementById('panorama-gallery');
             panoramaFiles.forEach(fileName => {
                 const container = document.createElement('div');
-                container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer transition-all ring-2 ring-transparent hover:ring-blue-500';
                 container.dataset.image = fileName;
                 container.onclick = () => setPanorama(fileName);
                 const thumb = document.createElement('img');
                 thumb.src = `/jpg/thumbnails/${fileName}`;
                 thumb.className = 'w-full h-full object-cover';
                 container.appendChild(thumb);
                 panoramaGallery.appendChild(container);
             });
@@ -230,30 +238,21 @@
             const modelPanel = document.getElementById('model-panel');
             const panoramaPanel = document.getElementById('panorama-panel');
-            document.getElementById('model-panel-trigger').addEventListener('click', (e) => {
-                e.stopPropagation();
-                modelPanel.classList.toggle('is-open');
-                panoramaPanel.classList.remove('is-open');
-            });
-            document.getElementById('panorama-panel-trigger').addEventListener('click', (e) => {
-                e.stopPropagation();
-                panoramaPanel.classList.toggle('is-open');
-                modelPanel.classList.remove('is-open');
-            });
-            // Close panels when clicking outside
-            document.body.addEventListener('click', (e) => {
-                if (!modelPanel.contains(e.target)) modelPanel.classList.remove('is-open');
-                if (!panoramaPanel.contains(e.target)) panoramaPanel.classList.remove('is-open');
-            });
         }
         function showLoadingOverlay(show) {
-            if (show) {
-                loadingOverlay.classList.remove('opacity-0', 'pointer-events-none');
-            } else {
-                loadingOverlay.classList.add('opacity-0', 'pointer-events-none');
-            }
         }
         function onWindowResize() {

         @import url('https://rsms.me/inter/inter.css');
         html { font-family: 'Inter', sans-serif; }
+        body { background-color: #111827; }
+        .glass-ui {
+            background-color: rgba(17, 24, 39, 0.75);
+            backdrop-filter: blur(16px);
+            border-color: rgba(255, 255, 255, 0.1);
+        }
         #loading-overlay {
             transition: opacity 0.3s ease-in-out;
         }
         #loading-overlay .spinner {
+            border-top-color: #3b82f6;
         }
         .side-panel {
             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .side-panel.left { transform: translateX(-100%); }
         .side-panel.right { transform: translateX(100%); }
         .side-panel.is-open { transform: translateX(0); }
         .panel-trigger {
             transition: background-color 0.2s ease;
         }
         .panel-trigger:hover { background-color: rgba(59, 130, 246, 0.5); }
+        .list-item {
+             transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .list-item:hover {
+            background-color: rgba(59, 130, 246, 0.1);
+            transform: translateX(4px);
+        }
         .list-item.active {
+            background-color: rgba(59, 130, 246, 0.25);
+            box-shadow: inset 4px 0 0 0 #3b82f6;
         }
         .panel-content::-webkit-scrollbar { width: 6px; }
         .panel-content::-webkit-scrollbar-track { background: transparent; }
         .panel-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
     </style>
 </head>
+<body class="text-gray-100 select-none overflow-hidden">
     <canvas id="bg-canvas" class="absolute top-0 left-0 w-full h-full outline-none z-10"></canvas>
+    <div id="loading-overlay" class="glass-ui absolute inset-0 z-40 flex items-center justify-center opacity-0 pointer-events-none">
         <div class="spinner w-12 h-12 border-4 border-gray-600 rounded-full animate-spin"></div>
     </div>
     <div id="main-loader" class="absolute inset-0 bg-gray-900 flex flex-col items-center justify-center z-50 transition-opacity duration-500">
         <div class="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
+        <p class="mt-4 text-xl tracking-wider text-white">Initializing Viewer...</p>
     </div>
+    <header class="absolute top-0 left-0 right-0 p-5 z-20 glass-ui rounded-b-xl max-w-sm mx-auto border-b border-x">
+        <h1 class="text-xl font-bold text-white text-center">Immersive Viewer</h1>
     </header>
     <aside id="model-panel" class="side-panel fixed top-0 left-0 h-full w-72 max-w-[80vw] z-30 border-r">
         <div class="h-full flex flex-col">
+            <div class="flex-shrink-0 flex justify-between items-center p-5">
+                <h2 class="text-xl font-bold text-white">Models</h2>
+                <button id="close-model-panel" class="p-1 rounded-full text-gray-400 hover:bg-gray-700 hover:text-white transition-colors">
+                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+            <div id="model-selector" class="panel-content flex-grow overflow-y-auto px-2 space-y-1 pb-5"></div>
         </div>
     </aside>
+    <div id="model-panel-trigger" class="panel-trigger glass-ui fixed top-1/3 left-0 h-20 w-8 z-20 flex items-center justify-center cursor-pointer rounded-r-lg border-t border-r border-b">
+        <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
     </div>
     <aside id="panorama-panel" class="side-panel fixed top-0 right-0 h-full w-80 max-w-[80vw] z-30 border-l">
         <div class="h-full flex flex-col">
+            <div class="flex-shrink-0 flex justify-between items-center p-5">
+                <h2 class="text-xl font-bold text-white">Panoramas</h2>
+                 <button id="close-panorama-panel" class="p-1 rounded-full text-gray-400 hover:bg-gray-700 hover:text-white transition-colors">
+                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+            <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto px-4 grid grid-cols-2 gap-3 pb-5"></div>
         </div>
     </aside>
+    <div id="panorama-panel-trigger" class="panel-trigger glass-ui fixed top-1/3 right-0 h-20 w-8 z-20 flex items-center justify-center cursor-pointer rounded-l-lg border-t border-l border-b">
+        <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l-1.586-1.586a2 2 0 00-2.828 0L6 14" /></svg>
     </div>
     <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>
     <script type="module">
         const modelFiles = [ 'gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb' ];
         let scene, camera, renderer, controls;
+        const loadedModels = new Map();
         const mainLoader = document.getElementById('main-loader');
         const loadingOverlay = document.getElementById('loading-overlay');
         async function init() {
             scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 2000);
+            camera.position.set(0, 1.5, 5);
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('bg-canvas'), antialias: true, powerPreference: "high-performance" });
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.outputEncoding = THREE.sRGBEncoding;
             controls.enableDamping = true;
             controls.target.set(0, 1, 0);
+            scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
+            dirLight.position.set(8, 15, 10);
             scene.add(dirLight);
             setupUI();
             setupEventListeners();
             await setPanorama(panoramaFiles[0]);
+            await loadAndSwitchModel(modelFiles[0]);
             mainLoader.style.opacity = '0';
             setTimeout(() => mainLoader.style.display = 'none', 500);
             return new Promise(resolve => {
                 showLoadingOverlay(true);
                 textureLoader.load(`/jpg/${imageName}`, texture => {
                     texture.encoding = THREE.sRGBEncoding;
                     texture.mapping = THREE.EquirectangularReflectionMapping;
                     scene.background = texture;
+                    scene.environment = texture;
                     document.querySelectorAll('#panorama-gallery .list-item').forEach(c => c.classList.remove('active'));
                     document.querySelector(`[data-image="${imageName}"]`).classList.add('active');
                     showLoadingOverlay(false);
                     resolve();
+                }, undefined, () => {
+                    alert(`Error: Could not load panorama "${imageName}".`);
+                    showLoadingOverlay(false);
                 });
             });
         }
+        function switchActiveModel(modelName) {
             scene.children.forEach(child => {
                 if (child.isGroup) child.visible = (child.name === modelName);
             });
             document.querySelectorAll('#model-selector .list-item').forEach(b => b.classList.toggle('active', b.dataset.model === modelName));
         }
+        function loadAndSwitchModel(modelName) {
+            return new Promise(resolve => {
+                if (loadedModels.has(modelName)) {
+                    switchActiveModel(modelName);
+                    resolve();
+                    return;
+                }
+                showLoadingOverlay(true);
+                gltfLoader.load(`/glb/${modelName}`, gltf => {
                     const model = gltf.scene;
+                    model.name = modelName;
                     const box = new THREE.Box3().setFromObject(model);
                     const center = box.getCenter(new THREE.Vector3());
                     model.position.sub(center);
                     const size = box.getSize(new THREE.Vector3());
                     const maxDim = Math.max(size.x, size.y, size.z);
+                    const scale = 3.0 / maxDim;
                     model.scale.set(scale, scale, scale);
                     model.position.y += size.y * scale / 2;
                     scene.add(model);
+                    loadedModels.set(modelName, model);
+                    switchActiveModel(modelName);
+                    showLoadingOverlay(false);
                     resolve();
+                }, undefined, () => {
+                    alert(`Error: Could not load model "${modelName}".`);
+                    showLoadingOverlay(false);
                 });
+            });
         }
         function setupUI() {
             modelFiles.forEach(fileName => {
                 const btn = document.createElement('button');
                 btn.textContent = fileName.replace('.glb', '').replace(/(\d)/, ' $1').toUpperCase();
+                btn.className = 'list-item w-full text-left px-4 py-3 rounded-lg text-white';
                 btn.dataset.model = fileName;
+                btn.onclick = () => loadAndSwitchModel(fileName);
                 modelSelector.appendChild(btn);
             });
             const panoramaGallery = document.getElementById('panorama-gallery');
             panoramaFiles.forEach(fileName => {
                 const container = document.createElement('div');
+                container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer ring-2 ring-transparent';
                 container.dataset.image = fileName;
                 container.onclick = () => setPanorama(fileName);
                 const thumb = document.createElement('img');
                 thumb.src = `/jpg/thumbnails/${fileName}`;
                 thumb.className = 'w-full h-full object-cover';
+                thumb.alt = `Thumbnail for ${fileName}`;
                 container.appendChild(thumb);
                 panoramaGallery.appendChild(container);
             });
             const modelPanel = document.getElementById('model-panel');
             const panoramaPanel = document.getElementById('panorama-panel');
+            const closeModelPanel = () => modelPanel.classList.remove('is-open');
+            const closePanoramaPanel = () => panoramaPanel.classList.remove('is-open');
+            document.getElementById('model-panel-trigger').addEventListener('click', e => { e.stopPropagation(); modelPanel.classList.toggle('is-open'); closePanoramaPanel(); });
+            document.getElementById('panorama-panel-trigger').addEventListener('click', e => { e.stopPropagation(); panoramaPanel.classList.toggle('is-open'); closeModelPanel(); });
+            document.getElementById('close-model-panel').addEventListener('click', closeModelPanel);
+            document.getElementById('close-panorama-panel').addEventListener('click', closePanoramaPanel);
+            document.getElementById('bg-canvas').addEventListener('click', () => { closeModelPanel(); closePanoramaPanel(); });
         }
         function showLoadingOverlay(show) {
+            loadingOverlay.style.opacity = show ? '1' : '0';
+            loadingOverlay.style.pointerEvents = show ? 'auto' : 'none';
         }
         function onWindowResize() {