W lutym wprowadziliśmy komponent internetowy <model-viewer>.
który umożliwia deklaratywne dodanie modelu 3D do strony internetowej, podczas gdy
we własnej witrynie. Nie obsługiwał tylko rzeczywistości rozszerzonej. Ten
że nie można wyrenderować obrazu źródłowego komponentu na
obrazu z kamery.
W tym celu dodaliśmy obsługę funkcji Magic Leap i Szybkie ujęcie w systemie iOS. Teraz
Wprowadzamy obsługę AR na Androidzie, dodając do niej ar
. Ten atrybut opiera się na nowej funkcji ARCore o nazwie Scene Viewer,
zewnętrznej aplikacji do wyświetlania modeli 3D. Aby dowiedzieć się więcej o funkcji Scene Viewer,
zapoznaj się z artykułem Wyświetlanie modeli 3D w AR w przeglądarce na Androidzie.
Zobaczmy, jak używać rzeczywistości rozszerzonej przy użyciu <model-viewer>.
Atrybut
Komponent internetowy, jak być może pamiętasz, nie wymaga żadnej specjalistycznej wiedzy. it
zachowuje się jak standardowy element HTML, ma unikalny tag oraz właściwości
i metod. Po
zainstalować tag <script>,
użyj 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>
Treść wygląda mniej więcej tak samo jak opisana w poprzednim artykule. Zwróć uwagę na to, zaznaczyłem na samym końcu. To jest nowy atrybut.
Instalowanie nowej wersji
Jeśli używasz już komponentu <model-viewer>, prawdopodobnie importujesz go.
używając dokładnie tagów <script>
zgodnie z dokumentacją.
Nieustannie wprowadzamy ulepszenia. Jeśli chcesz wcześniej przetestować nowe funkcje
celowo uaktualniając i wdrażając, dobrze jest zainstalować
z <model-viewer>. Aby to zrobić, dodaj numer wersji do adresów URL plików zgodnie z ilustracją
poniżej. Potem obejrzyj
stronie z wersjami
.
<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 są
witamy w GitHubie.