Маппинг атрибутов на компоненты

В A-Frame каждый объект сцены представлен сущностью (), которая может содержать один или несколько компонентов. Компонент — это модуль, описывающий поведение, внешний вид или взаимодействие объекта. Компоненты могут быть встроенными (geometry, material, position, rotation) или пользовательскими, созданными через API A-Frame.

Каждый компонент имеет набор атрибутов, которые задают его свойства. Например, компонент geometry имеет атрибуты primitive, height, width, depth, а material — color, opacity, shader. Правильный маппинг атрибутов на компоненты позволяет управлять объектами сцены эффективно и динамически.

В этом примере атрибуты width, height и depth относятся к компоненту geometry, а color и opacity — к material. Атрибут position принадлежит одноименному компоненту, встроенному в систему A-Frame.

Синтаксис маппинга атрибутов

Атрибуты компонентов могут задаваться в двух форматах:

  1. Короткий формат, если компонент имеет один основной параметр:
  1. Полный формат с перечислением атрибутов через ;:

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

Динамическое управление атрибутами через JavaScript

Компоненты и их атрибуты можно изменять в рантайме с помощью методов setAttribute и getAttribute.

// Получение элемента сцены
const box = document.querySelector('#box');

// Изменение цвета материала
box.setAttribute('material', 'color', 'blue');

// Изменение размеров геометрии
box.setAttribute('geometry', {
  width: 3,
  height: 2,
  depth: 1
});

// Чтение текущих значений
const materialColor = box.getAttribute('material').color;

Метод setAttribute поддерживает как строковый синтаксис, так и объектный формат. Использование объекта позволяет задавать несколько атрибутов одновременно, что особенно удобно для компонентов с большим числом параметров.

Пользовательские компоненты и их атрибуты

Создание собственного компонента осуществляется через AFRAME.registerComponent. Компонент может содержать схему атрибутов, методы init, update, tick и remove. Схема определяет типы данных, значения по умолчанию и описание.

AFRAME.registerComponent('spin', {
  schema: {
    speed: {type: 'number', default: 1},
    axis: {type: 'string', default: 'y'}
  },
  tick: function (time, timeDelta) {
    const rotation = this.el.getAttribute('rotation');
    if (this.data.axis === 'x') rotation.x += this.data.speed * timeDelta / 1000;
    if (this.data.axis === 'y') rotation.y += this.data.speed * timeDelta / 1000;
    if (this.data.axis === 'z') rotation.z += this.data.speed * timeDelta / 1000;
    this.el.setAttribute('rotation', rotation);
  }
});

Привязка атрибутов к компоненту:

Здесь speed и axis маппятся на свойства пользовательского компонента spin.

Вложенные компоненты и декомпозиция

Некоторые компоненты могут включать вложенные объекты или подкомпоненты. Например, light можно комбинировать с animation:

Свойство light.intensity маппится на вложенный параметр компонента light. A-Frame автоматически распознаёт вложенные ключи через точку (.), что позволяет управлять сложными структурами компонентов без написания пользовательского кода.

Практические рекомендации по маппингу атрибутов

  • Использовать объектный формат для компонентов с большим числом атрибутов.
  • Проверять правильность типов данных в схеме компонента: number, string, boolean, vec3, color.
  • Для динамических изменений предпочтительнее setAttribute вместо прямой модификации DOM.
  • Вложенные атрибуты через точку позволяют управлять сложными объектами, не создавая лишних сущностей.
  • Для пользовательских компонентов обязательно описывать схему атрибутов, чтобы избежать ошибок при маппинге.

Типы данных атрибутов

Система A-Frame поддерживает несколько типов:

  • number — числовые значения, включая дробные.
  • string — текстовые строки.
  • boolean — true/false.
  • vec3 — трёхмерный вектор (например, position, scale).
  • color — цвет в формате #RRGGBB или rgb().
  • selector — ссылка на другой элемент сцены (document.querySelector).

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

Использование множества компонентов на одной сущности

Одна сущность может иметь несколько компонентов, и каждый компонент независимо управляет своей областью:

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

Оглавление