Allows users to view, edit & place GLB/GLTF Models on their website.
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.
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. |
- Go to the GLB/GLTF Model Viewer & Editor.
- Drag & drop or browse for your GLB/GLTF Model.
- Add hotspots, edit them & play around with the functions till you have your desired model.
- Click on Create Snippet.
- Place the scripts inside your head tag.
- Place the model viewer inside your body tag.
- Place the css inside your stylesheet.
- Set the src="" inside the model-viewer tag to the folder that the model is in.
- 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.
Consult google's model-viewer respository and their Apache License 2.0