Komponent internetowy <model-viewer>

Dodawanie modeli 3D do witryny może być trudne, ponieważ <model-viewer> jest równie łatwe jak pisanie kodu HTML.

Joe Medley
Joe Medley

Dodawanie modeli 3D do stron internetowych nie jest łatwe. Modele 3D najlepiej prezentować w przeglądarkach, które elastycznie działają we wszystkich przeglądarkach, w tym na smartfonach, komputerach, a nawet na nowych wyświetlaczach zakładanych na głowę. Widz powinien obsługiwać progresywne ulepszanie wydajności i jakości renderowania. Powinny obsługiwać zastosowania na wszystkich urządzeniach – od starszych smartfonów o mniejszej mocy po nowsze urządzenia obsługujące rzeczywistość rozszerzoną. Powinny pozostawać na bieżąco z najnowszymi technologiami. Powinno być wydajne i łatwo dostępne. Stworzenie takiego użytkownika wymaga jednak specjalistycznych umiejętności z zakresu programowania 3D i może stanowić wyzwanie dla programistów internetowych, którzy chcą hostować własne modele zamiast korzystać z zewnętrznej usługi hostingowej.

Komponent internetowy <model-viewer> umożliwia jednak deklaratywne dodanie modelu 3D do strony internetowej, a jednocześnie hostowanie go we własnej witrynie. Jego celem jest umożliwienie dodawania do witryny modeli 3D bez poznawania technologii i platform, z których ona korzysta. Komponent internetowy obsługuje elastyczne projektowanie i na niektórych urządzeniach takie przypadki użycia jak rzeczywistość rozszerzona. 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 w przypadku wszystkich intencji i zastosowań jak element standardowy. Może mieć unikalny tag, właściwości i metody oraz może uruchamiać się i odpowiadać na zdarzenia. Krótko mówiąc, nie trzeba wiedzieć nic szczególnego, aby używać żadnych komponentów sieciowych, takich jak <model-viewer>.

W tym artykule opisujemy funkcje charakterystyczne dla <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 narzędzia <model-viewer>.

Podstawowe modele 3D

Aby umieścić model 3D na stronie, wystarczy zastosować poniższe znaczniki. Dzięki plikom 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>

Kod ten wygląda tak:

Dodaj dynamikę i interaktywność

Atrybuty auto-rotate i camera-controls zapewniają ruch i kontrolę przez 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óźniaj wczytywanie za pomocą obrazów plakatu

Wczytanie wszystkich modeli 3D trochę trwa. 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 po renderowaniu 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 projektowania responsywnego, umożliwiając skalowanie zarówno na urządzeniach mobilnych, jak i na komputery. Może też zarządzać wieloma instancjami na stronie oraz korzystać z funkcji Obserwacja działów, która pozwala oszczędzać baterię i zwiększać liczbę cykli GPU, gdy model nie jest widoczny.

Utworzenie obrazu plakatu za pomocą opisanego wcześniej edytora umożliwia taki sam renderowanie pojedynczego obrazu 3D, nawet jeśli współczynnik proporcji <model-viewer> odpowiada rozmiarom ekranu.

Wiele obrazów przedstawiających responsywność.
Wiele obrazów w skafandrze potwierdzających elastyczność.

Więcej opcji

Zapoznaj się z dokumentacją usługi <model-viewer>, aby zobaczyć wersje demonstracyjne bardziej zaawansowanych funkcji. Obejmują one możliwość dodania widoku na ziemię oraz tworzenia animowanych tekstur i hotspotów.