Skip to content

Google's model-viewer editor with that little bit more

License

Notifications You must be signed in to change notification settings

dave-kramer/modelviewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

modelviewer

GLB/GLTF Model Viewer & Editor

License

Allows users to view, edit & place GLB/GLTF Models on their website.

Table of Contents

About

Allows users to load a GLB/GLTF model, add hotspots to it & create a snippet so they can copy the code straight to their website.

Use it here

Features

Function Information
Add hotspot Adds hotspot to loaded model.
Edit hotspot Allows user to edit the hotspot size, color & allows for annotations.
Delete hotspot Deletes hotspot from model.
Auto-rotate Enables auto-rotate.
Auto-rotate delay Sets the delay before auto-rotation begins.
Hide hotspots Hides all hotspots.
Hide dimensions Hides all dimensions.
Neutral Lighting Enables neutral lighting.
Panning Allows tapping on the model to move.
Camera Control Enables camera controls.
Disable zoom Disables zoom on the model.
Framing & Scaling Changes the orientation and scale attributes which allow the model to be transformed.
Camera view Sets camera orbit to user given degrees.
Shadows Sets shadow intensity & softness.
Interaction Sets interaction prompt & style upon loading model.
Create Snippet Allows user to copy paste model including hotspots to their website.

Usage

Using the tool

  1. Go to the GLB/GLTF Model Viewer & Editor.
  2. Drag & drop or browse for your GLB/GLTF Model.
  3. Add hotspots, edit them & play around with the functions till you have your desired model.
  4. Click on Create Snippet.

Placing it on your website

  1. Place the scripts inside your head tag.
  2. Place the model viewer inside your body tag.
  3. Place the css inside your stylesheet.
  4. Set the src="" inside the model-viewer tag to the folder that the model is in.
  5. Make sure to give the model-viewer tag or the div its in a height & width.

That's it, you can now view the model.

License

Consult google's model-viewer respository and their Apache License 2.0

Previews

About

Google's model-viewer editor with that little bit more

Topics

Resources

License

Stars

Watchers

Forks