Spaces:

aaurelions
/

drones

Running

App Files Files Community

aaurelions commited on Jul 24, 2025

Commit

d60e121

verified ·

1 Parent(s): 8578e5b

Update index.html

Browse files

Files changed (1) hide show

index.html +208 -136

index.html CHANGED Viewed

@@ -9,94 +9,144 @@
         @import url('https://rsms.me/inter/inter.css');
         html { font-family: 'Inter', sans-serif; }
-        /* Custom scrollbar for gallery */
-        .custom-scrollbar::-webkit-scrollbar {
-            height: 8px;
         }
-        .custom-scrollbar::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
         }
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: rgba(59, 130, 246, 0.6); /* blue-500 */
-            border-radius: 10px;
         }
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: rgba(59, 130, 246, 0.8);
         }
-        /* Transitions */
-        .gallery-thumbnail {
-            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
         }
-        .model-button {
-            transition: all 0.2s ease;
         }
-        /* Active states for better UX */
-        .active-thumbnail {
-            border-color: #3b82f6; /* blue-500 */
-            transform: scale(1.05);
-            box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
         }
-        .active-model {
-            background-color: #2563eb; /* blue-600 */
-            color: #ffffff;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.5);
         }
     </style>
 </head>
-<body class="bg-gray-900 text-white select-none">
     <!-- 3D Canvas -->
-    <canvas id="bg-canvas" class="absolute top-0 left-0 w-full h-full outline-none"></canvas>
-    <!-- Main Loading Spinner -->
     <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>
-    <!-- Per-Model Loading Spinner -->
-    <div id="model-loader" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-900 bg-opacity-70 p-4 rounded-lg z-20 hidden flex-col items-center">
-        <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-white"></div>
-        <p class="mt-2 text-sm">Loading Model...</p>
-    </div>
-    <!-- Header -->
-    <header class="absolute top-0 left-0 p-6 md:p-8">
-        <h1 class="text-3xl font-bold text-white" style="text-shadow: 0 2px 10px rgba(0,0,0,0.5);">Immersive Viewer</h1>
-    </header>
-    <!-- UI Panel -->
-    <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-30 backdrop-blur-lg border-t border-white border-opacity-10">
-        <div class="max-w-screen-xl mx-auto space-y-6">
-            <!-- Panorama Selector -->
-            <div>
-                <h2 class="text-sm font-bold uppercase tracking-widest text-gray-300 mb-3 px-2">Panoramas</h2>
-                <div id="panorama-gallery" class="flex space-x-4 overflow-x-auto pb-4 custom-scrollbar">
-                    <!-- Panorama thumbnails injected by JS -->
                 </div>
             </div>
-            <!-- Model Selector -->
-            <div>
-                <h2 class="text-sm font-bold uppercase tracking-widest text-gray-300 mb-3 px-2">Models</h2>
-                <div id="model-selector" class="flex flex-wrap gap-3">
-                    <!-- Model buttons injected by JS -->
-                </div>
             </div>
         </div>
     </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">
         import * as THREE from 'three';
@@ -106,21 +156,19 @@
         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, currentModel = null;
-        const loadedModels = new Map();
         const mainLoader = document.getElementById('main-loader');
-        const modelLoader = document.getElementById('model-loader');
         const textureLoader = new THREE.TextureLoader();
         const gltfLoader = new GLTFLoader();
         async function init() {
             scene = new THREE.Scene();
             camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 1, 5);
-            const canvas = document.getElementById('bg-canvas');
-            renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -128,21 +176,18 @@
             controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
-            controls.minDistance = 2;
-            controls.maxDistance = 50;
-            controls.autoRotate = false;
             controls.target.set(0, 1, 0);
-            controls.update();
-            scene.add(new THREE.AmbientLight(0xffffff, 0.8));
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
-            dirLight.position.set(8, 20, 15);
             scene.add(dirLight);
             setupUI();
-            await setPanorama(panoramaFiles[0]);
             await loadModel(modelFiles[0]);
             mainLoader.style.opacity = '0';
@@ -152,91 +197,119 @@
             animate();
         }
-        function setPanorama(imageName) {
-            return new Promise((resolve) => {
-                textureLoader.load(`/jpg/${imageName}`, (texture) => {
                     texture.mapping = THREE.EquirectangularReflectionMapping;
                     scene.background = texture;
-                    scene.environment = texture;
-                    updateActiveThumbnail(imageName);
                     resolve();
                 });
             });
         }
         function loadModel(modelName) {
-             return new Promise((resolve, reject) => {
-                if (currentModel) currentModel.visible = false;
-                if (loadedModels.has(modelName)) {
-                    currentModel = loadedModels.get(modelName);
-                    currentModel.visible = true;
-                    updateActiveModelButton(modelName);
-                    resolve();
-                    return;
-                }
-                modelLoader.style.display = 'flex';
-                gltfLoader.load(`/glb/${modelName}`, (gltf) => {
                     const model = gltf.scene;
                     const box = new THREE.Box3().setFromObject(model);
                     const center = box.getCenter(new THREE.Vector3());
-                    model.position.sub(center); // Center the model
                     const size = box.getSize(new THREE.Vector3());
                     const maxDim = Math.max(size.x, size.y, size.z);
-                    const scale = 2.5 / maxDim; // Normalize model size
                     model.scale.set(scale, scale, scale);
-                    model.position.y += size.y * scale / 2; // Sit model on the ground
                     scene.add(model);
-                    loadedModels.set(modelName, model);
-                    currentModel = model;
-                    updateActiveModelButton(modelName);
-                    modelLoader.style.display = 'none';
-                    resolve();
-                }, undefined, (error) => {
-                    console.error(`Error loading model ${modelName}:`, error);
-                    alert(`Failed to load model: ${modelName}. Check console for details.`);
-                    modelLoader.style.display = 'none';
-                    reject(error);
                 });
             });
         }
         function setupUI() {
             const panoramaGallery = document.getElementById('panorama-gallery');
             panoramaFiles.forEach(fileName => {
                 const thumb = document.createElement('img');
                 thumb.src = `/jpg/thumbnails/${fileName}`;
-                thumb.className = 'gallery-thumbnail h-24 w-40 object-cover rounded-lg border-4 border-transparent cursor-pointer hover:border-blue-500/50';
-                thumb.dataset.image = fileName;
-                thumb.onclick = () => setPanorama(fileName);
-                panoramaGallery.appendChild(thumb);
-            });
-            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 = 'model-button px-5 py-2.5 bg-gray-800 bg-opacity-80 text-white rounded-lg font-semibold border border-gray-600 hover:bg-blue-500 hover:border-blue-400';
-                btn.dataset.model = fileName;
-                btn.onclick = () => loadModel(fileName);
-                modelSelector.appendChild(btn);
-            });
-        }
-        function updateActiveThumbnail(activeImage) {
-            document.querySelectorAll('.gallery-thumbnail').forEach(thumb => {
-                thumb.classList.toggle('active-thumbnail', thumb.dataset.image === activeImage);
-            });
-        }
-        function updateActiveModelButton(activeModel) {
-            document.querySelectorAll('.model-button').forEach(btn => {
-                btn.classList.toggle('active-model', btn.dataset.model === activeModel);
             });
         }
         function onWindowResize() {
@@ -252,7 +325,6 @@
         }
         init();
     </script>
 </body>
 </html>

         @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>
+    <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">
         import * as THREE from 'three';
         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();
         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);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             controls = new OrbitControls(camera, renderer.domElement);
             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';
             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());
+                    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);
                 });
             });
         }
+        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() {
         }
         init();
     </script>
 </body>
 </html>