In februari hebben we de webcomponent <model-viewer> geïntroduceerd, waarmee u declaratief een 3D-model aan een webpagina kunt toevoegen, terwijl u het model op uw eigen site host. Eén ding dat het niet ondersteunde, was augmented reality. Dat wil zeggen dat u de bronafbeelding van het onderdeel niet bovenop de camerafeed van een apparaat kunt weergeven.
Om dat te doen, hebben we sindsdien ondersteuning toegevoegd voor Magic Leap en Quick Look op iOS. Nu kondigen we ondersteuning aan voor AR op Android met de toevoeging van het ar attribuut. Dit kenmerk is gebouwd op een nieuwe ARCore-functie genaamd Scene Viewer, een externe app voor het bekijken van 3D-modellen. Voor meer informatie over Scene Viewer, ga naar 3D-modellen bekijken in AR vanuit een Android-browser .
Laten we eens kijken hoe we augmented reality kunnen gebruiken met <model-viewer> .
Het attribuut
Voor het gebruik van een webcomponent is, zoals u zich wellicht herinnert, geen speciale kennis vereist. Het gedraagt zich als een standaard HTML-element, met een unieke tag, eigenschappen en methoden. Nadat u het met een <script> -tag hebt geïnstalleerd , gebruikt u het zoals elk ander HTML-element.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Dit lijkt veel op wat ik in mijn eerdere artikel had. Let op wat ik helemaal aan het einde heb benadrukt. Dat is het nieuwe attribuut.
De nieuwe versie installeren
Als u <model-viewer> al gebruikt, importeert u de component waarschijnlijk met behulp van de <script> -tags, precies zoals weergegeven in de documentatie . We zijn voortdurend bezig met verbeteringen. Als u nieuwe functies wilt testen voordat u opzettelijk een upgrade uitvoert en implementeert, moet u een specifieke versie van <model-viewer> installeren. Om dit te doen, voegt u het versienummer toe aan de bestands-URL's, zoals hieronder weergegeven. Bekijk vervolgens de releasepagina voor updates.
<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>
Conclusie
Probeer de nieuwe versie van <model-viewer> eens en laat ons weten wat u ervan vindt. Problemen en feedback zijn welkom op GitHub .