Долгое время 3D было чем-то, о чем упоминали многие разработчики, но из-за сложностей, связанных с разработкой 3D в Интернете, оно было недоступно для большинства сообщества.

К счастью, со временем дела почти всегда улучшаются. Вот уже несколько лет люди из Google активно работают над веб-компонентом, который делает работу с 3D-моделями почти такой же простой, как вставку изображений в HTML-документ. Программа просмотра моделей от Google - это амбициозная разработка, которая позволяет разработчикам не только добавлять 3D-модели на веб-сайты и в приложения, но и поддерживать функции AR на iOS и Android.

Почему бы нам не попробовать реализовать это самостоятельно?

Следующее руководство следует документации, приведенной на официальной странице программы просмотрщик моделей.

Начиная

Прежде чем мы начнем, нам нужно позаботиться о нескольких вещах:

  1. Подготовьте шаблон HTML (здесь мы будем использовать веб-компонент)
  2. Найдите 3D-модель, которую вы хотите использовать в этом руководстве. Место, которое я порекомендую, - Poly, так как большинство моделей поддерживают форматы, с которыми мы будем работать. Первым, что нам понадобится, может быть glTF или GLB. Любой из этих форматов будет поддерживать просмотр 3D-моделей в Интернете и AR для Android. Если мы хотим поддерживать ARKit для iOS, нам также понадобится версия USDZ, конвертер можно найти здесь.

Реализация просмотрщика моделей

Первое, что нам нужно сделать, это импортировать компонент просмотра моделей со следующим фрагментом (через CDN):

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>

Если мы хотим поддерживать устаревшие браузеры с помощью полифиллов, мы также можем добавить следующий фрагмент:

<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Теперь все, что нам нужно сделать, это использовать компонент просмотра моделей, как если бы это был любой собственный HTML-тег. Вот базовый фрагмент для поддержки модели по следующему пути assets/3DModel.gltf:

<model-viewer src="assets/3DModel.gltf"></model-viewer>

Вы успешно внедрили программу просмотра моделей!

Атрибуты! Атрибуты! Атрибуты!

Теперь, когда вы успешно добавили 3D-модель на свою веб-страницу, вам, вероятно, следует начать изучать различные атрибуты, которые вы можете использовать для настройки своего средства просмотра моделей.

Полный их список с интерактивной демонстрацией доступен здесь. А пока я остановлюсь на некоторых из самых популярных.

Мы можем разрешить пользователю / клиенту веб-страницы взаимодействовать с 3D-моделью, добавив атрибут camera-controls, это также даст посетителю страницы тонкий жест, указывающий, что он может управлять им.

<model-viewer 
  src="assets/3DModel.gltf" 
  camera-controls
>
</model-viewer>

Мы также можем настроить автоматическое вращение 3D-модели без ввода данных пользователем с помощью следующего атрибута: auto-rotate, реализованного вместе с camera-controls, наш компонент будет выглядеть следующим образом:

<model-viewer 
  src="assets/3DModel.gltf" 
  camera-controls
  auto-rotate
>
</model-viewer>

Если вы хотите добавить поддержку AR, вы можете сделать это с помощью атрибута ar, однако для поддержки iOS вам также потребуется атрибут ios-src="3DModel.usdz", где источником является путь к версии модели USDZ. С добавленными атрибутами AR, камеры и автоповорота ваш компонент должен выглядеть так:

src="assets/3DModel.gltf" 
  camera-controls
  auto-rotate
  ar
  ios-src="3DModel.usdz"
>
</model-viewer>

НЕ ЗАБЫВАЙТЕ СВОИ ALT-ТЕГИ

Если вы собираетесь заниматься разработкой в ​​Интернете, очень важно помнить о пользователях, у которых могут быть препятствия, затрудняющие восприятие вашего контента. Как и в изображениях, теги alt присутствуют и в средстве просмотра моделей, поэтому вы можете добавить альтернативное описание, например:

src="assets/3DModel.gltf" 
  camera-controls
  auto-rotate
  ar
  ios-src="3DModel.usdz"
  alt="a 3d model of a penguin"
>
</model-viewer>

Вот и все, что касается основ реализации программы просмотра моделей впервые. Если вам понравилось, то обязательно загляните на официальную страницу или репозиторий GitHub

Если вы хотите увидеть подобное руководство в видеоформате, ознакомьтесь со следующим учебником, который я опубликовал на YouTube: