I am trying to embed a .GLB 3d model file into my website using Google model-viewer.js library but I keep getting the following JS error in the console with no model loaded:
model-viewer.js:43597 Error: fetch for "http://example.com/en/tour/equipment/[object%20Object]" responded with 404: Not Found
at model-viewer.js:32355:12
Here is the HTML markup I am using
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/images/models/docking-station-model.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="/images/models/poster.webp" shadow-intensity="1.29" environment-image="legacy" exposure="1.14" shadow-softness="1">
<div class="progress-bar hide" slot="progress-bar">
<div class="update-bar"></div>
</div>
<button slot="ar-button" id="ar-button">
View in your space
</button>
<div id="ar-prompt">
<img src="https://modelviewer.dev/shared-assets/icons/hand.png">
</div>
</model-viewer>
The model itself loads fine when I use the online editor at https://modelviewer.dev/editor/
I have tried Chrome and Safari / moving script to header / hosting on external CDN / referencing the example models on modelviewer.dev...not sure what else to try?
