Spaces:
Running
Running
| title: Drones | |
| emoji: 🚀 | |
| colorFrom: pink | |
| colorTo: indigo | |
| sdk: static | |
| pinned: false | |
| # [Definitive 3D Viewer](https://huggingface.co/spaces/aaurelions/drones) | |
| This project is an advanced, web-based 3D model viewer built with Three.js and styled with Tailwind CSS. It allows users to dynamically load and view various 3D models (`.glb` files) against a selection of 360-degree panoramic backgrounds. The interface is designed to be clean and intuitive, featuring slide-in panels for model and panorama selection. | |
| ## Features | |
| - **Dynamic Model Loading**: Load 3D models on-demand without reloading the page. | |
| - **Multiple Model Support**: Easily switch between a predefined list of 3D models. | |
| - **Panoramic Backgrounds**: Change the environment and background with a selection of 360° panoramic images. | |
| - **Interactive Controls**: Utilizes OrbitControls for intuitive camera manipulation (zoom, pan, rotate). | |
| - **Responsive Design**: The viewer and UI adapt to different screen sizes. | |
| - **Glassmorphism UI**: Modern user interface with a blurred, semi-transparent "glass" effect. | |
| - **Loading Indicators**: A main initializer and a loading overlay provide feedback to the user during asset loading. | |
| - **Optimized Rendering**: Leverages `powerPreference: "high-performance"` for better performance on capable hardware. | |
| - **Clean File Structure**: Organizes models and images in a clear and understandable way. | |
| ## Technologies Used | |
| - [Three.js](https://threejs.org/) (r160) for 3D rendering. | |
| - [Tailwind CSS](https://tailwindcss.com/) for styling the user interface. | |
| - [Inter](https://rsms.me/inter/) font family. | |
| ## Project Structure | |
| To run this project, you need to organize your asset files as follows. The viewer expects a specific folder structure to locate the 3D models and panoramic images. | |
| ``` | |
| . | |
| ├── index.html # The main HTML file for the viewer | |
| ├── glb/ # Folder for 3D models | |
| │ ├── gerbera.glb | |
| │ ├── shahed1.glb | |
| │ ├── shahed2.glb | |
| │ ├── shahed3.glb | |
| │ ├── supercam.glb | |
| │ ├── zala.glb | |
| │ └── beaver.glb | |
| └── jpg/ # Folder for panoramic images and their thumbnails | |
| ├── bg1.jpg | |
| ├── bg2.jpg | |
| | ... | |
| └── thumbnails/ | |
| ├── bg1.jpg | |
| ├── bg2.jpg | |
| └── ... | |
| ``` | |
| ## How to Use | |
| - **View the Model**: Click and drag on the canvas to rotate the camera around the model. Use the scroll wheel to zoom in and out. Right-click and drag to pan the camera. | |
| - **Switch Models**: Click the cube icon on the left edge of the screen to open the "Models" panel. Select a model from the list to load it into the scene. | |
| - **Change Panorama**: Click the image icon on the right edge of the screen to open the "Panoramas" panel. Select a thumbnail to change the 360° background and environment lighting. | |
| - **Close Panels**: Click the 'X' button in a panel or click anywhere on the 3D canvas to close any open panels. |