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
