Apppublic

aaurelions/drones

sourceHugging Faceupdated 1y agoView on Hugging Face

0likes

App README

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.