Spaces:

aaurelions
/

drones

Running

App Files Files Community

aaurelions commited on Jul 24, 2025

Commit

8578e5b

verified ·

1 Parent(s): 5243da3

Update index.html

Browse files

Files changed (1) hide show

index.html +140 -97

index.html CHANGED Viewed

@@ -3,59 +3,87 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Panorama and Model Viewer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            overflow: hidden;
         }
-        .gallery-thumbnail {
-            cursor: pointer;
-            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
         }
-        .gallery-thumbnail:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
         }
-        .model-button {
-            transition: background-color 0.2s, transform 0.2s;
         }
-        .model-button:hover {
-            transform: translateY(-2px);
         }
-        .active-thumbnail, .active-model {
             border-color: #3b82f6; /* blue-500 */
-            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
         }
     </style>
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
 </head>
-<body class="bg-gray-900 text-white">
-    <div id="loader" class="absolute inset-0 bg-gray-900 bg-opacity-80 flex items-center justify-center z-50 flex-col">
-        <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
-        <p class="mt-4 text-lg">Loading 3D Environment...</p>
-    </div>
-    <canvas id="bg-canvas" class="absolute top-0 left-0 w-full h-full"></canvas>
-    <div class="absolute top-0 left-0 p-6 md:p-8 w-full md:w-auto">
-        <h1 class="text-2xl md:text-3xl font-bold text-white shadow-lg">3D Viewer</h1>
     </div>
-    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gray-900 bg-opacity-50 backdrop-blur-sm">
-        <div class="max-w-7xl mx-auto">
             <div>
-                <h2 class="text-lg font-semibold mb-3 px-2">Select Panorama</h2>
-                <div id="panorama-gallery" class="flex space-x-3 overflow-x-auto pb-3">
-                    <!-- Panorama thumbnails will be injected here -->
                 </div>
             </div>
-            <div class="mt-4">
-                <h2 class="text-lg font-semibold mb-3 px-2">Select Model</h2>
-                <div id="model-selector" class="flex flex-wrap gap-2">
-                    <!-- Model buttons will be injected here -->
                 </div>
             </div>
         </div>
@@ -75,124 +103,139 @@
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-        const panoramaFiles = Array.from({ length: 10 }, (_, i) => `/jpg/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;
-        let currentModel = null;
         const loadedModels = new Map();
         const textureLoader = new THREE.TextureLoader();
         const gltfLoader = new GLTFLoader();
-        const loaderElement = document.getElementById('loader');
-        function init() {
             scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.z = 5;
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('bg-canvas'), antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.outputEncoding = THREE.sRGBEncoding;
             controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.dampingFactor = 0.05;
-            controls.screenSpacePanning = false;
-            controls.minDistance = 1;
-            controls.maxDistance = 100;
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-            directionalLight.position.set(5, 10, 7.5);
-            scene.add(directionalLight);
             setupUI();
-            setPanorama(panoramaFiles[0]);
-            loadModel(modelFiles[0]);
-            window.addEventListener('resize', onWindowResize, false);
             animate();
-            loaderElement.style.display = 'none';
         }
-        function setPanorama(imagePath) {
-            textureLoader.load(imagePath, (texture) => {
-                texture.mapping = THREE.EquirectangularReflectionMapping;
-                scene.background = texture;
-                scene.environment = texture;
-                updateActiveThumbnail(imagePath);
             });
         }
         function loadModel(modelName) {
-            if (currentModel) {
-                currentModel.visible = false;
-            }
-            if (loadedModels.has(modelName)) {
-                currentModel = loadedModels.get(modelName);
-                currentModel.visible = true;
-                updateActiveModelButton(modelName);
-            } else {
-                loaderElement.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);
                     scene.add(model);
                     loadedModels.set(modelName, model);
                     currentModel = model;
                     updateActiveModelButton(modelName);
-                    loaderElement.style.display = 'none';
                 }, undefined, (error) => {
-                    console.error('An error happened while loading the model:', error);
-                    loaderElement.style.display = 'none';
                 });
-            }
         }
         function setupUI() {
             const panoramaGallery = document.getElementById('panorama-gallery');
-            panoramaFiles.forEach(file => {
                 const thumb = document.createElement('img');
-                thumb.src = file;
-                thumb.className = 'gallery-thumbnail h-20 w-32 object-cover rounded-lg border-2 border-transparent';
-                thumb.dataset.path = file;
-                thumb.onclick = () => setPanorama(file);
                 panoramaGallery.appendChild(thumb);
             });
             const modelSelector = document.getElementById('model-selector');
-            modelFiles.forEach(file => {
                 const btn = document.createElement('button');
-                btn.innerText = file.replace('.glb', '');
-                btn.className = 'model-button px-4 py-2 bg-gray-700 text-white rounded-md font-semibold border-2 border-transparent';
-                btn.dataset.model = file;
-                btn.onclick = () => loadModel(file);
                 modelSelector.appendChild(btn);
             });
         }
-        function updateActiveThumbnail(activePath) {
             document.querySelectorAll('.gallery-thumbnail').forEach(thumb => {
-                thumb.classList.toggle('active-thumbnail', thumb.dataset.path === activePath);
             });
         }
         function updateActiveModelButton(activeModel) {
-             document.querySelectorAll('.model-button').forEach(btn => {
                 btn.classList.toggle('active-model', btn.dataset.model === activeModel);
-                btn.classList.toggle('bg-blue-600', btn.dataset.model === activeModel);
-                btn.classList.toggle('bg-gray-700', btn.dataset.model !== activeModel);
             });
         }

 <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; }
+        /* 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>
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+        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;
             renderer.outputEncoding = THREE.sRGBEncoding;
             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';
+            setTimeout(() => mainLoader.style.display = 'none', 500);
+            window.addEventListener('resize', onWindowResize);
             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);
             });
         }