3D Bilder über Keyshot mit eigenem modelviewer einbinden

Shopware 6 (German) Allgemein
1

Hallo,

ich versuche gerade eine 3D Darstellung im Produktbild einzubinden. Die Standardanzeige sieht hier nicht gut aus, somit wird versucht den Viewer von google zu verwenden. Hierzu wurde die Bibliothek in den head Bereich geladen. Und folgende Blöcke verändert. Verwendete Version 6.7.4.0

{% block element_image_gallery_inner_item_spatial_canvas %}
    <div class="gallery-slider-spatial-canvas-wrapper position-absolute start-0 end-0 top-0 bottom-0">
        {# WICHTIG: Ersetze die environment-image URL mit deinem Link aus dem Medien-Manager #}
        <model-viewer
            src="{{ image.url }}"
            poster="{{ image.previewUrl }}"
            alt="{{ image.translated.alt }}"
            environment-image="HIER_DEINE_ECHTE_URL_EINFUEGEN"
            exposure="1.0"
            shadow-intensity="1.5"
            shadow-softness="0.8"
            camera-controls
            auto-rotate
            disable-zoom
            interaction-prompt="none"
            style="width: 100%; height: 100%; display: block;"
        >
            <div slot="progress-bar"></div>
        </model-viewer>
    </div>
{% endblock %}

{% block element_image_gallery_inner_single_spatial_canvas %}
    <div class="gallery-slider-spatial-canvas-wrapper position-absolute start-0 end-0 top-0 bottom-0">
        {# WICHTIG: Ersetze die environment-image URL mit deinem Link aus dem Medien-Manager #}
        <model-viewer
            src="{{ image.url }}"
            poster="{{ image.previewUrl }}"
            alt="{{ image.translated.alt }}"
            environment-image="HIER_DEINE_ECHTE_URL_EINFUEGEN"
            exposure="1.2"
            shadow-intensity="1.5"
            shadow-softness="0.8"
            camera-controls
            auto-rotate
            ar
            ar-modes="webxr scene-viewer quick-look"
            style="width: 100%; height: 100%; display: block;"
        >
             <button slot="ar-button" class="btn btn-primary" style="position: absolute; bottom: 16px; right: 16px;">
                  AR Ansicht
             </button>
        </model-viewer>
    </div>
{% endblock %}

Und dieser für das Vollbild

{% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container_spatial_canvas %}
    <div class="gallery-slider-spatial-canvas-wrapper position-absolute start-0 end-0 top-0 bottom-0">
         <model-viewer
            src="{{ image.url }}"
            poster="{{ image.previewUrl }}"
            alt="{{ image.translated.alt }}"
            environment-image="HIER_DEINE_ECHTE_URL_EINFUEGEN"
            exposure="1.2"
            shadow-intensity="1.5"
            camera-controls
            style="width: 100%; height: 100%; display: block;"
        ></model-viewer>
    </div>
{% endblock %}

Leider wird nun nur noch das Vorschaubild angezeigt und das 3D Bild überhaupt nicht mehr. Hat jemand eine Idee wie das 3D Bild angezeigt werden kann?