aframe
Компоненты

В шаблоне entity-component-system компонент является многократно используемым модульным блоком данных, который мы подключаем к сущности для добавления внешнего вида, поведения и / или функциональности.

В A-Frame компоненты изменяют объекты, которые являются 3D-объектами в сцене. Мы смешиваем и компонуем компоненты вместе для создания сложных объектов. Они позволяют нам инкапсулировать three.js и JavaScript-код в модули, которые мы можем декларативно использовать из HTML. Компоненты примерно аналогичны CSS.

Методы обработки Lifecycle Definition

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

Обзор методов

Свойства прототипа компонента

В рамках методов мы имеем доступ к прототипу компонента через this :

МЕТОДЫ

.в этом ()

.init () вызывается один раз в начале жизненного цикла компонента. Сущность может вызывать обработчик init компонента:

• Когда компонент статически задается в объекте в файле HTML, и страница загружается.
• Когда компонент установлен на прикрепленном объекте через setAttribute .
• Когда компонент установлен на непривязанный объект, и объект затем присоединяется к сцене через appendChild .

Обработчик init часто используется для:

• Настроить начальное состояние и переменные
• Методы связывания
• Приложить прослушиватели событий

Например, init компонента курсора будет устанавливать переменные состояния, методы привязки и добавлять прослушиватели событий:

AFRAME.registerComponent('cursor', {
  // ...
  init: function () {
    // Set up initial state and variables.
    this.intersection = null;
    // Bind methods.
    this.onIntersection = AFRAME.utils.bind(this.onIntersection, this);
    // Attach event listener.
    this.el.addEventListener('raycaster-intersection', this.onIntersection);
  }
  // ...
});

.update (oldData)

.update (oldData) вызывается всякий раз, когда свойства компонента изменяются, в том числе в начале жизненного цикла компонента. Сущность может вызывать обработчик update компонента:

• После init () в начале жизненного цикла компонента.
• Когда свойства компонента обновляются с помощью .setAttribute .

Обработчик update часто используется для:

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

Гранулярные модификации объекта могут выполняться с помощью [diffing] [diff] текущего набора данных ( this.data ) с предыдущим набором данных перед обновлением ( oldData ).

A-Frame вызывает .update() как в начале жизненного цикла компонента, так и при каждом изменении данных компонента (например, в результате setAttribute ). Обработчик обновления часто использует this.data для изменения объекта. Обработчик обновления имеет доступ к предыдущему состоянию данных компонента через свой первый аргумент. Мы можем использовать предыдущие данные компонента, чтобы точно указать, какие свойства были изменены для выполнения подробных обновлений.

Например, update видимого компонента устанавливает видимость объекта.

AFRAME.registerComponent('visible', {
  /**
   * this.el is the entity element.
   * this.el.object3D is the three.js object of the entity.
   * this.data is the component's property or properties.
   */
  update: function (oldData) {
    this.el.object3D.visible = this.data;
  }
  // ...
});

.Удалить ()

.remove () вызывается всякий раз, когда компонент отсоединяется от объекта. Сущность может вызывать обработчик remove компонента:

• Когда компонент удаляется из объекта через removeAttribute .
• Когда объект отсоединяется от сцены (например, removeChild ).

Обработчик remove часто используется для:

• Удалите, отмените или очистите все модификации компонента до объекта.
• Отсоедините прослушиватели событий.

Например, когда [светлый компонент] [свет] удален, световой компонент удалит светлый объект, который он ранее установил на объекте, тем самым удалив его из сцены.

AFRAME.registerComponent('light', {
  // ...
  remove: function () {
    this.el.removeObject3D('light');
  }
  // ...
});

.tick (время, времяDelta)

.tick () вызывается на каждом тике или кадре цикла рендеринга сцены. Сцена вызовет обработчик tick компонента:

• На каждом кадре цикла визуализации.
• Порядка 60-120 раз в секунду.
• Если объект или сцена не приостановлены (например, инспектор открыт).
• Если объект все еще привязан к сцене.

tick обработчик часто используется для:

• Непрерывно модифицируйте объект на каждом кадре или на интервале.
• Опрос по условиям.

Обработчик tick обеспечивает глобальное время безотказной работы сцены в миллисекундах ( time ) и разницу во времени в миллисекундах с момента последнего кадра ( timeDelta ). Они могут использоваться для интерполяции или только для запуска частей обработчика tick с заданным интервалом.

Например, компонент отслеживаемых элементов управления будет обрабатывать анимацию контроллера, обновлять положение и вращение контроллера и проверять нажатия кнопок.

AFRAME.registerComponent('tracked-controls', {
  // ...
  tick: function (time, timeDelta) {
    this.updateMeshAnimation();
    this.updatePose();
    this.updateButtons();
  }
  // ...
});

.Пауза ()

.pause () вызывается, когда объект или сцена останавливаются. Объект может вызывать обработчик pause компонента:

• Перед удалением компонента перед remove обработчика remove .
• Когда объект приостановлен с Entity.pause () .
• Когда сцена приостановлена ​​с помощью Scene.pause () (например, инспектор открыт).

Обработчик pause часто используется для:

• Удалить прослушиватели событий.
• Удалите все шансы на динамическое поведение.

Например, звуковой компонент приостанавливает звук и удаляет прослушиватель событий, который бы воспроизводил звук в событии:

AFRAME.registerComponent('sound', {
  // ...
  pause: function () {
    this.pauseSound();
    this.removeEventListener();
  }
  // ...
});

.играть ()

.play () вызывается, когда объект или сцена возобновляются. Объект может вызывать обработчик play компонента:

• Когда компонент сначала подключен, после update обработчика update .
• Когда объект был приостановлен, но затем возобновлен с Entity.play () .
• Когда сцена была приостановлена, но затем возобновлена ​​с помощью Scene.play () .

Обработчик play часто используется для:

• Добавить прослушиватели событий.

Например, компонент звука будет воспроизводить звук и обновлять прослушиватель событий, который будет воспроизводить звук в событии:

AFRAME.registerComponent('sound', {
  // ...
  play: function () {
    if (this.data.autoplay) { this.playSound(); }
    this.updateEventListener();
  }
  // ...
});

.updateSchema (данные)

.updateSchema () , если определено, вызывается для каждого обновления, чтобы проверить, требуется ли динамическое изменение схемы.

Обработчик updateSchema часто используется для:

• Динамически обновлять или расширять схему, обычно в зависимости от значения свойства.

Например, компонент геометрии проверяет, изменилось ли свойство primitive чтобы определить, следует ли обновлять схему для другого типа геометрии:

AFRAME.registerComponent('geometry', {
  // ...
  updateSchema: (newData) {
    if (newData.primitive !== this.data.primitive) {
      this.extendSchema(GEOMETRIES[newData.primitive].schema);
    }
  }
  // ...
});

КОМПОНЕНТНЫЕ ПРОТОТИПНЫЕ МЕТОДЫ

.flushToDOM ()

Чтобы сэкономить время процессора на строковом уровне, A-Frame будет обновлять только в режиме отладки сериализованное представление компонента в фактической DOM. Вызов flushToDOM () будет вручную сериализовать данные компонента и обновить DOM:

document.querySelector('[geometry]').components.geometry.flushToDOM();