Компонент geometry: встроенные типы

Компонент geometry является фундаментальной частью создания 3D-объектов в A-Frame. Он отвечает за форму и структуру объектов, определяя, как примитив отображается в сцене. Компонент может использоваться как напрямую, так и через сокращённые формы, например через <a-box>, <a-sphere> и другие встроенные примитивы, которые автоматически создают geometry с заданными параметрами.

Синтаксис базового использования:

<a-entity geometry="primitive: box; width: 1; height: 2; depth: 1"></a-entity>

Здесь primitive указывает тип примитива, а остальные свойства задают его размеры. Компонент geometry поддерживает несколько встроенных типов примитивов, каждый из которых имеет собственный набор параметров.

Примитивы и их параметры

Box

Прямоугольный параллелепипед. Основные параметры:

  • width — ширина по оси X.
  • height — высота по оси Y.
  • depth — глубина по оси Z.
  • segmentsWidth, segmentsHeight, segmentsDepth — количество сегментов по соответствующим осям для детализации геометрии.

Пример:

<a-entity geometry="primitive: box; width: 2; height: 1; depth: 0.5; segmentsWidth: 2; segmentsHeight: 2; segmentsDepth: 1"></a-entity>

Сегментация важна для последующей деформации или анимации. Чем больше сегментов, тем более гладкими и точными могут быть трансформации.

Sphere

Сфера создаётся с помощью параметров радиуса и сегментов:

  • radius — радиус сферы.
  • segmentsWidth — количество сегментов вдоль широты (горизонтальное деление).
  • segmentsHeight — количество сегментов вдоль долготы (вертикальное деление).
  • phiStart и phiLength — начало и длина горизонтального угла в радианах.
  • thetaStart и thetaLength — начало и длина вертикального угла в радианах.

Пример частичной сферы:

<a-entity geometry="primitive: sphere; radius: 1; segmentsWidth: 32; segmentsHeight: 16; phiStart: 0; phiLength: 3.14; thetaStart: 0; thetaLength: 1.57"></a-entity>

Использование phi и theta позволяет создавать сектора сфер, открытые или усечённые формы.

Cylinder

Цилиндр с возможностью задания радиусов верхней и нижней основы:

  • radiusTop — радиус верхнего основания.
  • radiusBottom — радиус нижнего основания.
  • height — высота цилиндра.
  • segmentsRadial — количество сегментов по окружности.
  • segmentsHeight — количество сегментов по высоте.
  • openEnded — если true, цилиндр без крышек.

Пример конуса:

<a-entity geometry="primitive: cylinder; radiusTop: 0; radiusBottom: 1; height: 2; segmentsRadial: 32; openEnded: false"></a-entity>

Для создания труб или конусов управление radiusTop, radiusBottom и openEnded критично.

Plane

Плоская поверхность, используемая как подложка или текстурированная плоскость:

  • width — ширина по X.
  • height — высота по Y.
  • segmentsWidth и segmentsHeight — детализация сетки.

Пример:

<a-entity geometry="primitive: plane; width: 5; height: 3; segmentsWidth: 5; segmentsHeight: 5"></a-entity>

Высокое количество сегментов важно для деформации и сложных шейдеров, например для эффектов воды или холмов.

Torus

Тороидальная форма (похожая на бублик):

  • radius — радиус центрального круга.
  • radiusTubular — радиус трубки.
  • segmentsRadial — сегменты вокруг центрального круга.
  • segmentsTubular — сегменты вдоль трубки.
  • arc — длина дуги (по умолчанию 6.28, полный круг).

Пример неполного торуса:

<a-entity geometry="primitive: torus; radius: 1; radiusTubular: 0.2; segmentsRadial: 16; segmentsTubular: 8; arc: 3.14"></a-entity>

Торусы часто применяются для кольцевых эффектов или декораций в сцене.

Ring

Кольцо с внутренним и внешним радиусом:

  • radiusInner — внутренний радиус.
  • radiusOuter — внешний радиус.
  • segmentsTheta — сегменты по окружности.
  • thetaStart и thetaLength — аналогично сфере, задают сектор кольца.

Пример полукольца:

<a-entity geometry="primitive: ring; radiusInner: 0.5; radiusOuter: 1; segmentsTheta: 32; thetaStart: 0; thetaLength: 3.14"></a-entity>

Позволяет создавать декоративные элементы и индикаторы.

Общие свойства и оптимизация

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

Сегментация всегда влияет на производительность: слишком большое количество сегментов замедляет рендеринг, особенно на мобильных устройствах. Для оптимизации стоит подбирать минимальное необходимое количество сегментов.

Кастомизация через geometry

Помимо встроенных примитивов, можно создавать кастомные геометрии через:

  • bufferGeometry — импорт готовых моделей из .glb или .obj.
  • primitive: custom — подключение внешнего скрипта для генерации вершин и индексов.

Пример простого кастомного объекта:

<a-entity geometry="primitive: custom; vertices: [0 0 0, 1 0 0, 0 1 0]; faces: [0 1 2]"></a-entity>

Это даёт максимальный контроль над формой, сохраняя преимущества A-Frame.

Закрепление позиции, вращения и масштаба

Компонент geometry работает вместе с position, rotation и scale:

<a-entity geometry="primitive: box; width: 1; height: 2; depth: 1" position="0 1 0" rotation="45 0 0" scale="2 2 2"></a-entity>

Изменение этих параметров не требует пересоздания геометрии, что удобно для анимаций и динамических сцен.

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

Оглавление