49 lines
1.9 KiB
HTML
49 lines
1.9 KiB
HTML
{% 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 %}
|