Hugging Face's logo

Spaces:
aaurelions
/
drones
Running

App Files Community
drones
File size: 3,021 Bytes 
10d21c8
 
f73b7e4
10d21c8
 
 
 
 
 
169c425
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
---
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.