Mika Way

Just another WordPress site

Example 3D Model Viewer Implementation

https://modelviewer.dev/

glTF/GLB 3D models files only

Test it here: https://modelviewer.dev/editor/

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>

Examples

<script type="module" 
src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<model-viewer camera-controls alt="A 3D model of a cafe" src="https://mikaway.com/wp-content/uploads/3d-models/forest_themed_battle_Mage_0330194933_refine.glb" auto-rotate>
</model-viewer>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<model-viewer auto-rotate camera-controls alt="A 3D model of a cafe" src="https://mikaway.com/wp-content/uploads/3d-models/childrens-room-glb.glb" auto-rotate poster="https://mikaway.com/wp-content/uploads/2024/06/room.1.jpg">
</model-viewer>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<model-viewer camera-controls alt="A 3D model of a cafe" src="https://mikaway.com/wp-content/uploads/3d-models/forest_themed_Mage_staff_with_horns_0330162114_refine.glb" auto-rotate>
</model-viewer>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

<model-viewer auto-rotate camera-controls alt="A 3D model of a Hac-man" src="http://kaizenapps-wordpress.super-tech.ai/wp-content/uploads/3dmodels/Hackman_3D_Model.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls tone-mapping="neutral" poster="http://kaizenapps-wordpress.super-tech.ai/wp-content/uploads/2024/06/Hackman-Image.png" shadow-intensity="1"> </model-viewer>

Leave a Reply

Your email address will not be published. Required fields are marked *