Сегодня люди часто носят в карманах устройства с поддержкой дополненной (AR) и виртуальной (VR) реальности. Всё чаще контент, которым мы делимся друг с другом на этих устройствах, становится трёхмерным. В этой лабораторной работе вы научитесь использовать веб-компонент <model-viewer> для добавления 3D-контента на свой веб-сайт или прогрессивное веб-приложение (PWA) так же легко, как вы добавляете изображение с помощью HTML!
Что вы будете строить
Веб-сайт, содержащий интерактивную 3D-модель с возможностью отображения голограмм дополненной реальности
Чему вы научитесь
- Как установить веб-компонент
<model-viewer>на свой сайт - Как использовать
<model-viewer>для представления 3D-модели в стандартном веб-макете - Как настроить
<model-viewer>, чтобы добавить изюминку в презентацию
Что вам понадобится
- Веб-браузер. Мы рекомендуем Chrome, но подойдёт любой современный браузер (Firefox, Safari, Edge).
- Node.js и текстовый редактор или доступ к Glitch .
- Базовые знания HTML, CSS, JavaScript и Chrome DevTools .
Эта практическая работа посвящена <model-viewer> и 3D-моделям. Нерелевантные концепции и блоки кода опущены и предоставлены для простого копирования и вставки.
Вариант 1 — Глюк
Вы можете использовать онлайн-инструмент для редактирования кода, такой как Glitch, для размещения своего проекта и просмотра изменений.
Чтобы начать работу в Glitch, нажмите следующую кнопку:
Откройте предварительно загруженную среду Glitch
С этого момента вы можете использовать редактор кода Glitch для редактирования файлов, а когда будете готовы, запустите приложение, нажав кнопку «Показать в реальном времени». Попробуйте сделать это сейчас, и вы увидите следующую страницу:
Вариант 2 — Локальный сервер
Локальный сервер позволит вам использовать предпочитаемый вами редактор кода.
Установить сервер
Нам понадобится способ обслуживания локальных веб-страниц. Самый простой способ — использовать Node.js и serve — простой сервер статического контента.
Инструкции по установке Node.js в вашей операционной системе см. на сайте Node.js. После установки Node.js выполните следующую команду для установки:
npm install -g serve
Загрузить код
Начальный шаблон вместе со всеми примерами ресурсов доступен для скачивания. Перейдите по следующей ссылке и распакуйте содержимое в папку, где будет располагаться ваш проект:
В качестве альтернативы используйте git для клонирования репозитория:
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
Запуск сервера
Из каталога шаблонов, извлеченного выше (или внутри клонированного каталога, если вы использовали git), выполните команду serve , чтобы запустить веб-сервер:
Перейдите по этому адресу (на снимке экрана выше это http://localhost:5000 , но на вашем компьютере он может быть другим), чтобы увидеть очень простую отправную точку:
Начнем с редактирования файла index.html либо с помощью веб-редактора Glitch, либо — если вы используете локальный сервер — с помощью вашего любимого редактора кода.
Добавьте библиотеку <model-viewer>
Чтобы использовать <model-viewer>, нам потребуется включить набор файлов JavaScript.
Следующий раздел добавляет библиотеку <model-viewer> на вашу страницу. Вставьте следующий код в конец тега <body> .
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>Мы только что добавили библиотеки, не изменив содержимое. Обновите страницу, и вы увидите то же самое содержимое. Если вы откроете консоль DevTools, вы можете увидеть предупреждения об отсутствии API WebXR, но это ожидается до тех пор, пока этот API не будет полностью выпущен.
Максимизация совместимости
<model-viewer> изначально поддерживает множество современных браузеров. Однако, если вы хотите расширить количество поддерживаемых вашей страницей браузеров, вы можете добавить дополнительные полифиллы .
Полный рекомендуемый набор представлен ниже. Он обеспечит комфортную работу во всех современных браузерах. Подробнее см. в документации по полифиллам <model-viewer> .
Вставьте следующий код в <head> .
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->Добавить <model-viewer>
Теперь давайте добавим на страницу сам тег <model-viewer>, чтобы увидеть 3D! Замените существующий элемент <p> следующим кодом:
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>Здесь следует упомянуть только два атрибута:
- Атрибут
srcуказывает, откуда загрузить 3D-модель. В этом примере мы использовали модель Astronaut от Poly, доступную по лицензии CC-BY. - Атрибут
altсодержит альтернативное текстовое описание модели доступности.
Вы можете заметить, что оба этих атрибута имеют сильные параллели с атрибутами тега img .
Перезагрузка покажет астронавту:
Отлично! Ваша 3D-модель уже в сети!
На следующих этапах мы поэкспериментируем с большей интерактивностью и движением, изменим внешний вид элемента и попробуем применить дополненную реальность.
Давайте добавим модели немного интерактивности. Мы заставим модель вращаться по умолчанию, чтобы дать пользователям подсказку об интерактивности (и продемонстрировать это), а затем добавим элементы управления, чтобы пользователи могли самостоятельно перемещать модель с помощью мыши или касания.
Для этого просто добавьте атрибуты auto-rotate и camera-controls к элементу <model-viewer>.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>При обновлении страницы Астронавт будет медленно вращаться. Если вы попытаетесь перетащить модель (щёлкнув и переместив мышь, или, если у вас сенсорное устройство, перетащите палец), модель будет вращаться.
В совокупности эти функции дают пользователю подсказку о том, что это не просто статичное изображение, и создают ощущение интерактивности, позволяя ему почувствовать себя вовлеченным (и увидеть обратную сторону вашей модели!).
Теперь, когда у нас есть некоторое движение, давайте изменим внешний вид, чтобы сделать модель по-настоящему привлекательной.
Обновить модель
Некоторые из них (особенно изменения освещения) будут лучше всего видны на определённых моделях. Для начала обновим атрибут src , чтобы он указывал на новую модель: third_party/DamagedHelmet/DamagedHelmet.gltf (выпущена по лицензии Creative Commons Attribution-NonCommercial на Sketchfab ). Исходный код всего элемента теперь должен выглядеть так:
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Эта модель продемонстрирует некоторые изменения, которые мы собираемся осуществить!
Изменить цвет фона
Для начала изменим цвет фона, чтобы модель выделялась на странице. Добавьте следующий атрибут в тег <model-viewer>:
background-color="#70BCD1"
Установить карту окружения
Карты окружения используются для создания сцены, отражающейся от модели, и для задания конфигурации освещения. Освещение по умолчанию отлично (и совместимо с освещением Scene Viewer в ARCore), но иногда может потребоваться пользовательское окружение или специфичное освещение для достижения желаемого результата. Давайте укажем атрибут environment-image ( studio_small_07_1k.hdr взят с hdrihaven.com ).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
Добавить тень
Отбрасывание тени объектом придаёт сцене дополнительную глубину. Добавление следующего атрибута к элементу <model-viewer> добавит тень:
shadow-intensity="1"
Изменить интенсивность освещения
Модель немного тёмная; давайте немного увеличим яркость, чтобы было видно больше деталей. Как стандартное сценическое освещение, так и освещение из добавленной нами карты окружения можно настраивать независимо друг от друга. Добавьте это:
stage-light-intensity="3" environment-intensity="2"Каждое из этих изменений было незначительным, но теперь модель выглядит намного лучше!
Далее мы рассмотрим некоторые альтернативные режимы отображения.
Всё больше устройств поддерживают дополненную реальность (AR). Некоторые из этих режимов сложно активировать или требуют специального кода, но <model-viewer> справится со всей этой сложностью за вас!
Средство просмотра сцен ARCore
На поддерживаемых устройствах элемент <model-viewer> может активировать Scene Viewer от ARCore . Добавьте атрибут ar к элементу <model-viewer> — и да, это всё, что вам нужно сделать!
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Теперь, если вы просматриваете это на поддерживаемом устройстве с последней версией ARCore, вы увидите дополнительный значок (как на рисунке ниже). Щелкнув по нему, вы откроете свою модель в обозревателе сцен!
Другие устройства — iOS Quick Look, Magic Leap, WebXR
Многие другие устройства требуют немного большей доработки.
В iOS атрибут ios-src позволяет указать дополнительную версию 3D-модели в формате USDZ (требуется в iOS). При указании этого атрибута на модели отображается стандартный значок AR Quick Look для поддерживаемых устройств iOS. Подробнее об USDZ см. в документации для разработчиков Apple.
На устройствах Magic Leap атрибут magic-leap включит поддержку дополненной реальности. Обратите внимание, что необходимо также подключить библиотеку prismatic.js (она включена, но закомментирована, в дополнительных полифиллах), а 3D-модель должна быть представлена в формате .glb (а не .gltf).
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>Начальный угол и положение камеры можно контролировать. Это позволяет нам показывать пользователям более удобный вид шлема по умолчанию. Добавьте следующий фрагмент кода в тег <model-viewer>:
camera-orbit="-20deg 75deg 2m"
Конечно, эти модели можно использовать и с другим вашим контентом, в том числе на адаптивных страницах. Создание адаптивной веб-страницы выходит за рамки этой практической работы, но дополнительную информацию можно найти в книге «Основы адаптивного веб-дизайна» .
Мы включили пример страницы в наш репозиторий. Посмотрите на responsive.html в широкоэкранном режиме (как на компьютере):
Та же страница в узкой области просмотра (например, на мобильном устройстве):
Вы разместили в интернете 3D-контент! Отличная работа!
Что дальше?
Существует множество других вариантов конфигурации. Подробнее см. в нашей онлайн-документации или в коде .
После того как вы определили свои модели, вам, возможно, захочется подумать о следующих шагах:
- Некоторые модели могут быть довольно большими. В таких случаях <model-viewer> предоставляет несколько методов, обеспечивающих превосходный опыт. Подробнее см. на странице документации по отложенной загрузке .
- Анимированные модели могут быть очень увлекательными! Посетите нашу страницу «Анимация» , чтобы узнать больше о включении анимаций, заданных в ваших моделях, и переключении между ними.
- И это по-прежнему Интернет — модели могут быть встроены в ваши веб-страницы, чтобы дополнить ваш контент!
Наш процесс разработки открыт на GitHub . Мы будем рады вашим отзывам!