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