Глобальный объект AFRAME и его свойства

В библиотеке A-Frame ключевую роль играет глобальный объект AFRAME, который выступает как центральная точка доступа к функциональности фреймворка. Он инкапсулирует систему компонентов, систем, схем, регистраций и вспомогательных утилит для работы с виртуальной реальностью в браузере. Понимание структуры AFRAME и его свойств является фундаментальным для создания сложных VR-приложений.

Основные свойства AFRAME

1. AFRAME.components

Содержит реестр всех зарегистрированных компонентов. Компоненты в A-Frame — это модули, расширяющие функциональность сущностей (<a-entity>). Каждый компонент описывается объектом со следующими ключевыми методами:

  • init() — инициализация компонента при создании сущности.
  • update(oldData) — вызов при изменении данных компонента.
  • remove() — очистка ресурсов при удалении компонента.
  • tick(time, deltaTime) — вызывается на каждом кадре, позволяет реализовать анимации и динамическое поведение.

Пример регистрации компонента:

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

Доступ к компоненту можно получить через AFRAME.components['spin'].

2. AFRAME.systems

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

  • renderer — управление рендерером Three.js.
  • physics — обработка физических расчетов сцены.
  • input — управление пользовательскими взаимодействиями.

Системы регистрируются аналогично компонентам:

AFRAME.registerSystem('exampleSystem', {
  init: function () { console.log('System initialized'); },
  tick: function (time, deltaTime) { /* логика обновления */ }
});

Сущности могут обращаться к системам через this.el.sceneEl.systems.exampleSystem.

3. AFRAME.shaders

Хранит все зарегистрированные шейдеры для материалов. Шейдеры определяют, как поверхность объектов реагирует на освещение и визуальные эффекты. Стандартные шейдеры включают standard, flat, lambert и phong. Пользовательские шейдеры регистрируются с помощью:

AFRAME.registerShader('customShader', {
  schema: { color: { type: 'color', default: '#FFF' } },
  vertexShader: '...', 
  fragmentShader: '...'
});

4. AFRAME.primitives

Примитивы — это заранее настроенные комбинации сущностей и компонентов, например <a-box>, <a-sphere>. Они облегчают создание сцены, позволяя использовать декларативный HTML вместо явной регистрации сущностей и компонентов через JS.

5. AFRAME.utils

Набор утилитарных функций, используемых во внутренней логике A-Frame или для ускорения разработки. Основные методы:

  • AFRAME.utils.entity.setComponentProperty(entity, component, property, value) — безопасное обновление свойства компонента.
  • AFRAME.utils.styleParser.parse(cssText) — парсинг CSS-стиля в объект.
  • AFRAME.utils.clone(object) — глубокое клонирование объектов.

Утилиты важны для написания модульного и надежного кода.

6. AFRAME.registerComponent и AFRAME.registerSystem

Методы регистрации — фундамент для расширения фреймворка:

  • AFRAME.registerComponent(name, definition) — добавление нового компонента в реестр.
  • AFRAME.registerSystem(name, definition) — добавление глобальной системы.

Оба метода возвращают зарегистрированный объект, что позволяет использовать их напрямую.

7. AFRAME.version

Содержит строку с текущей версией библиотеки. Это полезно для проверки совместимости кода при загрузке внешних компонентов или плагинов.

console.log('A-Frame version:', AFRAME.version);

8. AFRAME.isScene

Функция для проверки, является ли DOM-элемент сценой A-Frame. Используется при динамическом создании сущностей:

if (AFRAME.isScene(document.querySelector('a-scene'))) {
  console.log('Элемент — сцена A-Frame');
}

Архитектура и взаимодействие свойств

Глобальный объект AFRAME организован по принципу реестров и фабрик:

  • Реестры (components, systems, shaders, primitives) позволяют хранить и искать расширяемые элементы.
  • Фабрики (registerComponent, registerSystem) обеспечивают единообразное создание новых модулей.
  • Утилиты (utils) упрощают работу с объектами и сущностями, снижая риск ошибок при прямом манипулировании сценой.

Это позволяет строить сложные VR-приложения, сохраняя контроль над каждым аспектом сцены и компонентами.

Взаимодействие с сущностями

Каждая сущность <a-entity> при добавлении компонента получает ссылку на глобальный объект через AFRAME.components. Системы могут обращаться к компонентам всех сущностей сцены через sceneEl.systems, обеспечивая гибкую архитектуру связанных модулей. Такой подход упрощает управление состоянием сцены, синхронизацию данных и внедрение кастомной логики.

Примеры интеграции нескольких свойств

Создание вращающегося куба с кастомным шейдером и системой управления:

AFRAME.registerShader('colorPulse', {
  schema: { color: { type: 'color', default: '#FF0000' } },
  fragmentShader: 'void main() { gl_FragColor = vec4(1.0,0.0,0.0,1.0); }',
  vertexShader: 'void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }'
});

AFRAME.registerComponent('pulse', {
  tick: function (time) {
    this.el.object3D.scale.setScalar(Math.sin(time/500)+1.5);
  }
});

AFRAME.registerSystem('globalControl', {
  init: function () { console.log('Global system ready'); }
});

Использование в HTML:

<a-scene>
  <a-box position="0 1 -5" material="shader: colorPulse" pulse></a-box>
</a-scene>

Такое взаимодействие демонстрирует мощь AFRAME как центрального объекта для управления компонентами, системами, шейдерами и сценой в целом.

Оглавление