Dodawanie modeli 3D do witryny może być trudne, ale <model-viewer> jest tak prosty jak pisanie kodu HTML.
Dodawanie modeli 3D do witryny jest skomplikowane. Modele 3D najlepiej wyświetlać w przeglądarce, która działa elastycznie we wszystkich przeglądarkach, w tym na smartfonach, komputerach, a nawet nowych hełmach wirtualnej rzeczywistości. Przeglądarka powinna obsługiwać progresywne ulepszanie, aby zapewnić wydajność i jakość renderowania. Powinna obsługiwać przypadki użycia na wszystkich urządzeniach – od starszych smartfonów o mniejszej mocy po nowsze urządzenia obsługujące rzeczywistość rozszerzoną. Powinna być na bieżąco z najnowszymi technologiami. Powinna być wydajna i dostępna. Jednak utworzenie takiej przeglądarki wymaga specjalistycznych umiejętności programowania 3D i może być wyzwaniem dla programistów stron internetowych, którzy chcą hostować własne modele, zamiast korzystać z usługi hostingu innej firmy.
Komponent internetowy <model-viewer> umożliwia jednak deklaratywne dodanie modelu 3D do strony internetowej, podczas gdy model jest hostowany we własnej witrynie.
Celem komponentu jest umożliwienie dodawania modeli 3D do witryny bez konieczności znajomości technologii i platform, na których są oparte.
Komponent internetowy obsługuje elastyczne projektowanie stron
oraz przypadki użycia takie jak rzeczywistość rozszerzona na niektórych urządzeniach.
Obejmuje funkcje ułatwień dostępu, jakości renderowania i interaktywności.
Czym jest komponent internetowy?
Komponent internetowy to niestandardowy element HTML utworzony na podstawie standardowych funkcji platformy internetowej. Komponent internetowy działa pod każdym względem jak standardowy element. Ma unikalny tag, może mieć właściwości i metody oraz może uruchamiać zdarzenia i na nie reagować. Krótko mówiąc, nie musisz wiedzieć niczego szczególnego, aby używać dowolnego komponentu internetowego, a tym bardziej <model-viewer>.
W tym artykule opisujemy funkcje, które są dostępne tylko w <model-viewer>.
Jeśli chcesz dowiedzieć się więcej o komponentach internetowych, dobrym miejscem na początek jest strona webcomponents.org.
Co <model-viewer> może zrobić?
Poniższe przykłady pokazują niektóre możliwości <model-viewer>.
Podstawowe modele 3D
Umieszczenie modelu 3D jest tak proste jak użycie poniższych znaczników. Dzięki plikom glb ten komponent będzie działać we wszystkich popularnych przeglądarkach.
<!-- 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 jest renderowany w ten sposób:
Dodawanie ruchu i interaktywności
Atrybuty auto-rotate i camera-controls zapewniają ruch i kontrolę użytkownika. To nie są jedyne możliwe atrybuty. Pełną listę atrybutów znajdziesz w dokumentacji.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Opóźnianie wczytywania za pomocą obrazów plakatów
Wszystkie modele 3D potrzebują czasu na załadowanie. Dodanie atrybutu poster oznacza, że obraz będzie wyświetlany, dopóki model nie 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, skalując się zarówno na urządzeniach mobilnych, jak i na komputerach. Może też zarządzać wieloma instancjami na stronie i używa interfejsu Intersection Observer, aby oszczędzać baterię i cykle GPU, gdy model nie jest widoczny.
Użycie opisanego wcześniej edytora do utworzenia obrazu plakatu pozwala dopasować ten pojedynczy obraz do renderowania 3D, nawet jeśli format obrazu <model-viewer> reaguje na różne rozmiary ekranu.
Więcej opcji
Zapoznaj się z dokumentacją <model-viewer>, aby zobaczyć wersje demonstracyjne bardziej zaawansowanych funkcji.
Obejmują one możliwość dodania skyboxa rzutowanego na podłoże oraz tworzenia animowanych tekstur i punktów aktywnych.