Spaces:
Running
Running
Update README.md
Browse files
README.md
CHANGED
|
@@ -7,4 +7,60 @@ sdk: static
|
|
| 7 |
pinned: false
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
pinned: false
|
| 8 |
---
|
| 9 |
|
| 10 |
+
Of course, here is a README file for your project.
|
| 11 |
+
|
| 12 |
+
---
|
| 13 |
+
|
| 14 |
+
# [Definitive 3D Viewer](https://huggingface.co/spaces/aaurelions/drones)
|
| 15 |
+
|
| 16 |
+
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.
|
| 17 |
+
|
| 18 |
+
## Features
|
| 19 |
+
|
| 20 |
+
- **Dynamic Model Loading**: Load 3D models on-demand without reloading the page.
|
| 21 |
+
- **Multiple Model Support**: Easily switch between a predefined list of 3D models.
|
| 22 |
+
- **Panoramic Backgrounds**: Change the environment and background with a selection of 360° panoramic images.
|
| 23 |
+
- **Interactive Controls**: Utilizes OrbitControls for intuitive camera manipulation (zoom, pan, rotate).
|
| 24 |
+
- **Responsive Design**: The viewer and UI adapt to different screen sizes.
|
| 25 |
+
- **Glassmorphism UI**: Modern user interface with a blurred, semi-transparent "glass" effect.
|
| 26 |
+
- **Loading Indicators**: A main initializer and a loading overlay provide feedback to the user during asset loading.
|
| 27 |
+
- **Optimized Rendering**: Leverages `powerPreference: "high-performance"` for better performance on capable hardware.
|
| 28 |
+
- **Clean File Structure**: Organizes models and images in a clear and understandable way.
|
| 29 |
+
|
| 30 |
+
## Technologies Used
|
| 31 |
+
|
| 32 |
+
- [Three.js](https://threejs.org/) (r160) for 3D rendering.
|
| 33 |
+
- [Tailwind CSS](https://tailwindcss.com/) for styling the user interface.
|
| 34 |
+
- [Inter](https://rsms.me/inter/) font family.
|
| 35 |
+
|
| 36 |
+
## Project Structure
|
| 37 |
+
|
| 38 |
+
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.
|
| 39 |
+
|
| 40 |
+
```
|
| 41 |
+
.
|
| 42 |
+
├── index.html # The main HTML file for the viewer
|
| 43 |
+
├── glb/ # Folder for 3D models
|
| 44 |
+
│ ├── gerbera.glb
|
| 45 |
+
│ ├── shahed1.glb
|
| 46 |
+
│ ├── shahed2.glb
|
| 47 |
+
│ ├── shahed3.glb
|
| 48 |
+
│ ├── supercam.glb
|
| 49 |
+
│ ├── zala.glb
|
| 50 |
+
│ └── beaver.glb
|
| 51 |
+
└── jpg/ # Folder for panoramic images and their thumbnails
|
| 52 |
+
├── bg1.jpg
|
| 53 |
+
├── bg2.jpg
|
| 54 |
+
| ...
|
| 55 |
+
└── thumbnails/
|
| 56 |
+
├── bg1.jpg
|
| 57 |
+
├── bg2.jpg
|
| 58 |
+
└── ...
|
| 59 |
+
```
|
| 60 |
+
|
| 61 |
+
## How to Use
|
| 62 |
+
|
| 63 |
+
- **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.
|
| 64 |
+
- **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.
|
| 65 |
+
- **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.
|
| 66 |
+
- **Close Panels**: Click the 'X' button in a panel or click anywhere on the 3D canvas to close any open panels.
|