File size: 3,153 Bytes
be9ab0b d8c5068 0a4421d be9ab0b 0a4421d be9ab0b 7f0bd23 be9ab0b |
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
---
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
|