Система координат в WebGL и A-Frame

В WebGL и A-Frame 3D-пространство определяется декартовой системой координат с тремя осями: X, Y и Z. Каждая точка в пространстве задаётся вектором (x, y, z):

  • X — горизонтальная ось, движение вправо положительное, влево отрицательное.
  • Y — вертикальная ось, движение вверх положительное, вниз отрицательное.
  • Z — ось глубины, движение вперёд положительное, назад отрицательное.

A-Frame использует правую систему координат, совпадающую с WebGL. Положительная Z-ось направлена «от пользователя внутрь сцены», положительная X — вправо, положительная Y — вверх.

Позиция объектов

В A-Frame положение объекта задаётся атрибутом position. Пример:

<a-box position="1 2 -3" color="#4CC3D9"></a-box>

Здесь куб смещён на 1 единицу вправо, 2 единицы вверх и 3 единицы внутрь сцены. Атрибут принимает либо строку с тремя числами, либо объект Jav * aScript:

const box = document.querySelector('a-box');
box.setAttribute('position', {x: 1, y: 2, z: -3});

Ключевой момент: координаты всегда указываются относительно родительского объекта. Если объект вложен в <a-entity>, его позиция становится локальной относительно родителя.

Вращение объектов

Вращение в A-Frame задаётся атрибутом rotation в градусах:

<a-box rotation="45 30 0"></a-box>
  • X — наклон вперёд/назад (pitch)
  • Y — поворот вокруг вертикальной оси (yaw)
  • Z — наклон влево/вправо (roll)

В JavaScript вращение можно изменять аналогично позиции:

box.setAttribute('rotation', {x: 0, y: 90, z: 0});

Вращение также локальное относительно родителя. Комбинация трансформаций (позиция + вращение + масштаб) задаёт мировую трансформацию объекта.

Масштабирование

Атрибут scale определяет размер объекта по осям:

<a-sphere scale="2 1 0.5"></a-sphere>
  • X — ширина
  • Y — высота
  • Z — глубина

Единичный масштаб (1 1 1) — исходный размер объекта. Масштаб, как и позиция и вращение, учитывает родительскую трансформацию.

Локальные и мировые координаты

  • Локальные координаты — относительно родителя.
  • Мировые координаты — абсолютное положение в сцене.

В A-Frame для получения мировых координат используют метод object3D.getWorldPosition():

const worldPos = new THREE.Vector3();
box.object3D.getWorldPosition(worldPos);
console.log(worldPos);

Векторы и направления

Для движения или расчёта направления часто используют векторы Three.js (A-Frame построен на Three.js). Например, перемещение вперед вдоль локальной оси Z:

const vector = new THREE.Vector3(0, 0, -1);
vector.applyQuaternion(box.object3D.quaternion);
box.object3D.position.add(vector);
  • applyQuaternion поворачивает вектор с учётом текущей ориентации объекта.
  • position.add смещает объект в направлении вектора.

Координатные системы камер

Камеры в A-Frame имеют собственную систему координат. Позиция и вращение камеры задаются так же, как у любых объектов:

<a-entity camera position="0 1.6 0" rotation="0 180 0"></a-entity>
  • Высота 1.6 метра соответствует среднему человеческому росту.
  • Поворот по оси Y меняет направление взгляда.

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

Работа с матрицами трансформаций

В основе преобразований лежат матрицы 4×4:

  • translation matrix — смещение
  • rotation matrix — поворот
  • scale matrix — масштабирование

A-Frame скрывает работу с ними, но предоставляет доступ через object3D.matrix и object3D.matrixWorld. Это позволяет создавать сложные анимации и иерархические сцены с правильной композицией трансформаций.

Практические советы по позиционированию

  • Для объектов на земле использовать y = 0 как уровень пола.
  • При объединении нескольких объектов лучше использовать общий родитель <a-entity> для управления всей группой.
  • Для анимации движения важно учитывать локальные оси объекта, иначе движение по мировой оси может отличаться от ожидаемого направления.

Итоговые ключевые моменты

  • Позиция, вращение и масштаб — базовые элементы управления объектом.
  • Локальные координаты всегда учитывают иерархию родителей.
  • Векторы и кватернионы позволяют двигать и вращать объекты в произвольных направлениях.
  • Камера имеет собственные координаты и преобразует мировые позиции в видовые.
  • Работа с матрицами даёт полный контроль над трансформациями, хотя A-Frame абстрагирует большую часть сложностей.

Эти основы системы координат являются фундаментом для построения любых 3D-сцен в A-Frame и обеспечивают точное управление положением и ориентацией объектов в виртуальной среде.

Оглавление