Im Februar haben wir die <model-viewer>-Webkomponente eingeführt, mit der Sie einer Webseite deklarativ ein 3D‑Modell hinzufügen und das Modell auf Ihrer eigenen Website hosten können. Augmented Reality wurde jedoch nicht unterstützt. Das bedeutet, dass das Quellbild der Komponente nicht über dem Kamerafeed eines Geräts gerendert werden konnte.
Dazu haben wir die Unterstützung für Magic Leap und Quick Look auf iOS hinzugefügt. Jetzt kündigen wir die Unterstützung von AR auf Android-Geräten an und fügen das Attribut ar hinzu. Dieses Attribut basiert auf einer neuen ARCore-Funktion namens „Scene Viewer“, einer externen App zur Anzeige von 3D-Modellen. Weitere Informationen zu Scene Viewer finden Sie unter 3D‑Modelle in AR über einen Android-Browser ansehen.
Sehen wir uns an, wie Sie mit <model-viewer> Augmented Reality nutzen.
Das Attribut
Wie Sie sich erinnern werden, erfordert die Verwendung einer Webkomponente keine besonderen Kenntnisse. Es verhält sich wie ein Standard-HTML-Element und hat ein eindeutiges Tag sowie Eigenschaften und Methoden. Nachdem du es mit einem <script>-Tag installiert hast, kannst du 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>
Das sieht fast genauso aus wie in meinem vorherigen Artikel. Ganz am Ende habe ich das hervorgehoben. Das ist das neue Attribut.
Die neue Version wird installiert
Wenn Sie <model-viewer> bereits verwenden, importieren Sie die Komponente wahrscheinlich mit den <script>-Tags, genau wie in der Dokumentation beschrieben.
Wir arbeiten ständig an Verbesserungen. Wenn Sie neue Features vor dem gezielten Upgrade und Bereitstellen testen möchten, sollten Sie eine bestimmte Version von <model-viewer> installieren. Fügen Sie dazu die Versionsnummer wie unten gezeigt den Datei-URLs hinzu. Informationen zu Updates finden Sie dann auf der Releaseseite.
<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
Probieren Sie die neue Version von <model-viewer> aus und lassen Sie uns wissen, was Sie davon halten.
Probleme und Feedback sind auf GitHub willkommen.