Vector2, Vector3, Vector4: операции и методы

Библиотека Three.js предоставляет мощные классы для работы с векторами различных размерностей: Vector2, Vector3 и Vector4. Эти классы являются фундаментальными при построении графики, манипуляции с координатами, расчетах направлений, нормалей и физических взаимодействий в 3D-пространстве. Каждый вектор содержит свойства для компонентов (x, y, z, w) и набор методов для арифметических и геометрических операций.

Vector2

Vector2 представляет собой двумерный вектор с компонентами x и y. Основные операции включают:

  • Создание и инициализация
let v = new THREE.Vector2(1, 2);
v.set(3, 4); // изменяет значения компонентов

  • Арифметические операции

    • add(v) – сложение с другим вектором
    • sub(v) – вычитание
    • multiplyScalar(s) – умножение на скаляр
    • divideScalar(s) – деление на скаляр
v.add(new THREE.Vector2(2, 3)); // результат: (5, 7)
v.multiplyScalar(0.5);          // результат: (2.5, 3.5)

  • Нормализация и длина

    • length() – возвращает длину вектора
    • normalize() – приводит вектор к единичной длине
    • lengthSq() – квадрат длины, используется для оптимизации
let len = v.length();
v.normalize();

  • Векторные свойства

    • dot(v) – скалярное произведение
    • distanceTo(v) – расстояние до другого вектора
    • lerp(v, alpha) – линейная интерполяция между двумя векторами
let d = v.distanceTo(new THREE.Vector2(0, 0));
v.lerp(new THREE.Vector2(1, 1), 0.5); // смешивание 50%

Vector3

Vector3 является трехмерным вектором с компонентами x, y, z. Он используется для позиционирования объектов, расчетов нормалей и направления движения.

  • Создание и присвоение значений
let v = new THREE.Vector3(1, 2, 3);
v.set(4, 5, 6);

  • Арифметика векторов

    • add, sub, multiply, divide – поэлементные операции с другим вектором
    • addScalar, multiplyScalar – операции со скаляром
v.add(new THREE.Vector3(1, 1, 1)); // (5, 6, 7)
v.multiplyScalar(2);                // (10, 12, 14)
  • Нормализация и длина
let len = v.length();
v.normalize(); // длина становится 1

  • Скалярное и векторное произведение

    • dot(v) – скалярное произведение
    • cross(v) – векторное произведение, возвращает новый вектор перпендикулярный обоим
let v1 = new THREE.Vector3(1, 0, 0);
let v2 = new THREE.Vector3(0, 1, 0);
let cross = v1.clone().cross(v2); // (0, 0, 1)

  • Дополнительные методы

    • distanceTo(v) – расстояние между двумя точками
    • lerp(v, alpha) – линейная интерполяция
    • applyMatrix4(m) – применение 4x4 матрицы трансформации
    • applyQuaternion(q) – вращение с использованием кватерниона
v.applyMatrix4(new THREE.Matrix4().makeTranslation(1, 0, 0));

  • Проекции и направления

    • project(camera) – проекция вектора на экранные координаты
    • unproject(camera) – преобразование экранной точки обратно в мир

Vector4

Vector4 расширяет возможности до четырехмерного пространства с компонентами x, y, z, w. Основное применение — работа с гомогенными координатами, трансформации и шейдерные операции.

  • Создание и присвоение
let v = new THREE.Vector4(1, 2, 3, 1);
v.set(4, 5, 6, 0);

  • Арифметические операции

    • add, sub, multiplyScalar, divideScalar работают аналогично Vector3
    • Поддерживаются поэлементные операции с другим Vector4: multiply, divide

  • Нормализация и длина

let len = v.length();
v.normalize();
  • Скалярное произведение и линейная интерполяция
let dotProduct = v.dot(new THREE.Vector4(1, 0, 0, 0));
v.lerp(new THREE.Vector4(0, 0, 0, 0), 0.25);

  • Дополнительные методы

    • setComponent(index, value) и getComponent(index) — доступ к компонентам по индексу
    • fromArray(array, offset) и toArray(array, offset) — инициализация и экспорт данных
v.setComponent(2, 10);  // изменяем z-компоненту
let arr = v.toArray();   // [x, y, z, w]

Общие принципы работы с векторами в Three.js

  1. Методы изменяют объект на месте. Методы вроде add, sub, normalize возвращают сам объект, а не новый экземпляр, что позволяет цепочечный вызов:
v.add(v2).normalize().multiplyScalar(5);
  1. Клонирование выполняется через clone() или copy():
let vCopy = v.clone();
vCopy.copy(v2);

  1. Использование в матрицах и кватернионах — для трансформаций векторы Vector3 и Vector4 применяются напрямую с методами applyMatrix4, applyQuaternion, applyEuler.

  2. Оптимизация вычислений — методы lengthSq() и distanceToSquared() позволяют избежать лишних операций корня при сравнении длин и расстояний.

Three.js обеспечивает полный набор функций для работы с векторами, позволяя легко реализовывать сложные геометрические и физические вычисления. Vector2 удобен для 2D задач, Vector3 является основным для 3D-сцен, а Vector4 необходим при работе с гомогенными координатами и матричными преобразованиями. Понимание всех методов и их особенностей критично для эффективного построения интерактивной графики и анимации.

Оглавление