Nachfolgend finden Sie Informationen und Empfehlungen für die Arbeit mit dem GLB/USD-Export aus KeyShot, um ihn in eine Website einzubetten oder die AR-Anzeige vorzubereiten:
Betten Sie ein 3D-Modell (GLB) ein, um es mit im Browser oder auf Mobilgeräten anzuzeigen
Die Verwendung von <model-viewer> zum Einbetten von GLB-Dateien bietet die größte Kompatibilität zum Anzeigen von 3D-Modellen im Web und in AR. <model-viewer> ist eine Webkomponente, die Folgendes bereitstellt:
- Interaktive 3D-Modellansicht im Browser
- Quelllink zum Anzeigen von GLB auf Android-Geräten
- Quelllink zum Anzeigen von USD auf iOS-Geräten
- und viele andere Attribute
Wie bette ich ein 3D-Modell (GLB) ein?
Mit KeyShot können Sie eine GLB-Datei exportieren, die auf verschiedene Weise verwendet werden kann. Dies ermöglicht Ihnen zusammen mit <model-viewer> das Einbetten von 3D-Modellen auf Ihrer Webseite, um die Anzeige von 3D-Modellen sowohl auf Desktop- als auch auf mobilen Browsern sowie AR-Anzeige für unterstützte iOS- und Android-Mobilgeräte zu ermöglichen.
Was Sie brauchen
- Eine aus KeyShot exportierte GLB-Datei Gehen Sie in KeyShot Pro zu Datei, Exportieren und wählen Sie Nach GLB/GLTF exportieren. Wenn Sie eine Option zum Anzeigen des Modells in AR auf iOS-Geräten bereitstellen möchten, exportieren Sie auch eine USD-Datei mit der gleichen Methode, indem Sie Export, Export to USD auswählen.
- Der <model-viewer>-Einbettungscode Dies ist ein einfacher Einbettungscode, der wie jeder andere HTML-Code verwendet wird. Fügen Sie dies einfach im HTML-Code an der Stelle auf Ihrer Webseite hinzu, an der Sie das 3D-Modell anzeigen möchten. Weitere Informationen zu Verwendung und Attributen finden Sie unter modelviewer.dev. Als Beispiel der Code, der zum Einbetten des 3D-Modells auf keyshot.com/envoy/ verwendet wird:
Anmerkungen:
- Ersetzen Sie die src-URLs durch den entsprechenden Speicherort Ihrer GLB-, USD- und Bilddateien (jpg, png, gif usw.).
- Der Speicherort Ihrer Dateien muss sich in derselben Domäne befinden, in der Sie das 3D-Modell anzeigen. Wenn Ihr Modell nicht angezeigt wird, wenden Sie sich bitte an Ihren Host oder Webadministrator, um sicherzustellen, dass Cross-Origin Resource Sharing (CORS) für Ihre Website aktiviert ist.
Bereitstellung eines einzigen QR-Codes für iOS und Android
Dies kann mit einer einfachen HTML-Datei mit Header-Weiterleitungen für verschiedene mobile Geräte/Browser erfolgen. Ein Beispiel dieser Datei (für die Seite http://keyshot.com/envoy/ kann hier heruntergeladen werden.
- Laden Sie diese Datei auf Ihren Webserver hoch
- Verwenden Sie einen kostenlosen QR Code Generator um Ihren QR-Code mit dem Speicherort Ihrer HTML-Datei als URL zu erstellen.
Bereitstellung eines einzigen Links für iOS und Android
Dies kann mit einer ähnlichen Webkomponente wie <model-viewer> erfolgen, genannt <ar-button>, die von Leonardo Cavaletti erstellt wurde und auf GitHub verfügbar ist.
Ein Beispiel, wieder von der http://keyshot.com/envoy Seite:
<script type="module" src="https://unpkg.com/@leoncvlt/ar-button"></script> <ar-button src="https://media.keyshot.com/scenes/envoy/envoy.glb" ios-src="https://media.keyshot.com/scenes/envoy/envoy.usdz" link="https://manual.keyshot.com/keyshot11/envoy" title="3D view of the Envoy Helmet">Click to view in your space!</ar-button>Anforderungen das Anzeigen auf Geräten
So zeigen Sie Modelle auf iOS-Geräten mit AR Quick Look an:
- Ein iOS-Gerät mit iOS 11.0 oder höher oder A9 oder höher Prozessor.
- USD-Dateigrößenbeschränkungen: Größere Dateigrößen von komplexen Texturen und großen Bildern können sich auf die Ladezeiten auswirken. Wir empfehlen weniger als 50 MB für ein optimales Erlebnis.
- Siehe die von Apple bereitgestellten USDZ examples als Referenz
Um einen GLB in AR auf Android-Geräten mit Scene Viewer anzuzeigen, muss das Gerät:
- Ein ARCore-unterstütztes Gerät auf Android 7.0 und höher sein
- Eine aktuelle Version von Google Play Services for AR haben
- Eine aktuelle Version der Google app haben
- Größenbeschränkungen für GLB-Dateien: max. 15 MB (10 MB empfohlen); Maximal 100.000 Dreiecke (obwohl Dateien mit mehr Dreiecken unterhalb der 15-MB-Schwelle funktionieren könnten).
Wenn die oben genannten Bedingungen erfüllt sind, sollte die AR-Ansicht auf dem Mobilgerät erscheinen. Wenn nicht, wird es entweder die Datei herunterladen, zum Herunterladen der Datei auffordern oder (für Android) zum Google Play Service für AR im Google Play Store gehen.