Ta strona została przetłumaczona przez Cloud Translation API.

Dodawanie modeli 3D do internetu za pomocą elementu <model-viewer>

Obecnie wiele osób nosi w kieszeni urządzenia obsługujące rzeczywistość rozszerzoną (AR) i wirtualną (VR). Coraz częściej treści, które udostępniamy sobie na tych urządzeniach, są trójwymiarowe. Z tego modułu dowiesz się, jak za pomocą komponentu internetowego o nazwie <model-viewer> dodawać do witryny lub progresywnej aplikacji internetowej (PWA) treści 3D tak łatwo, jak dodajesz obraz za pomocą kodu HTML.

Co utworzysz

Witryna zawierająca interaktywny model 3D z możliwością wyświetlania hologramów AR

Czego się nauczysz

Jak zainstalować w witrynie komponent internetowy <model-viewer>
Jak używać <model-viewer> do prezentowania modelu 3D w standardowym układzie strony internetowej
Jak dostosować <model-viewer>, aby uatrakcyjnić prezentację

Czego potrzebujesz

przeglądarki internetowej, Zalecamy Chrome, ale działa też każda nowoczesna przeglądarka (Firefox, Safari, Edge).
Node.js i edytor tekstu lub dostęp do Glitch.
Podstawowa znajomość języków HTML, CSS i JavaScript oraz Narzędzi deweloperskich w Chrome.

Ten moduł dotyczy <model-viewer> i modeli 3D. Nieistotne koncepcje i bloki kodu zostały pominięte. Można je po prostu skopiować i wkleić.

Opcja 1. Usterka

Aby hostować projekt i sprawdzać zmiany, możesz użyć internetowego narzędzia do edycji kodu, takiego jak Glitch.

Aby zacząć korzystać z Glitch, kliknij ten przycisk:

Otwórz wstępnie załadowane środowisko Glitch

Od tego momentu możesz używać edytora kodu w Glitchu do modyfikowania plików, a gdy wszystko będzie gotowe, zacznij wyświetlać aplikację, klikając przycisk „Show Live” (Pokaż na żywo). Spróbuj teraz, a powinna się wyświetlić ta strona:

Opcja 2. Serwer lokalny

Lokalny serwer umożliwi Ci korzystanie z ulubionego edytora kodu.

Instalowanie serwera

Będziemy potrzebować sposobu na wyświetlanie lokalnych stron internetowych. Prostym sposobem jest użycie Node.js i serve, czyli prostego serwera treści statycznych.

Instrukcje instalacji w systemie operacyjnym znajdziesz na stronie Node.js. Po zainstalowaniu Node.js uruchom to polecenie, aby zainstalować serwer:

npm install -g serve

Pobieranie kodu

Szablon początkowy wraz ze wszystkimi przykładowymi komponentami jest dostępny do pobrania. Kliknij ten link i rozpakuj zawartość do katalogu, w którym chcesz umieścić projekt:

Pobieranie kodu źródłowego

Możesz też sklonować repozytorium za pomocą Gita:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

Uruchamianie serwera

W katalogu szablonów wyodrębnionym powyżej (lub w sklonowanym katalogu, jeśli używasz Gita) uruchom serwer WWW za pomocą polecenia serve:

Otwórz ten adres (na zrzucie ekranu powyżej jest to http://localhost:5000, ale na Twoim komputerze może być inny), aby zobaczyć bardzo prosty punkt wyjścia:

Zaczniemy od edytowania pliku index.html w edytorze internetowym Glitch lub w ulubionym edytorze kodu (jeśli używasz serwera lokalnego).

Dodaj bibliotekę <model-viewer>

Aby używać elementu <model-viewer>, musimy uwzględnić zestaw plików JavaScript.

W sekcji poniżej dodasz bibliotekę <model-viewer> do strony. Wklej ten kod na końcu pliku <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>

Dodaliśmy tylko biblioteki, nie zmieniając treści. Jeśli odświeżysz stronę, zobaczysz te same treści. Jeśli otworzysz konsolę Narzędzi deweloperskich, możesz zobaczyć ostrzeżenia o brakujących interfejsach WebXR API, ale jest to normalne, dopóki ten interfejs API nie zostanie w pełni udostępniony.

Maksymalizacja zgodności

Element <model-viewer> od razu obsługuje wiele nowoczesnych przeglądarek. Jeśli jednak chcesz zwiększyć liczbę przeglądarek, które mogą obsługiwać Twoją stronę, możesz dodać dodatkowe polyfille.

Pełny zalecany zestaw znajdziesz poniżej. Dzięki temu zapewnisz użytkownikom komfort korzystania ze wszystkich nowoczesnych przeglądarek. Więcej informacji znajdziesz w dokumentacji wypełnień<model-viewer>.

Wklej ten kod do pliku <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>-->

Dodawanie elementu <model-viewer>

Teraz dodajmy do strony tag <model-viewer>, aby zobaczyć model 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>

Warto tu wspomnieć tylko o 2 atrybutach:

Atrybut src określa, skąd ma być wczytany model 3D. W tym przykładzie użyliśmy modelu Astronaut firmy Poly, który jest dostępny na licencji CC-BY.
Atrybut alt zawiera alternatywny opis tekstowy modelu na potrzeby ułatwień dostępu.

Zwróć uwagę, że oba te atrybuty mają wiele wspólnego z atrybutami tagu img.

Po ponownym załadowaniu zobaczysz astronautę:

Super! Masz model 3D w internecie.

W kolejnych krokach poeksperymentujemy z większą interaktywnością i ruchem, zmienimy wygląd elementu i zaczniemy korzystać z rzeczywistości rozszerzonej.

Dodajmy do modelu trochę interaktywności. Domyślnie model będzie się obracać, aby zasugerować użytkownikom, że jest interaktywny (a także aby go zaprezentować). Następnie włączymy elementy sterujące, aby użytkownicy mogli sami przesuwać model 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>

Po odświeżeniu strony astronauta będzie się powoli obracać. Jeśli spróbujesz przeciągnąć model (klikając i przesuwając mysz lub przeciągając palcem na urządzeniu z ekranem dotykowym), model się obróci.

Te funkcje razem dają użytkownikowi wskazówkę, że to coś więcej niż tylko statyczny obraz, a także poczucie interaktywności, dzięki czemu czuje się zaangażowany (i może zobaczyć tył modelu).

Skoro mamy już ruch, przyjrzyjmy się, jak dostosować wygląd, aby model był naprawdę atrakcyjny.

Aktualizowanie modelu

Niektóre z tych zmian (zwłaszcza zmiany oświetlenia) będą najlepiej widoczne w przypadku określonych modeli. Najpierw zaktualizuj atrybut src, aby wskazywał nowy model: third_party/DamagedHelmet/DamagedHelmet.gltf (udostępniony na licencji Creative Commons Uznanie autorstwa – Bez użycia komercyjnego na platformie Sketchfab). Źródło całego elementu powinno teraz wyglądać tak:

<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 pokaże niektóre zmiany, które zamierzamy wprowadzić.

Zmień kolor tła.

Najpierw zmieńmy kolor tła, aby model wyróżniał się na stronie. Dodaj ten atrybut do tagu <model-viewer>:

background-color="#70BCD1"

Ustawianie mapy środowiska

Mapy środowiska służą do zapewnienia otaczającej sceny, która jest odzwierciedlana w modelu, oraz do określania konfiguracji oświetlenia. Domyślne oświetlenie jest doskonałe (i kompatybilne z oświetleniem w przeglądarce scen ARCore), ale czasami możesz mieć niestandardowe środowisko lub potrzebować oświetlenia dostosowanego do wyników, które chcesz osiągnąć. Określmy atrybut environment_image (studio_small_07_1k.hdr pochodzi z hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

Dodawanie cienia

Rzucanie cienia przez obiekt nadaje scenie dodatkową głębię. Ten atrybut dodany do elementu <model-viewer> będzie rzucać cień:

shadow-intensity="1"

Zmiana intensywności oświetlenia

Model jest trochę ciemny. Rozjaśnijmy go, aby zobaczyć więcej szczegółów. Zarówno domyślne oświetlenie sceny, jak i oświetlenie z dodanej przez nas mapy otoczenia można dostosowywać niezależnie od siebie. Dodaj to:

stage-light-intensity="3" environment-intensity="2"

Każda z tych zmian była dość niewielka, ale model wygląda teraz znacznie lepiej.

Następnie przyjrzymy się alternatywnym trybom wyświetlania.

Coraz więcej urządzeń ma dostęp do rzeczywistości rozszerzonej (AR). Niektóre z tych trybów są trudne do wywołania lub wymagają specjalnego kodu, ale <model-viewer> może poradzić sobie z całą tą złożonością.

Wyświetlający sceny ARCore

Na obsługiwanych urządzeniach element <model-viewer> może wywoływać Scene Viewer ARCore. Dodaj atrybut ar do elementu <model-viewer> – 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 teraz wyświetlisz tę stronę na obsługiwanym urządzeniu z najnowszą wersją ARCore, zobaczysz dodatkową ikonę (jak na ilustracji poniżej). Kliknięcie tego przycisku spowoduje otwarcie modelu w Eksploratorze scen.

Inne urządzenia – iOS Quick Look, Magic Leap, WebXR

W przypadku wielu innych urządzeń trzeba wykonać nieco więcej czynności.

W systemie iOS atrybut ios-src umożliwia określenie dodatkowej wersji USDZ modelu 3D (która jest wymagana w systemie iOS). Jeśli ten atrybut zostanie podany, na modelu pojawi się standardowa ikona Szybkiego podglądu AR na obsługiwanych urządzeniach z iOS. 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ż uwzględnić bibliotekę prismatic.js (jest ona uwzględniona, ale zakomentowana w opcjonalnych polyfillach), 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. Dzięki temu możemy wyświetlać użytkownikom lepszy widok domyślny kasku. Dodaj ten fragment kodu do tagu <model-viewer>:

camera-orbit="-20deg 75deg 2m"

Oczywiście możesz używać tych modeli z innymi treściami, w tym na stronach responsywnych. Tworzenie elastycznej strony internetowej wykracza poza zakres tych ćwiczeń z programowania, ale więcej informacji znajdziesz w artykule Podstawy elastycznego projektowania witryn (w języku angielskim).

W naszym repozytorium znajduje się przykładowa strona. Sprawdź responsive.html w trybie panoramicznym (jak na komputerze):

Ta sama strona w wąskim widocznym obszarze (np. na urządzeniu mobilnym):

Element 3D został osadzony w internecie. Dobra robota!

Co dalej?

Dostępnych jest wiele innych opcji konfiguracji. Więcej informacji znajdziesz w naszej dokumentacji online lub w kodzie.

Gdy określisz modele, możesz wykonać te czynności:

Niektóre modele mogą być dość duże. W takich przypadkach element <model-viewer> udostępnia kilka metod, które pozwalają zapewnić doskonałe wrażenia. Więcej informacji znajdziesz na stronie dokumentacji Leniwe ładowanie.
Animowane modele mogą być świetną zabawą. Więcej informacji o włączaniu animacji zdefiniowanych w modelach (i przełączaniu się między nimi) znajdziesz na stronie Animacje.
To nadal internet – modele można umieszczać na stronach internetowych, aby uzupełniać treści.

Nasz proces rozwoju jest otwarty w serwisie GitHub. Chętnie poznamy Twoją opinię.