W lutym wprowadziliśmy komponent internetowy <model-viewer>, który umożliwia deklaratywnie dodawanie modelu 3D do strony internetowej, a jednocześnie przechowywanie modelu w Twojej witrynie. Nie obsługiwała jednak rzeczywistości rozszerzonej. Oznacza to, że nie można było wyświetlić obrazu źródłowego komponentu na obrazie z kamery urządzenia.
W tym celu dodaliśmy obsługę Magic Leap i Quick Look na iOS. Ogłaszamy obsługę AR na Androidzie dzięki dodaniu atrybutu ar. Ten atrybut jest oparty na nowej funkcji ARCore o nazwie Scene Viewer, czyli zewnętrznej aplikacji do wyświetlania modeli 3D. Aby dowiedzieć się więcej o przeglądarce Scene Viewer, przeczytaj artykuł Wyświetlanie modeli 3D w AR w przeglądarce na urządzeniu z Androidem.
Zobaczmy, jak używać rzeczywistości rozszerzonej przy użyciu <model-viewer>.
Atrybut
Jak zapewne pamiętasz, komponent internetowy nie wymaga specjalnej wiedzy. Zachowuje się jak standardowy element HTML, ma unikalny tag, a także właściwości i metody. Po zainstalowaniu razem z tagiem <script> możesz używać go jak każdego innego elementu HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Wygląda to podobnie jak w moim poprzednim artykule. Zwróćcie uwagę na to, co podkreśliłam na samym końcu. To nowy atrybut.
Instalowanie nowej wersji
Jeśli korzystasz już z poziomu <model-viewer>, prawdopodobnie importujesz komponent za pomocą tagów <script> dokładnie tak, jak to zostało opisane w dokumentacji.
Cały czas wprowadzamy ulepszenia. Jeśli chcesz przetestować nowe funkcje przed ich wdrożeniem, musisz zainstalować konkretną wersję <model-viewer>. Aby to zrobić, dodaj numer wersji do adresów URL plików, jak pokazano poniżej. Następnie sprawdzaj stronę wersji, aby dowiedzieć się więcej.
<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>
Podsumowanie
Wypróbuj nową wersję <model-viewer> i daj nam znać, co o tym sądzisz.
Problemy i opinie możesz zgłaszać na GitHubie.