Занятие № 1. Создание VR-приложений с помощью библиотеки A-Frame

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

Перейдите на сайт среды разработки codesandbox.io. Нажмите кнопку Sign In (Вход).

Выберите вариант Sign in with Google (Вход с помощью Google-аккаунта). Введите ваш логин и пароль. Подтвердите разрешение на доступ.

Выберите для чего будете использовать среду разработки и нажмите кнопку Create account (Создать аккаунт):

Выберите имя для вашего рабочего пространства. Имя может быть произвольным:

Выберите для чего будет использоваться среда разработки:

Выберите бесплатный тариф, нажав на кнопку Get started for free.

Задание № 1. Базовая сцена

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>VR-приложение</title>
    <script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.6.1/dist/aframe-extras.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.5.x/dist/aframe-environment-component.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.4/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <style>
      iframe {
        display: none !important;
      }
    </style>
    <a-scene> </a-scene>
  </body>
</html>

Объекты виртуальной среды добавляется между тегами <a-scene> </a-scene>.

Запишите внутри тега <a-scene> следующий код:

1<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
2<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
3<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4">
</a-plane>
4<a-sky color="#ECECEC"></a-sky>
1
Добавляем куб. position - пространственные координаты центра куба, rotation - поворот по трём просранственным осям, color - цвет фигуры в HEX-формате.
2
Добавляем сферу. radius - радиус сферы в метрах.
3
Добавляем плоскость. width - длина, height - ширина.
4
Добавляем заливку остального пространства.

Сохраните результат. В окне предпросмотра должна появиться следующая сцена:

При указании значений в атрибутах position и rotation стоит учитывать ориентацию координатных осей:

A-Frame по умолчанию добавляет возможность управлять камерой, зажав левую кнопку мыши и передвигаться с помощью клавиш WASD. Попробуйте посмотреть на сцену с разных сторон. Начальная позиция камеры - 0 1.6 0.

Поменяйте цвет неба на синий, и добавьте к сцене ещё один куб жёлтого цвета, примерное расположение которого показано на рисунке:

Задание № 2. Настройки окружения. Загрузка моделей

Удалите все объекты со сцены. Для этого удалите весь код внутри тега <a-scene>.

Для быстрого создания окружения используем расширение aframe-environment-component. С его помощью можно одним объектом создать базовое окружение сцены.

Добавьте в сцену следующую разметку:

<a-entity environment="preset: contact"></a-entity>

contact -это один из шаблонов окружения, который доступен в расширении. С другими шаблонами ознакомьтесь по ссылке.

Сохраните результат. Теперь сцена должна выглядеть приблизительно следующим образом:

Добавим к сцене трёхмерную модель космического аппарата Спутник-11 из внешнего файла. Рекомендуется использовать файлы форматов gltf и glb.

Перетащите файл sputnik_1.glb в проводник проекта:

Добавьте тег <a-gltf-model>, чтобы показать модель на сцене:

<a-gltf-model
  src="sputnik_1.glb"
  scale="0.5 0.5 0.5"
1  position="0 1.7 -1">
</a-gltf-model>
1
Добавляем на сцену трёхмерную модель. src - имя файла с моделью, scale - масштабирование по трём пространственным осям. Масштаб 1 - оригинальный размер модели.

Атрибут scale задаёт масштаб объекта по трём пространственным осям. Атрибут полезен когда импортируемая модель слишком маленькая или большая по размерам.

Сохраните результат. На сцене появится указанная в атрибуте src модель:

Сейчас модель неподвижна. Добавим анимацию вращения.

Добавьте в тег <a-gltf-model> атрибут animation:

<a-gltf-model
1  animation="property: rotation; to: 0 360 0; loop: true; dur: 10000; easing: linear">
</a-gltf-model>
1
property - какое свойство объекта анимировать. В данном примере - поворот. to - конечное значение анимированного свойства. В данном примере поворот по оси y на 360 градусов. loop - нужно ли бесконечно повторять анимацию. dur - продолжительность анимации в миллисекундах. easing - сглаживание анимации. Значение linear означает, что анимация не ускоряется в начале и не замедляется в конце.

Сохраните изменения. Анимация будет выглядеть так:

Добавьте на сцену ещё две модели: lunokhod-2.glb и vostok_1.glb. Подберите масштаб и расположение моделей так, чтобы они были расположены в виде треугольника:

Вид сверху

Вид сверху

Задание № 3. Настройка перемещений в VR-режиме

Стандартные настройки перемещения по сцене не подходят для мобильных устройств. Используем расширение aframe-extras чтобы добавить универсальный контроль камеры как для компьютера, так и для мобильного устройства.

Добавьте в сцену тег <a-entity> c атрибутом movement-controls. Внутри этого объекта должен находится тег с атрибутом camera:

1<a-entity movement-controls position="0 0 1.5">
    <a-entity
      camera
      position="0 1.6 0"
2      look-controls="pointerLockEnabled: true">
    </a-entity>
</a-entity>
1
Атрибут movement-controls говорит, что теперь объект будет отвечать за перемещение по сцене. position указывает координаты появления вашего аватара на сцене.
2
Это компонент-камера. position указывает, что камера находится на высоте 1.6 м от земли. look-controls нужен для того, чтобы камера следила за курсором мыши и поворотами телефона.

Сохраните проект. Кликните мышью в окно предпросмотра. Курсор пропадёт и камера будет следовать движениям мыши. Для движения используйте клавиши WASD.

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

Если ссылка не открывается, убедитесь что проект открыт для просмотра тем, у кого есть ссылка:

На открывшейся странице нажмите ссылку Yes, proceed to preview (Да, перейти к просмотру страницы). Теперь вы можете осматриваться в пространстве поворачивая телефон. Для движения по направлению взгляда коснитесь экрана в одной любой точке. Для движения назад - коснитесь экрана в любых двух точках одновременно.

На телефоне нажмите кнопку VR, чтобы перейти в VR-режим. После этого на экране телефона появится стереопара - два изображения для левого и правого глаза. Попробуйте коснуться экрана. Будет ли двигаться камера?

Нажмите на крестик чтобы выйти из VR-режима.

В данном режиме не обрабатываются события касания экрана. Для движения используем контрольные точки - заранее заданные точки на сцене между которыми можно перемещаться.

Измените содержимое тега с атрибутом movement-control следующим образом:

<a-entity
  movement-controls="controls: checkpoint"
  checkpoint-controls="mode: animate"
1  position="0 0 1.5">
  <a-entity
    camera
    position="0 1.6 0"
    look-controls="pointerLockEnabled: true">
2    <a-cursor material="color: #CCC; shader: flat;"></a-cursor>
  </a-entity>
</a-entity>
1
Теперь движение будет возможно только по контрольным точкам. В checkpoint-controls указываем, что передвижение между контрольными точками должно сопровождаться плавной анимацией.
2
Внутрь объекта camera помещает объект <a-cursor>. Это курсор в трёхмерном пространстве. С его помощью легче наводить взгляд на интерактивные элементы.

Добавим на сцену объекты, которые будут выступать в качестве контрольных точек. Направив на них курсор мы будем двигаться в их сторону.

Добавьте в сцену тег <a-cylinder> с атрибутом checkpoint:

<a-cylinder
    checkpoint
    radius="1"
    height="0.1"
    position="0 0 1.5"
    color="#39BB82">
1</a-cylinder>
1
Атрибут checkpoint говорит, что этот компонент будет контрольной точкой. В данном случае создаём цилиндр.

Добавьте ещё два цилиндра с атрибутом checkpoint рядом с двумя другими моделями на сцене. Расположение контрольных точек может быть следующим:

Вид сверху

Вид сверху

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

Обновите страницу на мобильном телефоне и войдите в VR-режим. Направьте взгляд на контрольную точку и задержите на ней курсор приблизительно на две секунды. После этого камера должна переместиться к этой контрольной точке.

Задание № 4*. Интерактивность

Добавим на виртуальную сцену виртуальный видеоплеер.

Перетащите в проводник проекта видеоролик s1.mp42:

Добавьте к сцене следующую разметку:

1<a-assets>
    <video
      id="sputnik-1"
      muted
      crossorigin="anonymous"
      src="s1.mp4">
2    </video>
</a-assets>

<a-video
    src="#sputnik-1"
    position="-2.5 1.6 -1.8"
    rotation="0 35 0"
    height="2"
    width="3.5"
3></a-video>
1
Внутри тега <a-assets> можно перечислить все ассеты, исользуемые на странице - изображения, видео, аудиофайлы, 3D-модели. Пока все ассеты не будут загружены, сцена не отобразится.
2
Добавляем один ассет - видеофайл s1.mp4.
3
Тег <a-video> используется для создания виртуального видеопроигрывателя. Видео, указанное в атрибуте src проецируется на плоскость с шириной width и высотой height.

Сохраните изменения. Рядом с моделью Спутника-1 появится плоскость с первым кадром видео:

Воспроизведение видео на начнётся самостоятельно.

На мобильных устройствах нельзя включить автоматическое воспроизведение видеофайлов. Для этого необходимо добавить к A-Frame собственный компонент с необходимым поведением. Компонент будет получать ссылку на компонент с видео и по клику или долгому взгляду на мобильном устройстве, начинать воспроизведение видео. Затем название компонента нужно вписать как атрибут в тег <a-video>.

После закрывающего тега </a-scene> добавьте скрипт с описанием компонента play-on-gaze:

<script>
  AFRAME.registerComponent("play-on-gaze", {
    init: function () {
      const video = document.querySelector("#sputnik-1");
      this.el.addEventListener("click", () => {
        video.play();
      });
    },
  });
</script>

Добавьте атрибут play-on-gaze в тег <a-video>:

<a-video
    src="#sputnik-1"
    position="-2.5 1.6 -1.8"
    rotation="0 35 0"
    height="2"
    width="3.5"
    play-on-gaze>
</a-video>

Сохраните изменения. Обновите страницу на мобильном устройстве и удерживайте курсор на видеоплеере в течении двух секунд. После этого видео начнёт воспроизводиться.

Сноски

  1. Модели взяты с ресурса Sketchfab. Автор моделей - пользователь tashtego.↩︎

  2. Видео взято с Youtube-канала Роскосмос ТВ. Ссылка на видео - Спутник 1.↩︎