Augmented Reality mit Modellansicht

Im Februar haben wir die Webkomponente <model-viewer> vorgestellt, mit der Sie einer Webseite deklarativ ein 3D-Modell hinzufügen können, während das Modell auf Ihrer eigenen Website gehostet wird. Eine Sache, die es nicht unterstützt hat, war Augmented Reality. Das heißt, Sie konnten das Quellbild der Komponente nicht über den Kamerafeed eines Geräts rendern.

Deshalb unterstützen wir inzwischen den Magischen Leap-Modus und die Schnellansicht unter iOS. Durch das Hinzufügen des Attributs ar geben wir jetzt die Unterstützung für AR unter Android bekannt. Dieses Attribut basiert auf einer neuen ARCore-Funktion namens Scene Viewer, einer externen App zum Ansehen von 3D-Modellen. Weitere Informationen zum Scene Viewer finden Sie unter 3D-Modelle in AR über einen Android-Browser ansehen.

Mars Rover

Sehen wir uns an, wie du mit <model-viewer> Augmented Reality nutzen kannst.

Das Attribut

Wie Sie sich vielleicht erinnern, sind für die Verwendung einer Webkomponente keine speziellen Kenntnisse erforderlich. Es verhält sich wie ein standardmäßiges HTML-Element und hat ein eindeutiges Tag sowie Eigenschaften und Methoden. Nach der Installation mit einem <script>-Tag können Sie es wie jedes andere HTML-Element verwenden.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

Es sieht im Großen und Ganzen genauso aus wie in meinem vorherigen Artikel. Beachten Sie, was ich ganz am Ende hervorgehoben habe. Das ist das neue Attribut.

Neue Version installieren

Wenn Sie <model-viewer> bereits verwenden, importieren Sie die Komponente wahrscheinlich genau mit den <script>-Tags wie in der Dokumentation gezeigt. Wir nehmen ständig Verbesserungen vor. Wenn Sie neue Features testen möchten, bevor Sie ein gezieltes Upgrade und Deployment ausführen, sollten Sie eine bestimmte Version von <model-viewer> installieren. Fügen Sie dazu den Datei-URLs die Versionsnummer hinzu, wie unten gezeigt. Aktualisierungen finden Sie auf der Seite „Releases“.

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

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

Fazit

Probiere die neue Version von <model-viewer> aus und sag uns, was du davon hältst. Probleme und Feedback sind auf GitHub willkommen.