Элемент <модель-просмотрщик> веб-компонент

Добавление 3D-моделей на веб-сайт может оказаться сложной задачей; <model-viewer> — это так же просто, как написать HTML.

Джо Медли
Joe Medley

Добавить 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> для демонстрации более продвинутых функций. К ним относятся возможность добавлять проецируемый на землю скайбокс , а также создавать анимированные текстуры и горячие точки .