<model-viewer src="Babylon trench.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="poster.webp" shadow-intensity="1" environment-image="aircraft_workshop_01_1k.hdr" skybox-image="aircraft_workshop_01_1k.hdr">
    <button class="Hotspot" slot="hotspot-1" data-position="-0.5264537388792274m 0.21790788300279162m 1.9213549664722274m" data-normal="0.9999999999999856m 1.199999999923467e-7m 1.200000072643084e-7m" data-visibility-attribute="visible">
        <div class="HotspotAnnotation">Trench Shield</div>
    </button><button class="Hotspot" slot="hotspot-2" data-position="-0.4844489137219216m 0.7435121603785728m -0.07546415668517148m" data-normal="0.8040605938912597m 0.1565063639382953m 0.5735785206909761m" data-visibility-attribute="visible">
        <div class="HotspotAnnotation">Ladder</div>
    </button><button class="Hotspot" slot="hotspot-3" data-position="-0.6040128024160154m -0.8304450984851051m 5.440413795635003m" data-normal="0.9946839695088687m 0.10253788006144426m -0.009475439545728718m" data-visibility-attribute="visible">
        <div class="HotspotAnnotation">1.5 metre deep trench</div>
    </button>
    <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>
