README.md

metadata

title: Drones
emoji: 🚀
colorFrom: pink
colorTo: indigo
sdk: static
pinned: false

Definitive 3D Viewer

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 (r160) for 3D rendering.
• Tailwind CSS for styling the user interface.
• 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.