Параметры box, sphere, cylinder, plane, ring, torus и других

A-Frame предоставляет набор стандартных примитивов для построения трехмерных сцен. Каждый примитив представляет собой заранее определённую геометрию с набором настраиваемых параметров, которые позволяют изменять форму, размер и детали объектов. Среди наиболее часто используемых примитивов — box, sphere, cylinder, plane, ring, torus. Их правильное использование упрощает создание сцен и ускоряет разработку.

Box

Примитив <a-box> создаёт кубоид или прямоугольный параллелепипед.

Основные параметры:

  • width — ширина вдоль оси X (по умолчанию 1).
  • height — высота вдоль оси Y (по умолчанию 1).
  • depth — глубина вдоль оси Z (по умолчанию 1).
  • color — цвет поверхности, поддерживает как цветовые имена, так и HEX-коды.
  • position — координаты центра объекта [x, y, z].
  • rotation — вращение объекта вокруг осей [x, y, z] в градусах.

Пример использования:

<a-box width="2" height="1" depth="3" color="#4CC3D9" position="0 1 -5" rotation="0 45 0"></a-box>

Sphere

Примитив <a-sphere> создаёт сферу или сегмент сферы.

Ключевые параметры:

  • radius — радиус сферы (по умолчанию 1).
  • segments-width — количество сегментов по горизонтали (чем больше, тем гладче поверхность).
  • segments-height — количество сегментов по вертикали.
  • phi-start и phi-length — определяют угловой диапазон по горизонтали.
  • theta-start и theta-length — определяют угловой диапазон по вертикали.
  • color — цвет сферы.
  • position — расположение центра сферы.
  • rotation — вращение объекта.

Пример использования:

<a-sphere radius="1.5" segments-width="32" segments-height="32" color="#EF2D5E" position="0 1.25 -3"></a-sphere>

Cylinder

Примитив <a-cylinder> создаёт цилиндр или конус (если верхний и нижний радиусы различны).

Параметры:

  • radius — радиус основания (для конуса верхний радиус можно задавать через radius-top).
  • radius-top и radius-bottom — верхний и нижний радиусы.
  • height — высота цилиндра.
  • segments-radial — количество сегментов по окружности.
  • segments-height — количество сегментов вдоль высоты.
  • open-ended — флаг, показывающий, закрыт цилиндр или нет.
  • color, position, rotation — стандартные параметры.

Пример использования:

<a-cylinder radius="0.5" radius-top="0.2" height="2" segments-radial="16" color="#FFC65D" position="1 1 -3"></a-cylinder>

Plane

Примитив <a-plane> создаёт плоскую поверхность.

Параметры:

  • width и height — размеры плоскости.
  • segments-width и segments-height — количество сегментов по ширине и высоте.
  • color — цвет.
  • position и rotation — позволяют расположить и наклонить плоскость.
  • side — определяет, с какой стороны видна плоскость: front, back или double.

Пример использования:

<a-plane width="4" height="2" color="#7BC8A4" position="0 0 -4" rotation="-90 0 0"></a-plane>

Ring

Примитив <a-ring> создаёт кольцо.

Параметры:

  • radius-inner — внутренний радиус.
  • radius-outer — внешний радиус.
  • segments-theta — количество сегментов по окружности.
  • theta-start и theta-length — задают часть окружности (для создания дуги).
  • color, position, rotation — стандартные параметры.

Пример использования:

<a-ring radius-inner="0.5" radius-outer="1" color="#FFC0CB" position="0 1 -3" rotation="-90 0 0"></a-ring>

Torus

Примитив <a-torus> создаёт тор (бублик) с возможностью настройки толщины и радиуса.

Параметры:

  • radius — радиус центрального круга тора.
  • radius-tubular — радиус трубки тора.
  • segments-radial — количество сегментов по радиусу трубки.
  • segments-tubular — количество сегментов вдоль трубы.
  • color, position, rotation — стандартные параметры.

Пример использования:

<a-torus radius="1" radius-tubular="0.2" segments-radial="16" segments-tubular="32" color="#00FF00" position="2 1 -5"></a-torus>

Дополнительные параметры, общие для всех примитивов

  • Материалы: можно управлять через атрибут material, задавая текстуры, прозрачность, блеск, отражение. Например:
<a-box material="color: red; opacity: 0.7; metalness: 0.5"></a-box>
  • Анимации: подключаются через <a-animation> или компонент animation. Например: вращение:
<a-box rotation="0 0 0" animation="property: rotation; to: 0 360 0; loop: true; dur: 5000"></a-box>
  • Коллизии и физика: большинство примитивов можно интегрировать с библиотеками физики, такими как aframe-physics-system.

Советы по оптимизации

  1. Увеличение числа сегментов (segments-width, segments-height, segments-radial) улучшает визуальное качество, но повышает нагрузку на рендеринг. Для сцен с множеством объектов рекомендуется балансировать детальность.
  2. Использование side="double" на плоскостях и кольцах помогает избежать визуальных пропаданий при вращении камеры.
  3. Для сложных объектов лучше комбинировать простые примитивы, используя <a-entity> с вложенными примитивами и корректной трансформацией.

Примеры комбинаций

Создание базовой сцены с несколькими примитивами:

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
  <a-ring position="0 2 -3" rotation="-90 0 0" radius-inner="0.3" radius-outer="0.6" color="#FFC0CB"></a-ring>
  <a-torus position="2 1 -5" radius="1" radius-tubular="0.2" color="#00FF00"></a-torus>
</a-scene>

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

Оглавление