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