Spaces:

aaurelions
/

drones

Running

App Files Files Community

aaurelions commited on Jul 24, 2025

Commit

ba416c3

verified ·

1 Parent(s): 10d21c8

Update index.html

Browse files

Files changed (1) hide show

index.html +215 -19

index.html CHANGED Viewed

@@ -1,19 +1,215 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<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>
+    </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';
+        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);
+            });
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        init();
+    </script>
+</body>
+</html>