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świetlać w przeglądarce, która może działać elastycznie we wszystkich przeglądarkach, w tym na smartfonach, komputerach i na nowych wyświetlaczach montowanych na głowie. Odtwarzacz powinien obsługiwać ulepszoną progresywnie jakość w celu poprawy wydajności i jakości renderowania. Powinien obsługiwać przypadki użycia na wszystkich urządzeniach – od starszych smartfonów o mniejszej mocy obliczeniowej po nowsze urządzenia obsługujące rzeczywistość rozszerzoną. Powinien być zgodny z obecnymi technologiami. Powinien być wydajny i przystę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. Jego celem jest umożliwienie dodawania do witryny modeli 3D bez znajomości używanej technologii i platform. 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 działa we wszystkich intencjach i celach jak element standardowy. Ma unikalny tag, może mieć właściwości i metody oraz może uruchamiać zdarzenia i na nie odpowiadać. Krótko mówiąc, nie musisz znać niczego specjalnego, aby używać komponentów internetowych, a tym bardziej <model-viewer>.

W tym artykule omawiamy funkcje charakterystyczne dla usługi <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óźnione wczytywanie obrazów tytułowych

Ł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ć pojedynczy obraz do renderowania 3D, mimo że format obrazu <model-viewer> odpowiada różnym rozmiarom ekranu.

Wiele obrazów kombinezonów kosmicznych przedstawiających responsywność.
Wiele obrazów kombinezonu kosmicznego reprezentującego czas reakcji.

Więcej opcji

Demo bardziej zaawansowanych funkcji znajdziesz w dokumentacji <model-viewer>. Obejmują one możliwość dodania widoku na niebo oraz tworzenia animowanych tekstur i punktów dostępu.