В феврале мы представили веб-компонент <model-viewer> , который позволяет декларативно добавлять 3D-модель на веб-страницу, размещая ее на собственном сайте. Единственное, что он не поддерживал, — это дополненная реальность. То есть вы не можете визуализировать исходное изображение компонента поверх изображения с камеры устройства.
Для этого мы добавили поддержку Magic Leap и Quick Look на iOS. Теперь мы объявляем о поддержке AR на Android с добавлением атрибута ar . Этот атрибут создан на основе новой функции ARCore под названием Scene Viewer — внешнего приложения для просмотра 3D-моделей. Чтобы узнать больше о Scene Viewer, ознакомьтесь со статьей Просмотр 3D-моделей в AR из браузера Android .
Давайте посмотрим, как создать дополненную реальность с помощью <model-viewer> .
Атрибут
Как вы помните, веб-компонент не требует специальных знаний для использования. Он ведет себя как стандартный элемент HTML, имеющий уникальный тег, а также свойства и методы. После установки его с помощью тега <script> используйте его как любой другой элемент HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Это выглядит почти так же, как то, что я имел в своей предыдущей статье. Обратите внимание на то, что я выделил в самом конце. Это новый атрибут.
Установка новой версии
Если вы уже используете <model-viewer> , вы, вероятно, импортируете компонент с помощью тегов <script> точно так , как показано в документации . Мы постоянно совершенствуемся. Если вы хотите протестировать новые функции перед намеренным обновлением и развертыванием, вам нужно установить определенную версию <model-viewer> . Для этого добавьте номер версии к URL-адресам файлов, как показано ниже. Затем следите за обновлениями на странице выпусков .
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
Заключение
Попробуйте новую версию <model-viewer> и поделитесь с нами своим мнением. Проблемы и отзывы приветствуются на GitHub .