Spaces:

aaurelions
/

drones

Running

App Files Files Community

aaurelions commited on Jul 24, 2025

Commit

f193ee6

verified ·

1 Parent(s): d60e121

Update index.html

Browse files

Files changed (1) hide show

index.html +118 -174

index.html CHANGED Viewed

@@ -3,146 +3,95 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Immersive 3D Viewer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         @import url('https://rsms.me/inter/inter.css');
         html { font-family: 'Inter', sans-serif; }
-        body {
-            background-color: #000;
         }
         /* Slide-out Panel Styling */
         .side-panel {
-            position: fixed;
-            top: 0;
-            height: 100vh;
-            width: 320px;
-            max-width: 80vw;
-            background-color: rgba(17, 24, 39, 0.8); /* gray-900 with opacity */
-            backdrop-filter: blur(12px);
-            border-style: solid;
             border-color: rgba(255, 255, 255, 0.1);
             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            z-index: 30;
-        }
-        .side-panel.left {
-            left: 0;
-            border-width: 0 1px 0 0;
-            transform: translateX(-100%);
-        }
-        .side-panel.right {
-            right: 0;
-            border-width: 0 0 0 1px;
-            transform: translateX(100%);
-        }
-        .side-panel.is-open {
-            transform: translateX(0);
         }
         /* Panel Trigger Button Styling */
         .panel-trigger {
-            position: fixed;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 32px;
-            height: 80px;
-            background-color: rgba(17, 24, 39, 0.8);
-            border-style: solid;
             border-color: rgba(255, 255, 255, 0.1);
-            cursor: pointer;
-            z-index: 40;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .panel-trigger.left {
-            left: 0;
-            border-radius: 0 1rem 1rem 0;
-            border-width: 1px 1px 1px 0;
-        }
-         .panel-trigger.right {
-            right: 0;
-            border-radius: 1rem 0 0 1rem;
-            border-width: 1px 0 1px 1px;
         }
         /* Custom scrollbar for panels */
         .panel-content::-webkit-scrollbar { width: 6px; }
         .panel-content::-webkit-scrollbar-track { background: transparent; }
-        .panel-content::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.5); border-radius: 10px; }
-        .panel-content::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.8); }
-        /* Day/Night Toggle Switch */
-        .toggle-switch {
-            width: 52px;
-            height: 28px;
-        }
-        .toggle-switch-circle {
-            transition: transform 0.3s ease-in-out;
-        }
-        input:checked + .toggle-bg .toggle-switch-circle {
-            transform: translateX(24px);
-        }
     </style>
 </head>
-<body class="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>
-    <!-- Initial Loader -->
     <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">Initializing Scene...</p>
     </div>
-    <!-- Top UI Bar -->
-    <header class="absolute top-0 left-0 right-0 p-5 flex justify-between items-center z-20">
-        <h1 class="text-2xl font-bold text-white" style="text-shadow: 0 2px 10px rgba(0,0,0,0.5);">3D Viewer</h1>
-        <!-- Day/Night Toggle -->
-        <div class="flex items-center space-x-3">
-             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-300" viewBox="0 0 20 20" fill="currentColor"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg>
-            <label for="day-night-toggle" class="relative inline-flex items-center cursor-pointer">
-                <input type="checkbox" id="day-night-toggle" class="sr-only peer">
-                <div class="toggle-bg bg-gray-600 peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer peer-checked:bg-blue-600">
-                    <div class="toggle-switch flex items-center justify-center">
-                        <div class="absolute w-6 h-6 bg-white rounded-full toggle-switch-circle"></div>
-                    </div>
-                </div>
-            </label>
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
-        </div>
     </header>
     <!-- Left Panel (Models) -->
-    <aside id="model-panel" class="side-panel left">
         <div class="h-full flex flex-col">
-            <h2 class="text-xl font-bold p-6">Select Model</h2>
-            <div id="model-selector" class="panel-content flex-grow overflow-y-auto px-6 space-y-3">
-                <!-- Model buttons injected by JS -->
-            </div>
         </div>
     </aside>
-    <div id="model-panel-trigger" class="panel-trigger left">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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 12h16M4 18h16" /></svg>
     </div>
     <!-- Right Panel (Panoramas) -->
-    <aside id="panorama-panel" class="side-panel right">
         <div class="h-full flex flex-col">
-            <h2 class="text-xl font-bold p-6">Select Panorama</h2>
-            <div id="panorama-gallery" class="panel-content flex-grow overflow-y-auto px-6 grid grid-cols-2 gap-4">
-                <!-- Panorama thumbnails injected by JS -->
-            </div>
         </div>
     </aside>
-    <div id="panorama-panel-trigger" class="panel-trigger right">
-         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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>
@@ -156,10 +105,10 @@
         const panoramaFiles = Array.from({ length: 10 }, (_, i) => `bg${i + 1}.jpg`);
         const modelFiles = [ 'gerbera.glb', 'shahed1.glb', 'shahed2.glb', 'shahed3.glb', 'supercam.glb', 'zala.glb', 'beaver.glb' ];
-        let scene, camera, renderer, controls, ambientLight, dirLight;
-        let isNight = false;
         const mainLoader = document.getElementById('main-loader');
         const textureLoader = new THREE.TextureLoader();
         const gltfLoader = new GLTFLoader();
@@ -171,6 +120,9 @@
             renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('bg-canvas'), antialias: true });
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.outputEncoding = THREE.sRGBEncoding;
@@ -178,17 +130,18 @@
             controls.enableDamping = true;
             controls.target.set(0, 1, 0);
-            // Setup lighting
-            ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
-            scene.add(ambientLight);
-            dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
             dirLight.position.set(5, 10, 7);
             scene.add(dirLight);
             setupUI();
-            await setPanorama(panoramaFiles[0], true);
-            await loadModel(modelFiles[0]);
             mainLoader.style.opacity = '0';
             setTimeout(() => mainLoader.style.display = 'none', 500);
@@ -197,51 +150,39 @@
             animate();
         }
-        function setPanorama(imageName, forceDay = false) {
             return new Promise(resolve => {
                 textureLoader.load(`/jpg/${imageName}`, texture => {
                     texture.mapping = THREE.EquirectangularReflectionMapping;
                     scene.background = texture;
-                    if (!isNight || forceDay) {
-                        scene.environment = texture;
-                    } else {
-                        // If it's night mode, keep the environment dark
-                        updateEnvironmentForNightMode();
-                    }
-                    document.querySelectorAll('.thumb-container').forEach(c => c.classList.remove('ring-2', 'ring-blue-500'));
-                    document.querySelector(`[data-image="${imageName}"]`).classList.add('ring-2', 'ring-blue-500');
                     resolve();
                 });
             });
         }
-        function loadModel(modelName) {
-            // Simplified logic to hide all models and show the selected one
             scene.children.forEach(child => {
                 if (child.isGroup) child.visible = (child.name === modelName);
             });
-            document.querySelectorAll('#model-selector button').forEach(b => {
-                b.classList.toggle('bg-blue-600', b.dataset.model === modelName);
-                b.classList.toggle('bg-gray-700', b.dataset.model !== modelName);
-            });
         }
         function preloadAllModels() {
-            const modelSelector = document.getElementById('model-selector');
-            modelFiles.forEach(fileName => {
-                // Create UI button
-                const btn = document.createElement('button');
-                btn.textContent = fileName.replace('.glb', '').replace(/(\d)/, ' $1').toUpperCase();
-                btn.className = 'w-full text-left p-4 rounded-lg bg-gray-700 hover:bg-blue-500 transition-colors duration-200';
-                btn.dataset.model = fileName;
-                btn.onclick = () => loadModel(fileName);
-                modelSelector.appendChild(btn);
-                // Preload model
-                gltfLoader.load(`/glb/${fileName}`, (gltf) => {
                     const model = gltf.scene;
                     model.name = fileName;
-                    model.visible = false; // Hide by default
                     const box = new THREE.Box3().setFromObject(model);
                     const center = box.getCenter(new THREE.Vector3());
@@ -254,62 +195,65 @@
                     model.position.y += size.y * scale / 2;
                     scene.add(model);
                 });
-            });
-        }
-        function toggleNightMode() {
-            isNight = !isNight;
-            const dayIntensity = { amb: 0.7, dir: 1.0 };
-            const nightIntensity = { amb: 0.05, dir: 0.15 };
-            ambientLight.intensity = isNight ? nightIntensity.amb : dayIntensity.amb;
-            dirLight.intensity = isNight ? nightIntensity.dir : dayIntensity.dir;
-            if (isNight) {
-                updateEnvironmentForNightMode();
-            } else {
-                scene.environment = scene.background; // Restore original environment
-            }
-        }
-        function updateEnvironmentForNightMode() {
-            if (!scene.background) return;
-            // Create a darkened environment map for realistic night lighting
-            const pmremGenerator = new THREE.PMREMGenerator(renderer);
-            const darkEnvMap = pmremGenerator.fromEquirectangular(scene.background).texture;
-            // This is a simplified approach. A true night effect would involve
-            // processing the texture to darken it significantly. For our purpose,
-            // we will just rely on reduced light intensity, but setting a null
-            // or darker environment is the next step for refinement.
-            scene.environment = darkEnvMap;
-            pmremGenerator.dispose();
         }
         function setupUI() {
-            // Panel Triggers
-            document.getElementById('model-panel-trigger').addEventListener('click', () => document.getElementById('model-panel').classList.toggle('is-open'));
-            document.getElementById('panorama-panel-trigger').addEventListener('click', () => document.getElementById('panorama-panel').classList.toggle('is-open'));
-            // Day/Night Toggle
-            document.getElementById('day-night-toggle').addEventListener('change', toggleNightMode);
-            // Panorama Gallery
             const panoramaGallery = document.getElementById('panorama-gallery');
             panoramaFiles.forEach(fileName => {
                 const container = document.createElement('div');
-                container.className = 'thumb-container rounded-lg overflow-hidden cursor-pointer transition-all';
                 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 hover:scale-110 transition-transform duration-300';
                 container.appendChild(thumb);
                 panoramaGallery.appendChild(container);
             });
-            preloadAllModels();
         }
         function onWindowResize() {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Definitive 3D Viewer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         @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>
         const panoramaFiles = Array.from({ length: 10 }, (_, i) => `bg${i + 1}.jpg`);
         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');
         const textureLoader = new THREE.TextureLoader();
         const gltfLoader = new GLTFLoader();
             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;
             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);
             animate();
         }
+        function setPanorama(imageName) {
             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.y += size.y * scale / 2;
                     scene.add(model);
+                    resolve();
                 });
+            }));
+            return Promise.all(modelPromises);
         }
         function setupUI() {
+            const modelSelector = document.getElementById('model-selector');
+            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);
             });
+        }
+        function setupEventListeners() {
+            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() {