Типы данных в схеме: string, number, boolean, vec2, vec3, color, selector и другие

A-Frame предоставляет гибкий механизм для создания компонентов через схемы (schema), которые описывают свойства компонента и их типы. Типы данных определяют, каким образом библиотека будет интерпретировать значения, передаваемые в HTML или через JavaScript.

String

Тип string используется для текстовых значений. Это самый простой тип данных:

AFRAME.registerComponent('example-string', {
  schema: {
    text: { type: 'string', default: 'Привет, мир!' }
  },
  init: function () {
    console.log(this.data.text);
  }
});
  • Особенности: любые значения интерпретируются как строки.
  • Применение: имена объектов, пути к ресурсам, текстовые метки.

Number

Тип number предназначен для числовых значений, включая целые и дробные числа.

AFRAME.registerComponent('example-number', {
  schema: {
    speed: { type: 'number', default: 1.0 }
  },
  tick: function (time, timeDelta) {
    this.el.object3D.position.x += this.data.speed * timeDelta / 1000;
  }
});
  • Особенности: можно использовать арифметические операции, интерполяцию, анимации.
  • Дополнительно: поддерживаются числовые выражения при передаче через HTML: <a-entity example-number="speed: 2.5"></a-entity>.

Boolean

Тип boolean хранит значения true или false.

AFRAME.registerComponent('example-boolean', {
  schema: {
    active: { type: 'boolean', default: true }
  },
  update: function () {
    if (this.data.active) {
      this.el.setAttribute('visible', true);
    } else {
      this.el.setAttribute('visible', false);
    }
  }
});
  • Особенности: удобно для включения или отключения эффектов, видимости объектов, состояния компонентов.
  • Передача через HTML: <a-entity example-boolean="active: false"></a-entity>.

Vec2

vec2 представляет двухмерный вектор {x, y}. Используется для координат в 2D-пространстве, масштабирования и смещений.

AFRAME.registerComponent('example-vec2', {
  schema: {
    offset: { type: 'vec2', default: { x: 0, y: 0 } }
  },
  init: function () {
    console.log(this.data.offset.x, this.data.offset.y);
  }
});
  • Особенности: значения можно задавать через строку "1 2" или объект {x:1, y:2}.
  • Применение: UV-координаты, смещение текстур, позиционирование 2D-элементов.

Vec3

vec3 представляет трёхмерный вектор {x, y, z} и является наиболее часто используемым типом в A-Frame.

AFRAME.registerComponent('example-vec3', {
  schema: {
    position: { type: 'vec3', default: { x: 0, y: 1, z: 0 } }
  },
  init: function () {
    this.el.object3D.position.set(
      this.data.position.x,
      this.data.position.y,
      this.data.position.z
    );
  }
});
  • Особенности: можно передавать строку "0 1 0" или объект {x:0, y:1, z:0}.
  • Применение: координаты объектов, направление движения, масштабирование и вращение.

Color

Тип color используется для задания цвета в формате #RRGGBB, rgb() или стандартных названий цветов.

AFRAME.registerComponent('example-color', {
  schema: {
    color: { type: 'color', default: '#FFF' }
  },
  update: function () {
    this.el.setAttribute('material', 'color', this.data.color);
  }
});
  • Особенности: поддерживаются как шестнадцатеричные, так и CSS-цвета.
  • Применение: цвет материалов, света, фона.

Selector

Тип selector позволяет ссылаться на другие элементы сцены через CSS-селектор.

AFRAME.registerComponent('example-selector', {
  schema: {
    target: { type: 'selector' }
  },
  init: function () {
    if (this.data.target) {
      console.log('Найден объект:', this.data.target);
    }
  }
});
  • Особенности: null, если объект не найден.
  • Применение: связывание компонентов между объектами, указание целей для анимаций, взаимодействия или событий.

SelectorAll

Расширение selector, которое возвращает массив элементов, соответствующих селектору:

AFRAME.registerComponent('example-selector-all', {
  schema: {
    targets: { type: 'selectorAll' }
  },
  init: function () {
    this.data.targets.forEach(el => el.setAttribute('visible', false));
  }
});
  • Особенности: удобен для массовых операций над группой объектов.

Array и Mixed

  • array — массив значений одного типа, например array:number.
  • mixed — позволяет хранить значения разных типов (строка, число, вектор).
AFRAME.registerComponent('example-array', {
  schema: {
    points: { type: 'array', default: [1, 2, 3] }
  },
  init: function () {
    console.log(this.data.points);
  }
});
  • Особенности: в HTML значения передаются через запятую: "1, 2, 3".

Asset и AssetMap

Типы, предназначенные для работы с внешними ресурсами:

  • asset — отдельный ресурс (изображение, модель, звук).
  • assetmap — словарь ресурсов по ключам.
AFRAME.registerComponent('example-asset', {
  schema: {
    model: { type: 'asset' }
  },
  init: function () {
    console.log('Модель загружена:', this.data.model);
  }
});

Time и Angle

  • time — значения в миллисекундах, удобно для анимаций.
  • angle — угол в градусах, применяется к вращениям и ориентации объектов.
AFRAME.registerComponent('example-angle', {
  schema: { rotationY: { type: 'angle', default: 0 } },
  update: function () {
    this.el.object3D.rotation.y = THREE.MathUtils.degToRad(this.data.rotationY);
  }
});

Встроенные преобразования

Большинство типов автоматически преобразуют строки из HTML в объекты JavaScript. Например:

<a-entity example-vec3="position: 1 2 3"></a-entity>

будет автоматически преобразовано в {x:1, y:2, z:3}. Это снижает необходимость ручной обработки данных и позволяет строить декларативные компоненты с минимальным кодом.

Особенности схем

  • Все типы поддерживают default, что упрощает инициализацию компонентов.
  • Типы могут быть обязательными или необязательными, управляемыми через проверку в update или init.
  • Кастомные типы могут быть созданы через AFRAME.utils.extend и позволяют реализовать сложные структуры данных с собственной логикой преобразования.

Типы данных в схеме — фундаментальный инструмент A-Frame, позволяющий создавать гибкие, читаемые и декларативные компоненты, которые легко интегрируются в HTML-сцену и управляются через JavaScript.

Оглавление