Установка и первый запуск

A-Frame — это фреймворк для создания виртуальной реальности на основе WebVR и WebXR, построенный поверх HTML и JavaScript. Основной способ подключения библиотеки — через CDN. Это позволяет быстро начать работу без установки дополнительных пакетов.

Подключение через CDN:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример A-Frame</title>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 1 -5" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="2 1 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="-2 0.75 -5" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

В данном примере подключение библиотеки происходит через тег <script>. Основной контейнер сцены создаётся с помощью <a-scene>. Все объекты сцены (<a-box>, <a-sphere>, <a-cylinder>, <a-plane>, <a-sky>) являются элементами HTML с атрибутами, задающими позицию, цвет, размеры и ориентацию.

Структура проекта

A-Frame не требует сложной структуры проекта. Для небольших проектов достаточно одного HTML-файла, включающего:

  • <head> с подключением A-Frame и возможных дополнительных компонентов.
  • <body> с <a-scene>, содержащим объекты сцены.
  • Дополнительные скрипты для логики и интерактивности.

Для крупных проектов рекомендуется разделять:

  • index.html — основная сцена.
  • js/ — кастомные скрипты и компоненты.
  • assets/ — модели, текстуры, аудио и видео.
  • css/ — стили для HUD и интерфейса.

Первый запуск сцены

После подключения библиотеки и создания <a-scene> достаточно открыть HTML-файл в современном браузере с поддержкой WebXR или WebVR. В Chrome и Firefox поддержка виртуальной реальности реализована через WebXR API. Если устройство поддерживает VR-шлем, сцена автоматически подстраивается под него.

Элементы сцены обладают следующими ключевыми свойствами:

  • position — координаты объекта в формате x y z. Например, position="0 1 -5".
  • rotation — угол поворота в градусах по осям x y z.
  • scale — масштаб объекта в трёх измерениях.
  • color — цвет, заданный в формате HEX.

Работа с базовыми примитивами

A-Frame предоставляет набор стандартных примитивов:

  • <a-box> — куб или прямоугольник.
  • <a-sphere> — сфера.
  • <a-cylinder> — цилиндр.
  • <a-plane> — плоская поверхность.
  • <a-sky> — фон сцены, имитирующий небо.

Каждый примитив может быть дополнен анимацией, физикой и интерактивными компонентами. Например, для вращения объекта используется компонент animation:

<a-box position="0 1 -5" color="#4CC3D9"
       animation="property: rotation; to: 0 360 0; loop: true; dur: 5000">
</a-box>

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

Подключение внешних моделей и текстур

Для загрузки 3D-моделей используется тег <a-asset> в сцене. Он обеспечивает предварительную загрузку ресурсов:

<a-scene>
  <a-assets>
    <a-asset-item id="treeModel" src="assets/models/tree.gltf"></a-asset-item>
    <img id="grassTexture" src="assets/textures/grass.jpg">
  </a-assets>

  <a-entity gltf-model="#treeModel" position="0 0 -5"></a-entity>
  <a-plane src="#grassTexture" rotation="-90 0 0" width="10" height="10"></a-plane>
</a-scene>

Использование <a-assets> гарантирует, что все ресурсы будут загружены перед рендерингом сцены, предотвращая появление пустых объектов.

Интерактивность и события

A-Frame поддерживает события DOM-подобного формата. Простейший пример — изменение цвета при наведении курсора:

<a-box position="0 1 -5" color="#4CC3D9"
       event-set__enter="_event: mouseenter; color: #EF2D5E"
       event-set__leave="_event: mouseleave; color: #4CC3D9">
</a-box>

Компонент event-set позволяет легко создавать реакцию объектов на события mouseenter, mouseleave, click и другие.

Подключение пользовательских компонентов

Компоненты позволяют расширять функциональность объектов. Пример создания кастомного компонента для вращения:

<script>
AFRAME.registerComponent('spin', {
  schema: { speed: { type: 'number', default: 1 } },
  tick: function (time, timeDelta) {
    this.el.object3D.rotation.y += this.data.speed * timeDelta / 1000;
  }
});
</script>

<a-box position="0 1 -5" color="#4CC3D9" spin="speed: 2"></a-box>

Компонент spin применяет вращение к объекту с указанной скоростью. Использование tick обеспечивает постоянное обновление состояния объекта в каждом кадре.

Настройка камеры и управления

Камера в A-Frame задаётся тегом <a-camera>. Она может быть включена в сцену с дополнительными контроллерами:

<a-camera position="0 1.6 0">
  <a-cursor></a-cursor>
</a-camera>
  • position камеры соответствует положению глаз пользователя.
  • <a-cursor> добавляет точку прицеливания для взаимодействия с объектами сцены.
  • Дополнительно можно подключать компоненты управления, такие как wasd-controls для передвижения и look-controls для вращения взгляда.

Оптимизация сцены для производительности

Для больших сцен рекомендуется:

  • Минимизировать количество одновременно рендеримых объектов.
  • Использовать текстуры низкого разрешения там, где высокая детализация не критична.
  • Объединять примитивы и использовать instancing для повторяющихся элементов.
  • Предзагружать ресурсы через <a-assets>.

Вывод

После правильного подключения A-Frame и создания <a-scene> можно строить интерактивные VR-окружения с использованием стандартных примитивов, импортируемых моделей, пользовательских компонентов и событий. Работа с камерой, анимациями и ресурсами обеспечивает полный контроль над визуальной и интерактивной частью сцены.

Оглавление