Initial commit

_includes/item/3d-model-viewer.html

@@ -0,0 +1,48 @@
+{% comment %}
+
+    Embed an interactive viewer to display 3d model files in glTF/GLB format (.glb or .gltf).
+    Uses the model-viewer component, https://modelviewer.dev/
+    This assumes that the item's object_location is a .glb or .gltf file. 
+    If an image_small is set in the metadata, that image is used as a "poster" and model is not loaded until user clicks. 
+    
+{% endcomment %}
+<!-- import model-viewer component from CDN -->
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
+{% if page.image_small %}
+<style>
+    /* add styles for poster image and load button */
+    #poster-image {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background-image: url("{{ page.image_small | relative_url }}");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        cursor: pointer;
+    }
+    #load-model-btn {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+    }
+</style>{% endif %}
+<!-- add 3d viewer to page -->
+<div class="ratio ratio-4x3">
+    <model-viewer id="item-model-viewer" alt="{{ page.image_alt_text | default: page.description | default: page.title | escape }}" src="{{ page.object_location | relative_url }}"  shadow-intensity="1" camera-controls touch-action="pan-y" {% if page.image_small %}reveal="manual"{% endif %}>
+        {% if page.image_small %}
+        <div id="poster-image" slot="poster"></div>
+        <button id="load-model-btn" class="btn btn-lg btn-primary" slot="poster">Load 3D Model</button>
+        {% endif %}
+    </model-viewer>
+</div>
+{% if page.image_small %}
+<script>
+    /* load model on user click */ 
+    var itemModelViewer = document.querySelector('#item-model-viewer');
+    itemModelViewer.addEventListener('click', () => itemModelViewer.dismissPoster());
+</script>
+{% endif %}