Занятие № 2. Создание AR-приложений с помощью библиотеки AR.js

Задание № 0. Настройка среды разработки

Скачайте архив с файлами, которые позже понадобятся для создания проекта¹. Распакуйте его на рабочем диске.

Перейдите на сайт среды разработки codesandbox.io. Войдите в свою учётную запись.

Перейдите по ссылке чтобы открыть шаблон AR-проекта в среде CodeSandbox.

Нажмите кнопку в правом верхнем углу экрана, чтобы создать редактируемую копию шаблона проекта на вашем аккаунте. Дважды кликните по случайно сгенерированному имени проекта и назовите его Дополненная реальность:

Шаблон содержит следующую HTML-разметку:

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <title>AR-приложение</title>
  <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/aframe-label@0.1.0/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.6.1/dist/aframe-extras.min.js"></script>
  <style>
    iframe {
      display: none !important;
    }
  </style>
  <body style="margin: 0px; overflow: hidden">
    <a-scene
      embedded
      arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
      <a-entity camera></a-entity>
        
    </a-scene>
  </body>
</html>

Задание № 1. Использование стандартного маркера

Объекты, которые должны появиться после распознавания маркера должны находится внутри тега <a-marker>. В атрибутах тега указывается тип маркера и дополнительные параметры. Для первого задания используем стандартный маркер Hiro:

Внутри тега <a-scene> разместите следующую разметку:

<a-marker preset="hiro">
    <a-plane
      position="0 0 0"
      rotation="-90 0 0"
      width="1.8"
      height="1.8"
      color="#aaae8e">
    </a-plane>
    <a-cylinder
      position="0.5 0.75 0"
      radius="0.3"
      height="1"
      color="#373f51">
    </a-cylinder>
</a-marker>

После обнаружения маркера к его положению будет привязано расположение плоскости и цилиндра.

Сохраните изменения. Откройте ссылку в верхней части окна предпросмотра на вашем мобильном телефоне.

Разрешите использование камеры телефона. Наведите камеру на маркер Hiro. Убедитесь, что к маркеру привязана плоскость и цилиндр. Попробуйте двигать и вращать маркер.

Задание № 2. Применение нескольких маркеров

Библиотека AR.js поддерживает одновременное распознавание положения нескольких маркеров. Хотя на практике не рекомендуется использовать одновременно больше 5-10 маркеров.

Библиотека поддерживает barcode-маркеры. Пример такого маркера показан на изображении:

В маркере закодирован его идентификатор. Это значение будем указывать в разметке. Изображения маркеров можно найти в этом репозитории.

Перетащите в проводник проекта файл с моделью sun_and_solar_flares.glb:

Добавьте внутрь тега <a-scene> следующую разметку:

1<a-marker type="barcode" value="0">
    <a-entity
      gltf-model="sun_and_solar_flares.glb"
      scale="1 1 1"
      position="0 2 0">
    </a-entity>
    <a-plane
      position="0 0 0"
      rotation="-90 0 0"
      width="1.8"
      height="1.8"
      color="#040303">
    </a-plane>
</a-marker>

1: type - тип маркера. В данном случае - barcode. value - идентификатор маркера. После обнаружения маркера с этим идентификатором, к нему будут привязаны компоненты расположенные внутри тега <a-marker>.

Сохраните изменения. Обновите страницу с проектом на телефоне.

Наведите камеру на маркер с идентификатором 0. Убедитесь, что к маркеру привязана плоскость и трёхмерная модель солнца. Попробуйте двигать и вращать маркер.

Добавим к демонстрации текстовую метку. Для этого используем расширение для A-Frame под названием aframe-label. Особенность этого компонента в том, что текст будет связан линией с указанной точкой и всегда повёрнут в камеру.

Добавьте к разметке для маркера с идентификатором 0 следующие теги:

<a-marker type="barcode" value="0">
    . . .
1    <a-entity position="0 1.5 0" label-anchor="offsetVector: 0.15 0.15 0">
      <a-text
        material="color:white"
        value="Sun"
        width="0.8"
        label="overwrite:true"
2      ></a-text>
    </a-entity>
</a-marker>

1: Добавляем внутрь маркера объект с атрибутом lable-anchor. position задаёт координаты точки из которой будет выходить соединительная линия. offsetVector - вектор на который смещаются надпись.
2: Внутрь объекта с атрибутом label-anchor добавляем текстовую метку с текстом Sun (Солнце).

Сохраните изменения. Обновите страницу с проектом на телефоне.

Наведите камеру на маркер с идентификатором 0. Убедитесь, что рядом с моделью солнца появилась метка с текстом Sun. Текс должен быть всегда повёрнут в сторону камеры.

Добавьте в проводник проекта файл с моделью ap_magnetism_c_em.glb. Привяжите отображение этой модели к маркеру с идентификатором 1:

Задание № 3. Модели с анимацией

Файл модели может содержать набор именованных анимаций. Чтобы их воспроизводить, нужно воспользоваться компонентом animation-mixer из библиотеки aframe-extras.

Внутрь тега <a-entity> который вы использовали чтобы добавить модель ap_magnetism_c_em.glb добавьте следующую строку:

<a-entity
  . . .
1  animation-mixer="clip: *; loop: repeat">
</a-entity>

1: В свойстве clip можно указать имя проигрываемой анимации. Звёздочка * может использоваться для подстановки любых символов. В этом примере будет проигрываться первая найденная анимация. Свойство loop определяет будет ли анимация повторяться.

Сохраните изменения. Обновите страницу с проектом на телефоне.

Наведите камеру на маркер с идентификатором 1. Модель перестанет быть статичной и начнётся воспроизведение анимации.

Сноски

Модель солнца - Chaitanya Krishnan, магнитное поле - Sophia Sun.↩︎