|
|
--- |
|
|
title: 3D Viewer |
|
|
emoji: 🐢 |
|
|
colorFrom: yellow |
|
|
colorTo: green |
|
|
sdk: gradio |
|
|
sdk_version: 5.29.0 |
|
|
python_version: 3.12.8 |
|
|
license: apache-2.0 |
|
|
app_file: app.py |
|
|
pinned: false |
|
|
short_description: A very simple 3D ply and glb viewer with link loading |
|
|
hf_oauth: true |
|
|
fullWidth: true |
|
|
thumbnail: >- |
|
|
https://cdn-uploads.huggingface.co/production/uploads/6346595c9e5f0fe83fc60444/s0fQvcoiSBlH36AXpVwPi.png |
|
|
--- |
|
|
|
|
|
# 3D Viewer |
|
|
|
|
|
**3D Viewer** is a lightweight web application built with [Gradio](https://gradio.app) that allows users to view 3D models along with their corresponding height map and source images. The app dynamically loads these resources by parsing URL query string parameters, providing a seamless and interactive experience. |
|
|
|
|
|
## Features |
|
|
|
|
|
- **3D Model Display:** |
|
|
Uses `gr.Model3D` to render 3D models dynamically from a URL parameter (`3d`). |
|
|
|
|
|
- **Image Slider:** |
|
|
Displays images (height map and source image) using `gr.ImageSlider`. The images are loaded via URL query parameters named `hm` (height map) and `image` (source image). |
|
|
|
|
|
- **File Upload:** |
|
|
Includes an `gr.UploadButton` for uploading new file types like `.glb`, `.gltf`, `.obj`, `.png`, `.jpg`, and `.ply`. |
|
|
|
|
|
- **Custom Theming:** |
|
|
The interface is styled with the `Surn/Beeuty` theme to ensure a modern and cohesive look. |
|
|
|
|
|
## How It Works |
|
|
|
|
|
- **Query String Parsing:** |
|
|
While running in Gradio, since the Python callback does not operate within a conventional HTTP request context, the app retrieves query string values by using client-side JavaScript. This JavaScript snippet captures the URL parameters and passes them to the Python callback, which then updates the components accordingly. |
|
|
|
|
|
- **Static Paths:** |
|
|
The app sets static paths for directories such as `images/`, `models/`, and `assets/` for accessing local resources. |
|
|
|
|
|
## Getting Started |
|
|
|
|
|
1. **Install Dependencies:** |
|
|
|
|
|
Ensure you have Python 3.12.8 installed and install Gradio (v5.29.0 or compatible): |
|
|
|
|
|
```pip install gradio==5.29.0``` |
|
|
|
|
|
|
|
|
2. **Run the Application:** |
|
|
|
|
|
Start the app by executing: |
|
|
|
|
|
```python app.py``` |
|
|
|
|
|
|
|
|
3. **Use the Query String:** |
|
|
|
|
|
After launching, the app can load specific resources if you pass the following query parameters in the URL: |
|
|
|
|
|
- `3d`: URL for the 3D model (e.g., `?3d=https://example.com/model.glb`) |
|
|
- `hm`: URL for the height map image (e.g., `?hm=https://example.com/heightmap.png`) |
|
|
- `image`: URL for the source image (e.g., `?image=https://example.com/source.png`) |
|
|
|
|
|
Example URL: |
|
|
|
|
|
```http://localhost:7860/?3d=https://example.com/model.glb&hm=https://example.com/heightmap.png&image=https://example.com/source.png``` |
|
|
|
|
|
|
|
|
## Project Structure |
|
|
|
|
|
- **app.py:** |
|
|
The core application script defining the Gradio interface, callbacks, and dynamic query string processing. |
|
|
|
|
|
- **README.md:** |
|
|
This documentation file outlining the project details and configuration. |
|
|
|
|
|
- **assets, images, models:** |
|
|
Directories containing static resources such as images, 3D models, and other assets. |
|
|
|
|
|
## License |
|
|
|
|
|
This project is licensed under the Apache-2.0 license. |
|
|
|
|
|
|
|
|
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference |
|
|
|
