Komponent internetowy <model-viewer>

Dodawanie modeli 3D do witryny internetowej może być trudne. <model-viewer> jest tak proste, jak pisanie kodu HTML.

Joe Medley
Joe Medley

Dodawanie modeli 3D do witryny jest trudne. Modele 3D najlepiej wyświetlają się w przeglądarce, która działa elastycznie we wszystkich przeglądarkach, w tym na smartfonach, komputerach, a nawet nowych wyświetlaczach na głowie. Odtwarzacz powinien obsługiwać ulepszoną progresywnie jakość w celu poprawy wydajności i jakości renderowania. Powinien on obsługiwać przypadki użycia na wszystkich urządzeniach, od starszych, mniej wydajnych smartfonów po nowsze urządzenia obsługujące rzeczywistość rozszerzoną. Aplikacja powinna być na bieżąco z nowoczesnymi technologiami. Powinien być wydajny i dostępny. Jednak tworzenie takiego przeglądarki wymaga specjalistycznych umiejętności programowania 3D i może być wyzwaniem dla programistów internetowych, którzy chcą hostować własne modele zamiast korzystać z zewnętrznej usługi hostingowej.

Komponent internetowy <model-viewer> pozwala jednak deklaratywnie dodawać model 3D do strony internetowej, a model jest hostowany w Twojej witrynie. Celem tego komponentu jest umożliwienie dodawania modeli 3D do witryny bez znajomości technologii i platformy. Komponent internetowy obsługuje projektowanie responsywne oraz przypadki użycia takie jak rzeczywistość rozszerzona na niektórych urządzeniach. Obejmuje ona funkcje ułatwiające dostępność, jakość renderowania i interaktywność.

Czym jest komponent internetowy?

Komponent internetowy to niestandardowy element HTML utworzony na podstawie standardowych funkcji platformy internetowej. Komponent internetowy zachowuje się w każdym celu i zamierzeniu jak standardowy element. Ma unikalny tag, może mieć właściwości i metody oraz może uruchamiać się i reagować na zdarzenia. Krótko mówiąc, nie musisz wiedzieć nic specjalnego, aby korzystać z komponentu internetowego, a w ogóle <model-viewer>.

Ten artykuł dotyczy funkcji dostępnych tylko w przypadku <model-viewer>. Jeśli chcesz dowiedzieć się więcej o komponentach internetowych, odwiedź stronę webcomponents.org.

Co <model-viewer> może zrobić?

Poniższe przykłady pokazują niektóre możliwości <model-viewer>.

podstawowe modele 3D,

Wstawianie modelu 3D jest tak proste jak ten kod znaczników. Jeśli korzystasz z plików glb, ten komponent będzie działać w każdej popularnej przeglądarce.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
 
id="mv-shark"
   
src="shark.glb"
 
camera-controls
></model-viewer>

Ten kod renderuje się w ten sposób:

Dodawanie ruchu i interakcji

Atrybuty auto-rotate i camera-controls umożliwiają kontrolowanie ruchu i użytkownika. Nie są to jedyne możliwe atrybuty. Pełną listę atrybutów znajdziesz w dokumentacji.

<model-viewer src="shark.glb" auto-rotate camera-controls>

Opóźnij ładowanie obrazów plakatów

Ładowanie wszystkich modeli 3D zajmuje trochę czasu, a dodanie atrybutu poster spowoduje wyświetlanie obrazu do momentu, gdy model będzie gotowy do użycia. Obraz plakatu, który będzie wyglądał identycznie jak renderowanie 3D, można wygenerować za pomocą edytora.

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

Elastyczne projektowanie stron

Komponent obsługuje niektóre typy elastycznego projektowania stron, skalowania na urządzeniach mobilnych i na komputerach. Może też zarządzać wieloma instancjami na stronie i wykorzystywać Intersection Observer do oszczędzania energii i cykli GPU, gdy model nie jest widoczny.

Użycie opisanego wcześniej edytora do utworzenia obrazu plakatu pozwala dopasować ten jeden obraz do renderowania 3D, nawet jeśli współczynnik proporcji <model-viewer>reaguje na różne rozmiary ekranu.

Wiele obrazów skafander kosmicznym reprezentujących czas reakcji.
Wiele obrazów kombinezonu kosmicznego reprezentującego czas reakcji.

Więcej opcji

Demo bardziej zaawansowanych funkcji znajdziesz w dokumentacji <model-viewer>. Dotyczy to m.in. możliwości dodania projekcji nieba na ziemi, tworzenia animowanych teksturpunktów aktywnych.