Добавление 3D-моделей на веб-сайт может оказаться сложной задачей; <model-viewer> — это так же просто, как написать HTML.
Добавить 3D-модели на сайт сложно. 3D-модели идеально отображаются в средстве просмотра, которое может быстро работать во всех браузерах, включая смартфоны, настольные компьютеры и даже новые головные дисплеи. Средство просмотра должно поддерживать прогрессивное улучшение производительности и качества рендеринга. Он должен поддерживать варианты использования на всех устройствах, начиная от старых смартфонов с меньшим энергопотреблением и заканчивая новыми устройствами, поддерживающими дополненную реальность. Он должен идти в ногу с современными технологиями. Он должен быть производительным и доступным. Однако создание такой программы просмотра требует специальных навыков 3D-программирования и может стать проблемой для веб-разработчиков, которые хотят размещать свои собственные модели вместо использования сторонней службы хостинга.
Однако веб-компонент <model-viewer>
позволяет декларативно добавлять 3D-модель на веб-страницу, размещая ее на собственном сайте. Цель компонента — обеспечить возможность добавления 3D-моделей на ваш веб-сайт без понимания основных технологий и платформ. Веб-компонент поддерживает адаптивный дизайн и такие варианты использования, как дополненная реальность на некоторых устройствах. Он включает в себя функции доступности, качества рендеринга и интерактивности.
Что такое веб-компонент?
Веб-компонент — это пользовательский элемент HTML, созданный на основе стандартных функций веб-платформы. Веб-компонент во всех отношениях ведет себя как стандартный элемент. У него есть уникальный тег, у него могут быть свойства и методы, он может активироваться и реагировать на события. Короче говоря, вам не нужно знать ничего особенного, чтобы использовать какой-либо веб-компонент, а тем более <model-viewer>
.
В этой статье рассматриваются функции, специфичные для <model-viewer>
. Если вы хотите узнать больше о веб-компонентах, веб-компоненты.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>
для демонстрации более продвинутых функций. К ним относятся возможность добавлять проецируемый на землю скайбокс , а также создавать анимированные текстуры и горячие точки .