W lutym wprowadziliśmy komponent internetowy <model-viewer>, który umożliwia deklaratywne dodawanie modelu 3D do strony internetowej i jednoczesne przechowywanie modelu we własnej witrynie. Rzeczywistość rozszerzona nie była obsługiwana. Oznacza to, że nie można wyrenderować obrazu źródłowego komponentu na tle obrazu z kamery urządzenia.
Właśnie dlatego dodaliśmy obsługę Magic Leap i Szybkiego ujęcia w systemie iOS. Teraz ogłaszamy obsługę AR na Androidzie, dodając atrybut ar. Ten atrybut powstał w oparciu o nową funkcję ARCore o nazwie Scene Viewer, czyli zewnętrznej aplikacji do przeglądania modeli 3D. Więcej informacji o Przeglądarce Scene znajdziesz w artykule Wyświetlanie modeli 3D w AR w przeglądarce Androida.
Zobaczmy, jak korzystać z rzeczywistości rozszerzonej w <model-viewer>.
Atrybut
Jak być może pamiętasz, komponent internetowy nie wymaga specjalnej wiedzy. Działa jak standardowy element HTML i ma unikalny tag oraz właściwości i metody. Po zainstalowaniu go za pomocą tagu <script> używaj 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 prawie tak samo jak w moim poprzednim artykule. Zwróćcie uwagę na to, co zaznaczyłem na samym końcu. To nowy atrybut.
Instalowanie nowej wersji
Jeśli używasz już komponentu <model-viewer>, prawdopodobnie importujesz komponent za pomocą tagów <script> dokładnie w sposób podany w dokumentacji.
Stale wprowadzamy ulepszenia. Jeśli chcesz przetestować nowe funkcje przed celowym uaktualnieniem i wdrożeniem, zainstaluj konkretną wersję systemu <model-viewer>. Aby to zrobić, dodaj numer wersji do adresów URL plików w sposób pokazany poniżej. Później obserwuj stronę z wersjami, aby być na bieżąco.
<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ę usługi <model-viewer> i daj nam znać, co o niej myślisz.
Problemy i opinie znajdziesz na GitHubie.