Hugging Face's logo

Spaces:
Surn
/
3D-Viewer
Running

App Files Community
3D-Viewer / README.md
Surn's picture
Surn
Finalize storage code
d8c5068
preview code
|
raw
history blame
3.15 kB
metadata
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 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

  1. Run the Application:

    Start the app by executing:

python app.py

  1. 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