Matrix4: матрицы трансформации

Matrix4 — это класс в Three.js, представляющий 4×4 матрицу, используемую для описания линейных и аффинных преобразований в 3D-пространстве. Такие матрицы применяются для трансляции, масштабирования, вращения, а также для комбинирования нескольких трансформаций в одной операции.

Структура матрицы хранится в виде одномерного массива из 16 чисел в формате column-major (столбцовая упорядоченность):

[
  n11, n21, n31, n41,
  n12, n22, n32, n42,
  n13, n23, n33, n43,
  n14, n24, n34, n44
]

Здесь nij обозначает элемент матрицы в i-й строке и j-м столбце.

Создание и инициализация

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

const matrix = new THREE.Matrix4();

По умолчанию создаётся единичная матрица, то есть матрица, которая не изменяет координаты при умножении:

matrix.identity();

Метод identity() обнуляет все элементы, кроме диагональных, которые устанавливаются в 1.

Методы трансформации

Трансляция

Трансляция задаётся методом makeTranslation(x, y, z):

matrix.makeTranslation(10, 5, -3);

Это создаёт матрицу вида:

[1, 0, 0, 10]
[0, 1, 0, 5]
[0, 0, 1, -3]
[0, 0, 0, 1]

Метод setPosition(x, y, z) позволяет задать только позицию в существующей матрице, не изменяя остальные компоненты.

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

Масштабирование выполняется с помощью метода makeScale(x, y, z):

matrix.makeScale(2, 3, 1);

Результат:

[2, 0, 0, 0]
[0, 3, 0, 0]
[0, 0, 1, 0]
[0, 0, 0, 1]

Для динамического изменения масштаба существующей матрицы применяется scale(vector):

matrix.scale(new THREE.Vector3(1.5, 1, 0.5));

Вращение

Three.js предоставляет методы для вращения вокруг основных осей:

matrix.makeRotationX(Math.PI / 4);
matrix.makeRotationY(Math.PI / 2);
matrix.makeRotationZ(Math.PI / 6);

Для вращения вокруг произвольного вектора используется makeRotationAxis(axis, angle), где axis — нормализованный вектор (THREE.Vector3), а angle — угол в радианах.

Комбинирование трансформаций

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

const translation = new THREE.Matrix4().makeTranslation(5, 0, 0);
const rotation = new THREE.Matrix4().makeRotationY(Math.PI / 2);
const scale = new THREE.Matrix4().makeScale(2, 2, 2);

const combined = new THREE.Matrix4();
combined.multiplyMatrices(translation, rotation); // combined = translation * rotation
combined.multiply(scale); // combined = combined * scale

Метод multiplyMatrices(a, b) выполняет this = a * b. Метод multiply(m) выполняет this = this * m.

Получение и применение трансформаций

Декомпозиция матрицы

Для извлечения позиции, масштаба и вращения используется метод decompose:

const position = new THREE.Vector3();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3();

matrix.decompose(position, quaternion, scale);

После вызова decompose можно работать с компонентами независимо.

Применение к объекту

Объект THREE.Object3D позволяет напрямую использовать матрицы:

const object = new THREE.Mesh(geometry, material);
object.applyMatrix4(matrix);

После этого все вершины объекта будут трансформированы согласно матрице.

Инверсия и транспонирование

  • Инверсия: matrix.invert() вычисляет обратную матрицу, которая «отменяет» преобразование.
  • Транспонирование: matrix.transpose() меняет строки и столбцы местами, что используется при работе с шейдерами и при преобразованиях нормалей.

Особенности работы с Matrix4

  • Хранение в формате column-major важно при взаимодействии с WebGL, где такой порядок элементов ожидается.
  • Для анимаций и постоянного обновления объектов рекомендуется минимизировать создание новых матриц и использовать методы set / multiply / compose, чтобы уменьшить нагрузку на сборщик мусора.
  • Matrix4 можно использовать для преобразования векторов:
const vector = new THREE.Vector3(1, 2, 3);
vector.applyMatrix4(matrix);

Вектор изменится согласно матрице, включая трансляцию.

Использование с камерами и сценой

Матрицы Matrix4 являются основой для view и projection матриц камер. Камера хранит свою матрицу мира matrixWorld, которая комбинирует позицию, вращение и масштаб. Для шейдеров часто используется комбинация projection * view * model, где каждая составляющая представлена Matrix4.

Встроенные методы для удобства

  • copy(m) — копирует содержимое другой матрицы.
  • clone() — создаёт новую матрицу с теми же значениями.
  • makePerspective(left, right, top, bottom, near, far) — создаёт матрицу перспективного проецирования.
  • makeOrthographic(left, right, top, bottom, near, far) — создаёт матрицу ортографического проецирования.
  • lookAt(eye, target, up) — создаёт матрицу для ориентации камеры на точку в пространстве.

Matrix4 — фундаментальная структура Three.js, обеспечивающая гибкость при работе с 3D-преобразованиями. Понимание методов создания, комбинирования и применения матриц критически важно для точного позиционирования объектов, построения анимаций и работы с камерами в трехмерных сценах.

Оглавление