AFRAME.registerComponent: сигнатура и структура

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

Сигнатура метода AFRAME.registerComponent

AFRAME.registerComponent(name, definition);
  • name — строка, идентификатор компонента. Он должен быть уникальным в пределах всей сцены и соблюдаться правила именования: только строчные латинские буквы и дефисы (my-component, rotate-on-click).
  • definition — объект, описывающий структуру компонента. Этот объект включает набор опциональных и обязательных свойств, определяющих поведение компонента.

Основные поля объекта definition

  1. schema Определяет структуру данных компонента. Позволяет указать типы свойств, значения по умолчанию и валидацию. Примеры типов: string, number, boolean, color, vec3.
schema: {
  speed: { type: 'number', default: 1 },
  color: { type: 'color', default: '#FFF' },
  active: { type: 'boolean', default: true }
}
  1. init Метод вызывается один раз при создании компонента и привязке его к сущности. Используется для инициализации состояния, добавления слушателей событий и настройки начальных параметров объекта.
init: function () {
  this.el.setAttribute('material', 'color', this.data.color);
}
  1. update Вызывается каждый раз при изменении данных компонента. Позволяет реагировать на обновления свойств.
update: function (oldData) {
  if (oldData.color !== this.data.color) {
    this.el.setAttribute('material', 'color', this.data.color);
  }
}
  1. tick Функция, вызываемая на каждом кадре рендеринга сцены. Применяется для анимаций, перемещений, расчёта физики или других операций, требующих обновления с высокой частотой.
tick: function (time, timeDelta) {
  this.el.object3D.rotation.y += this.data.speed * timeDelta / 1000;
}
  1. remove Метод вызывается при удалении компонента. Здесь можно убрать слушатели событий, освободить ресурсы или очистить изменения, внесённые компонентом.
remove: function () {
  this.el.removeEventListener('click', this.onClick);
}
  1. pause и play Управляют состоянием компонента при паузе или возобновлении работы сцены. Используются для остановки анимаций и процессов, чтобы экономить ресурсы.
pause: function () {
  this.active = false;
},
play: function () {
  this.active = true;
}
  1. События компонентов Компоненты могут инициировать события и реагировать на них через this.el.addEventListener. Это обеспечивает гибкую коммуникацию между объектами сцены.
init: function () {
  this.el.addEventListener('mouseenter', () => {
    this.el.setAttribute('material', 'color', '#F00');
  });
}

Полезные приёмы при создании компонентов

  • Использование this.el для доступа к DOM-сущности и её объекту 3D (object3D).
  • Применение this.data для чтения текущих значений параметров компонента.
  • Сравнение oldData и this.data в методе update для минимизации лишних изменений.
  • Сохранение ссылок на функции обработчиков событий в this, чтобы корректно удалять их в remove.
init: function () {
  this.onCl ick = () => console.log('Clicked');
  this.el.addEventListener('click', this.onClick);
}
  • Комбинирование нескольких компонентов на одной сущности для модульного подхода к логике.

Примеры расширенной структуры

Компонент может содержать вложенные функции, приватные свойства, использовать внешние библиотеки и управлять состоянием нескольких элементов одновременно.

AFRAME.registerComponent('spin-and-color', {
  schema: {
    speed: { type: 'number', default: 1 },
    colors: { type: 'array', default: ['#F00', '#0F0', '#00F'] }
  },
  
  init: function () {
    this.currentColorIndex = 0;
    this.el.setAttribute('material', 'color', this.data.colors[this.currentColorIndex]);
  },
  
  tick: function (time, timeDelta) {
    this.el.object3D.rotation.y += this.data.speed * timeDelta / 1000;
  },
  
  update: function () {
    this.currentColorIndex = (this.currentColorIndex + 1) % this.data.colors.length;
    this.el.setAttribute('material', 'color', this.data.colors[this.currentColorIndex]);
  }
});

В этом примере видно сочетание анимации через tick, управления состоянием через update и использование массива данных из schema. Такой подход позволяет создавать сложные интерактивные элементы сцены без нарушения структуры кода и производительности.

Структура компонента в A-Frame — это чёткая комбинация данных и методов, обеспечивающая взаимодействие с сущностью, управление её поведением и интеграцию с событиями сцены. Правильное использование schema, жизненных методов (init, update, tick, remove) и событийной модели позволяет создавать мощные, модульные и переиспользуемые элементы виртуальной реальности.

Оглавление