Im Februar haben wir die <model-viewer>-Webkomponente eingeführt.
Damit können Sie einer Webseite deklarativ ein 3D-Modell hinzufügen und gleichzeitig
auf Ihrer eigenen Website erstellen. Augmented Reality wurde dabei nicht unterstützt. Das
Sie konnten das Quellbild der Komponente nicht über dem
Kamerafeed.
Aus diesem Grund unterstützen wir nun auch Magic Leap und Quick Look für iOS. Jetzt
Mit dem neuen ar unterstützen wir AR unter Android.
. Dieses Attribut basiert auf einer neuen ARCore-Funktion namens „Scene Viewer“.
eine externe App zur Anzeige von 3D-Modellen. Weitere Informationen zum Ambiente-Viewer
Weitere Informationen finden Sie unter 3D-Modelle in AR in einem Android-Browser ansehen.
Sehen wir uns an, wie Augmented Reality mit <model-viewer> funktioniert.
Das Attribut
Wie Sie sich vielleicht erinnern, sind für die Verwendung von Webkomponenten keine besonderen Kenntnisse erforderlich. Es
verhält sich wie ein Standard-HTML-Element und hat ein eindeutiges Tag sowie Eigenschaften
und Methoden. Nachher
mit einem <script>-Tag installieren,
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>
Das sieht genauso aus wie in meinem vorherigen Artikel. Achte auf das Ding ganz am Ende hervorgehoben. Das ist das neue Attribut.
Die neue Version wird installiert
Wenn Sie <model-viewer> bereits verwenden, importieren Sie wahrscheinlich gerade die Komponente
mit den <script>-Tags exakt
wie in der Dokumentation beschrieben.
Wir arbeiten ständig an Verbesserungen. Wenn Sie neue Funktionen
oder gezielt aktualisieren und bereitstellen, können Sie eine bestimmte Version
von <model-viewer>. Fügen Sie dazu die Versionsnummer wie in der Abbildung gezeigt zu den Datei-URLs hinzu.
unten. Sehen Sie sich dann
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
Probieren Sie die neue Version von <model-viewer> aus und teilen Sie uns Ihre Meinung mit.
Probleme und Feedback sind
Willkommen auf GitHub.