Augmented Reality mit <Modell-Viewer>

Die Webkomponente „<model-viewer>“ kann verwendet werden, um 3D-Modelle im Web anzusehen und mit ihnen zu interagieren. Sie wechselt nahtlos zur Platzierung und Interaktion mit diesen 3D-Modellen in Augmented Reality im Web.

Auf einem Android-Gerät mit ARCore-Unterstützung zeigt eine <model-viewer>-Komponente mit dem Attribut ar eine Schaltfläche an, wie im folgenden Beispiel gezeigt:

Screenshot des Modell-Viewers

Durch Tippen auf diese Schaltfläche auf Geräten, die von ARCore unterstützt werden, wird das Modell je nach Wert des Attributs ar-modes über die WebXR-Funktion von Chrome oder die Scene Viewer App angezeigt.

Das Erscheinungsbild der AR-Schaltfläche kann mithilfe von Slots für Webkomponenten angepasst werden. Ein Beispiel finden Sie unter <model-viewer> documentation. Weitere Informationen zum Anzeigen interaktiver 3D-Modelle in AR über eine Android-App oder einen Android-Browser finden Sie unter Scene Viewer.

Erste Schritte mit <model-viewer>

Im Folgenden wird beschrieben, wie Sie <model-viewer> auf einer beliebigen Webseite verwenden.

<model-viewer>-Abhängigkeit hinzufügen

Aus entpkg-CDN

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Von npm

npm install @google/model-viewer

Fügen Sie dann <model-viewer> unter node_modules/model-viewer/dist/model-viewer.min.js mit Ihrem bevorzugten Bundler hinzu.

<model-viewer>-Tag einfügen

Fügen Sie Ihrem HTML-Dokument die Webkomponente <model-viewer> hinzu:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

<model-viewer>-Tag konfigurieren

Die Modellanzeige kann durch Ändern der Attribute im <model-viewer>-Tag konfiguriert werden. Diese Eigenschaften ermöglichen die Bereitstellung von Optionen wie Kamerabewegung, Modellanimationen und Umgebungsinformationen. In der <model-viewer>-Dokumentation sind alle Attribute aufgeführt, die festgelegt werden können. Mit dem Modelleditor können Sie ein <model-viewer>-HTML-Tag generieren und Eigenschaften wie Kameraposition und Beleuchtung konfigurieren.

Screenshot des Modelleditors

Modellkompatibilität

Modelle im Dateiformat gltf und glb werden von <model-viewer> unterstützt. Eine Liste der unterstützten glTF-Erweiterungen finden Sie in three.js GLTFLoader documentation.

Um sicherzustellen, dass Ihr Modell korrekt angezeigt wird, überprüfen Sie es im Modelleditor.

Unterstützte Browser und Geräte

Die Verwendung von <model-viewer> zur Darstellung von 3D-Modellen auf einer Webseite wird in allen gängigen Browsern unterstützt. Wir empfehlen die Verwendung von :focus-visible-Polyfill, um Fokusringe auszublenden, wenn das Element fokussiert ist.

AR-Funktionen erfordern ein mit ARCore unterstütztes Gerät und die Installation von Google Play-Diensten für AR. Informationen zum AR-Modus von webxr findest du unter WebXR-Browserunterstützung. Wenn WebXR nicht unterstützt wird, wird standardmäßig der Scene Viewer verwendet.

Nächste Schritte