Примитив a-box

В A-Frame примитив a-box используется для создания трёхмерных прямоугольных параллелепипедов и кубов. Этот примитив является основой для построения структур, объектов сцены и взаимодействующих элементов виртуальной реальности.

Основные атрибуты

1. Размеры (width, height, depth) Определяют ширину, высоту и глубину коробки в метрах. Если не задано, по умолчанию каждая сторона равна 1.

<a-box width="2" height="1" depth="0.5"></a-box>
  • width – размер по оси X.
  • height – размер по оси Y.
  • depth – размер по оси Z.

2. Позиция (position) Задает положение объекта в пространстве сцены. Формат: "x y z".

<a-box position="0 1 -3"></a-box>
  • x – смещение по горизонтали.
  • y – высота над землёй.
  • z – глубина от точки наблюдения.

3. Цвет (color) Задает сплошной цвет объекта. Можно использовать стандартные HTML-цвета или шестнадцатеричные коды.

<a-box color="#4CC3D9"></a-box>

4. Ротация (rotation) Определяет ориентацию коробки в пространстве. Формат: "x y z" в градусах.

<a-box rotation="0 45 0"></a-box>
  • x – наклон вокруг горизонтальной оси.
  • y – поворот вокруг вертикальной оси.
  • z – наклон вокруг оси глубины.

5. Прозрачность и материал (opacity, material) Позволяет задавать прозрачность и свойства материала.

<a-box color="red" opacity="0.5" material="metalness:0.8; roughness:0.2"></a-box>
  • opacity – уровень прозрачности (0–1).
  • material – объект со свойствами поверхности: metalness, roughness, shader, src (текстура) и др.

Работа с текстурами

Для наложения изображений или паттернов на коробку используется атрибут src. Можно применять разные текстуры на каждую грань с помощью компонента material.

<a-box src="#texture"></a-box>

Текстура загружается через <a-assets>:

<a-assets>
  <img id="texture" src="brick_texture.jpg">
</a-assets>

Интерактивность и события

a-box поддерживает стандартные события A-Frame:

  • mouseenter – наведение курсора на объект.
  • mouseleave – выход курсора с объекта.
  • click – клик по объекту.
  • mousedown / mouseup – события нажатия мыши.

Пример изменения цвета при наведении:

<a-box color="blue" position="0 1 -3"
       event-set__enter="_event: mouseenter; color: red"
       event-set__leave="_event: mouseleave; color: blue">
</a-box>

Анимации

Примитив можно анимировать с помощью компонента animation:

<a-box position="0 1 -3" color="green"
       animation="property: rotation; to: 0 360 0; loop: true; dur: 5000">
</a-box>
  • property – свойство, которое будет анимироваться.
  • to – конечное значение.
  • loop – зацикливание анимации.
  • dur – длительность одного цикла в миллисекундах.

Физика и столкновения

Для использования столкновений и взаимодействия с физикой применяются компоненты dynamic-body и static-body из aframe-physics-system.

<a-box position="0 2 -3" color="orange" dynamic-body></a-box>
  • dynamic-body – объект подчиняется физическим законам (гравитация, столкновения).
  • static-body – объект неподвижен, но участвует в столкновениях.

Компоновка сцены

a-box может использоваться как строительный блок для более сложных объектов:

  • Стены, полы и потолки помещений.
  • Мебель, контейнеры, панели управления.
  • Игровые платформы и препятствия.

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

<a-box position="-1 0.5 -3" color="gray" width="1" height="1" depth="0.2"></a-box>
<a-box position="0 0.5 -3" color="gray" width="1" height="1" depth="0.2"></a-box>
<a-box position="1 0.5 -3" color="gray" width="1" height="1" depth="0.2"></a-box>

Советы по производительности

  • Использовать один материал для нескольких объектов с одинаковой текстурой.
  • Минимизировать количество полигонов, если требуется большое количество a-box.
  • Для объектов, не требующих взаимодействия, использовать static-body вместо dynamic-body.

Итоговая структура примитива

Основной HTML-код примитива a-box может выглядеть так:

<a-box position="0 1 -3"
       rotation="0 45 0"
       width="2" height="1" depth="0.5"
       color="#4CC3D9"
       opacity="0.8"
       material="metalness:0.5; roughness:0.3"
       dynamic-body
       animation="property: rotation; to: 0 360 0; loop: true; dur: 5000">
</a-box>

Этот код демонстрирует полный набор возможностей: размеры, позиция, ротация, цвет, прозрачность, материал, физика и анимация.

Оглавление