Obecnie użytkownicy często noszą przy sobie urządzenia z rzeczywistością rozszerzoną (AR) i rzeczywistością wirtualną (VR). Coraz więcej treści, które udostępniamy sobie na tych urządzeniach, jest trójwymiarowe. Z tego modułu dowiesz się, jak za pomocą komponentu internetowego <model-viewer> dodawać treści 3D do witryny lub progresywnej aplikacji internetowej (PWA) tak łatwo, jak dodajesz obraz w formacie HTML.
Co utworzysz
Strona zawierająca interaktywny model 3D z możliwością wyświetlania hologramów
Czego się nauczysz:
- Jak zainstalować komponent internetowy
<model-viewer>w witrynie - Jak używać modelu
<model-viewer>do prezentowania modelu 3D w standardowym układzie internetowym - Jak dostosować styl,
<model-viewer>, aby prezentacja była bardziej efektowna
Czego potrzebujesz
- Przeglądarka internetowa. Zalecamy korzystanie z Chrome, ale ta przeglądarka może działać w każdej nowoczesnej przeglądarce (Firefox, Safari, Edge).
- Node.js i edytor tekstu albo dostęp do glitch.
- Podstawowa wiedza o HTML, CSS, JavaScript i Chrome DevTools.
To ćwiczenie programowania skupia się na modelach <model-viewer> i 3D. Nieistotne koncepcje i bloki kodu zostały zamaskowane. Można je po prostu skopiować i wkleić.
Opcja 1 – błąd
Możesz użyć swojego narzędzia do edycji kodu online, takiego jak Glitch, i zarządzać swoim projektem.
Aby rozpocząć pracę w Glitch, kliknij ten przycisk:
Otwieranie wstępnie załadowanego środowiska Glitch
Następnie możesz zmodyfikować pliki w edytorze kodu w Glitch, a gdy wszystko będzie gotowe, możesz rozpocząć przesyłanie aplikacji, klikając przycisk „"Show Live"”. Zrób to teraz. Powinna wyświetlić się ta strona:
Opcja 2. Serwer lokalny
Na serwerze lokalnym możesz korzystać z wybranego edytora kodu.
Instalowanie serwera
Potrzebujemy sposobu wyświetlania lokalnych stron internetowych. Prostym rozwiązaniem jest użycie środowiska Node.js i serwisu, czyli prostego serwera statycznego treści.
Aby dowiedzieć się, jak to zrobić, wejdź na stronę Node.js. Po zainstalowaniu Node.js uruchom to polecenie, aby zainstalować serwer:
npm install -g serve
Pobieranie kodu
Możesz pobrać szablon początkowy oraz wszystkie przykładowe zasoby. Kliknij poniższy link, a następnie rozpakuj zawartość do katalogu, w którym chcesz umieścić projekt:
Możesz też użyć narzędzia git, aby skopiować repozytorium:
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
Uruchamianie serwera
Z katalogu szablonów wyodrębnionego powyżej (lub w sklonowanym katalogu, jeśli użyto git) uruchom polecenie serve, aby uruchomić serwer WWW:
Otwórz ten adres (na zrzucie ekranu powyżej może to być adres http://localhost:5000, który może być inny na Twoim komputerze), aby zobaczyć bardzo prosty punkt początkowy:
Zaczniemy od edytowania pliku index.html przy użyciu edytora internetowego Glitch lub Twojego ulubionego edytora kodu (jeśli używasz serwera lokalnego).
Dodaj bibliotekę <model-viewer>
Aby można było używać modułu <model-viewer>, należy uwzględnić zestaw plików JavaScript.
W następnej sekcji do strony zostanie dodana biblioteka <model-viewer>. Wklej ten kod na końcu strony <body>.
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>Właśnie dodaliśmy biblioteki, nie zmieniając treści – jeśli odświeżysz stronę, zobaczysz tę samą zawartość. Jeśli otworzysz konsolę DevTools, możesz zobaczyć ostrzeżenia o brakujących interfejsach API WebXR, ale są one oczekiwane do momentu pełnego udostępnienia interfejsu API.
Maksymalizacja zgodności
Gotowe do użycia narzędzie <model-viewer> obsługuje wiele nowoczesnych przeglądarek. Jeśli jednak chcesz zwiększyć liczbę przeglądarek, które obsługuje Twoja strona, możesz dodać dodatkowe kod polyfill.
Poniżej znajdziesz pełny zestaw rekomendowanych zestawów. Pomoże Ci to zapewnić wygodę użytkownikom we wszystkich nowoczesnych przeglądarkach. Więcej informacji znajdziesz w dokumentacji <model-viewer> polyfill.
Wklej ten kod do aplikacji <head>.
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->Dodaj obiekt <model-viewer>
Teraz dodajmy tag <model-viewer> do strony, abyśmy mogli zobaczyć trochę 3D! Zastąp istniejący element <p> tym kodem:
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>Należy tu wspomnieć tylko o 2 atrybutach:
- Atrybut
srcokreśla miejsce wczytywania modelu 3D. W tym przykładzie wykorzystaliśmy model astronauty firmy Poly, który jest dostępny na licencji CC-BY. - Atrybut
altzawiera alternatywny opis tekstowy modelu na potrzeby ułatwień dostępu.
Możesz zauważyć, że oba te atrybuty mają wyraźne paralepy z atrybutami tagu img.
Po ponownym załadowaniu zobaczysz astronauta:
Super! Masz model 3D w sieci!
W kolejnych krokach poeksperymentujemy z większą interaktywnością i ruchem, zmienimy wygląd elementu i zanurzymy palce do rzeczywistości rozszerzonej.
Dodajmy do modelu nieco interakcję. Model będzie domyślnie obracać się, aby dawać użytkownikom sygnał, że model jest interaktywny (a także go wyświetlać), a następnie włączyć elementy sterujące, tak aby użytkownicy mogli poruszać się samodzielnie za pomocą myszy lub dotyku.
Aby to zrobić, dodaj atrybuty auto-rotate i camera-controls do elementu <model-viewer>.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>Astronauta będzie się powoli obracać, gdy odświeżysz stronę. Jeśli spróbujesz przeciągnąć model (klikając i poruszając myszą lub przesuwając urządzenie palcem po dotknięciu), model będzie się obracał.
Łącząc te funkcje, użytkownik otrzymuje sugestię, że jest to nie tylko obraz statyczny, ale też interaktywne, dzięki czemu czuje się zaangażowany i widzi tylną część modelu.
Skoro wiemy już, jak to zrobić, zobaczmy, jak dostosować wygląd, by model był naprawdę atrakcyjny.
Aktualizowanie modelu
Niektóre z nich (w szczególności zmiany oświetlenia) będą najlepiej wyglądać z wybranymi modelami. Najpierw zaktualizujmy atrybut src tak, by wskazywał nowy model: third_party/DamagedHelmet/DamagedHelmet.gltf (opublikowany na licencji Creative Commons Uznanie autorstwa – niekomercyjna Sketchfab). Źródło całego elementu powinno być teraz odczytane:
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Ten model prezentuje niektóre zmiany, które planujemy wprowadzić.
Zmienianie koloru tła
Najpierw zmieńmy kolor tła, by model wyróżniał się wyglądem strony. Dodaj ten atrybut do tagu <model-viewer>:
background-color="#70BCD1"
Ustawianie mapy środowiska
Mapy środowiskowe służą do uwzględniania sceny odbijającej się od modelu i określania konfiguracji oświetlenia. Domyślne oświetlenie jest doskonałe (i zgodne ze oświetleniem ARCore&s Acere), ale czasami konieczne jest uzyskanie odpowiedniego środowiska lub uzyskanie efektu charakterystycznego dla wyników. Określ atrybut środowisko-obraz (studio_small_07_1k.hdr pochodzi z hdrihaven.com).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
Dodawanie cienia
Zastosowanie obiektu rzucającego cień pozwala uzyskać dodatkową głębię sceny. Po dodaniu tego atrybutu do naszego elementu <model-viewer> rzucają cień:
shadow-intensity="1"
Zmiana natężenia światła
Model jest trochę ciemny. Zwiększmy światło, abyśmy mogli zobaczyć więcej szczegółów. Zarówno domyślne oświetlenie sceny, jak i oświetlenie dodane na mapie mapy środowiska możesz zmieniać niezależnie. Dodaj to:
stage-light-intensity="3" environment-intensity="2"Każda z tych zmian była niewielka, ale model wygląda teraz lepiej.
W dalszej części przedstawimy alternatywne tryby wyświetlania.
Coraz więcej urządzeń ma dostępne funkcje rzeczywistości rozszerzonej (AR). Niektóre z tych trybów nie są łatwe do uruchomienia lub wymagają specjalnego kodu, ale <model-viewer> może poradzić sobie z tą złożonością!
Wyświetlający scenkę ARCore'
Na obsługiwanych urządzeniach narzędzie <model-viewer> może aktywować przeglądarkę scen w ARCore'. Dodaj atrybut ar do elementu <model-viewer> i tak – to wszystko, co musisz zrobić.
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Jeśli wyświetlisz ten film na obsługiwanym urządzeniu z niedawnym ARCore, zobaczysz dodatkową ikonę (jak na ilustracji poniżej). Kliknięcie tego modelu spowoduje otwarcie modelu w Scene Explorer.
Inne urządzenia – szybki podgląd na iOS, Magic Leap, WebXR
Wiele innych urządzeń wymaga nieco więcej pracy.
W systemie iOS atrybut ios-src umożliwia podanie dodatkowej wersji modelu 3D w USDZ (wymaganej w iOS). Gdy podasz ten atrybut, na obsługiwanych modelach urządzeń z iOS pojawi się standardowa ikona Szybkich kontroli AR. Więcej informacji o USDZ znajdziesz w dokumentacji dla deweloperów Apple.
Na urządzeniach Magic Leap atrybut magic-leap włączy obsługę AR. Pamiętaj, że musisz też dołączyć bibliotekę prismatic.js (uwzględnioną, ale skomentowaną w opcjonalnych obiektach polyfill), a model 3D musi być plikiem .glb (a nie .gltf).
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>Możesz kontrolować początkowy kąt i pozycję kamery. Ta opcja pozwoli nam wyświetlać użytkownikom domyślny widok kasku. Dodaj ten fragment do tagu <model-viewer>
camera-orbit="-20deg 75deg 2m"
Oczywiście. Te modele mogą być używane z innymi treściami, w tym na stronach elastycznych. Tworzenie elastycznej strony internetowej wykracza poza zakres tych ćwiczeń z programowania. Więcej informacji na ten temat znajdziesz na stronie z podstawami elastycznego projektowania witryn.
Umieściliśmy w repozytorium przykładową stronę. Zobacz film responsive.html na szerokim ekranie (jak na komputerze):
Ta sama strona w wąskim widocznym obszarze (np. na urządzeniu mobilnym):
Udało Ci się umieścić w internecie całą zawartość 3D! Dobra robota!
Co dalej?
Istnieje jeszcze wiele innych opcji konfiguracji. Więcej informacji znajdziesz w dokumentacji online lub w kodzie.
Po zidentyfikowaniu modeli warto rozważyć następujące dalsze kroki:
- Niektóre modele mogą być dość duże. W takim przypadku <model-viewer> udostępnia kilka metod zapewniających doskonałe wrażenia. Więcej informacji znajdziesz na stronie leniwego ładowania.
- Animowane modele mogą być naprawdę zabawne! Więcej informacji o włączaniu animacji i ich definiowaniu w modelach znajdziesz na stronie Animacje.
- To jest nadal internet – modele mogą być umieszczane na stronach internetowych w celu uzupełnienia zawartości.
Nasz proces programowania jest otwarty w GitHub. Będzie nam miło ją poznać!