Добавлять 3D-модели на сайт может быть непросто, но с <model-viewer> это так же легко, как писать HTML-код.
Добавить 3D-модели на сайт непросто. 3D-модели лучше всего показывать в средстве просмотра, которое может работать адаптивно во всех браузерах, включая смартфоны, настольные компьютеры или даже новые шлемы виртуальной реальности. Для повышения производительности и качества рендеринга средство просмотра должно поддерживать прогрессивное улучшение. Она должна поддерживать сценарии использования на всех устройствах – от старых смартфонов с низкой производительностью до новых устройств с поддержкой дополненной реальности. Оно должно идти в ногу с современными технологиями. Оно должно быть эффективным и доступным. Однако для создания такого средства просмотра требуются специальные навыки программирования 3D-объектов, и это может быть непростой задачей для веб-разработчиков, которые хотят размещать свои собственные модели, а не использовать сторонний сервис хостинга.
Однако веб-компонент <model-viewer> позволяет добавлять 3D-модель на веб-страницу декларативно, размещая ее на собственном сайте.
Цель компонента – позволить добавлять 3D-модели на сайт без понимания базовых технологий и платформ.
Веб-компонент поддерживает адаптивный дизайн и такие функции, как дополненная реальность на некоторых устройствах.
В нем есть функции для специальных возможностей, качества рендеринга и интерактивности.
Что такое веб-компонент?
Веб-компонент – это пользовательский элемент HTML, созданный на основе стандартных функций веб-платформы. Веб-компонент ведет себя как стандартный элемент. У него есть уникальный тег, могут быть свойства и методы, и он может запускать события и реагировать на них. Проще говоря, вам не нужно знать ничего особенного, чтобы использовать веб-компоненты, в том числе <model-viewer>.
В этой статье рассказывается о функциях, которые доступны только в <model-viewer>.
Дополнительную информацию о веб-компонентах можно найти на сайте webcomponents.org.
Возможности <model-viewer>
Ниже приведены примеры использования <model-viewer>.
Базовые 3D-модели
Чтобы встроить 3D-модель, достаточно добавить следующую разметку: Благодаря использованию файлов GLB этот компонент будет работать во всех основных браузерах.
<!-- 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>
Этот код будет выглядеть следующим образом:
Добавление движения и интерактивности
Атрибуты auto-rotate и camera-controls позволяют управлять движением и действиями пользователя. Это не единственные возможные атрибуты. Полный список атрибутов приведен в документации.
<model-viewer src="shark.glb" auto-rotate camera-controls>
Отложенная загрузка с помощью постеров
Для загрузки 3D-моделей требуется время. Если вы добавите атрибут poster, то до окончания загрузки будет показываться изображение.
Изображение постера, которое будет выглядеть идентично 3D-модели, можно создать с помощью редактора.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
Адаптивный дизайн
Компонент поддерживает некоторые типы адаптивного дизайна, масштабируя объявления для мобильных устройств и компьютеров. Он также может управлять несколькими экземплярами на странице и использует Intersection Observer для экономии заряда батареи и циклов графического процессора, когда модель не видна.
Если вы создадите постер в редакторе, описанном выше, то он будет соответствовать 3D-модели, даже если соотношение сторон элемента <model-viewer> будет меняться в зависимости от размера экрана.
Другие характеристики
В документации по <model-viewer> вы найдете демонстрации более продвинутых функций.
Например, вы можете добавить скайбокс с проекцией на землю, а также создать анимированные текстуры и активные области.