Сегодня люди часто носят в карманах устройства, поддерживающие дополненную реальность (AR) и виртуальную реальность (VR). Все чаще контент, которым мы делимся друг с другом на этих устройствах, является 3D. В этой лаборатории кода вы узнаете, как использовать веб-компонент под названием <model-viewer> для добавления 3D-контента на ваш веб-сайт или в прогрессивное веб-приложение (PWA) так же просто, как и изображение с помощью HTML!
Что вы будете строить
Веб-сайт, содержащий интерактивную 3D-модель с возможностью отображения AR-голограмм.
Что вы узнаете
- Как установить веб-компонент
<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 запустите эту команду, чтобы установить подачу:
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>
Нам потребуется включить набор файлов JavaScript, чтобы использовать <model-viewer>.
В следующем разделе на вашу страницу добавляется библиотека <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>, чтобы мы могли видеть 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-модель в Интернете!
На следующих этапах мы поэкспериментируем с большей интерактивностью и движением, изменим внешний вид элемента и погрузимся в AR.
Добавим модели немного интерактивности. У нас будет вращаться модель по умолчанию, чтобы дать пользователям намек на то, что модель интерактивна (а также показать ее), а затем мы включим элементы управления, чтобы пользователи могли сами перемещать модель с помощью мыши или касания. .
Для этого просто добавьте атрибуты 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" 
Установите карту окружения
Карты окружения используются для создания окружающей сцены, отраженной от модели, и для указания конфигурации освещения. Освещение по умолчанию превосходно (и совместимо с освещением ARCore Scene Viewer), но иногда у вас может быть пользовательская среда или может потребоваться специальное освещение для результатов, которых вы пытаетесь достичь. Укажем атрибут 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> может запускать средство просмотра сцен 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 позволяет указать дополнительную USDZ-версию 3D-модели (которая требуется в iOS). Если указан этот атрибут, на модели для поддерживаемых устройств iOS появится стандартный значок AR Quick Look. Дополнительные сведения о 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 . Мы хотели бы услышать от вас!