Порядок применения трансформаций

В Two.js трансформации применяются к объектам через свойства translation, rotation и scale. Эти свойства позволяют перемещать, вращать и масштабировать фигуры на сцене. Понимание порядка применения трансформаций критично, так как результат может значительно отличаться при изменении последовательности операций.

Свойство translation

translation задаёт смещение объекта относительно его исходного положения. Оно представлено объектом с координатами x и y:

let rect = two.makeRectangle(0, 0, 100, 50);
rect.translation.set(50, 30);

В данном примере прямоугольник смещается на 50 пикселей по оси X и на 30 по оси Y. Смещение применяется перед вращением и масштабированием, если порядок операций стандартный.

Свойство rotation

rotation задаётся в радианах и определяет вращение объекта вокруг его центра (точки origin):

rect.rotation = Math.PI / 4; // Вращение на 45 градусов

Важный момент: вращение происходит относительно текущего положения объекта, учитывая все предыдущие трансформации. Если сначала изменить translation, а затем rotation, объект повернётся уже в смещённой позиции.

Свойство scale

Масштабирование производится с помощью свойства scale, которое также представлено объектом с x и y:

rect.scale.set(2, 1.5);

Объект увеличивается в 2 раза по оси X и на 1.5 по оси Y. Масштабирование выполняется относительно точки origin объекта, поэтому порядок применения с translation и rotation изменяет конечный результат.

Порядок трансформаций и матрицы

В Two.js внутренне трансформации реализованы через матрицы аффинных преобразований. Каждое свойство (translation, rotation, scale) формирует собственную матрицу, а итоговая матрица объекта вычисляется как произведение этих матриц:

Итоговая матрица = Translation × Rotation × Scale

  • Если изменить порядок вычисления матриц, визуальный результат изменится.
  • Например, вращение перед смещением приводит к тому, что объект описывает круговую траекторию вокруг точки сцены, а не вокруг своей оси.

Пример с разным порядком

let circle = two.makeCircle(0, 0, 40);

// Сначала вращение, потом смещение
circle.rotation = Math.PI / 4;
circle.translation.set(100, 0);

// Или сначала смещение, потом вращение
circle.translation.set(100, 0);
circle.rotation = Math.PI / 4;

В первом случае круг вращается вокруг исходного центра, затем смещается. Во втором — вращение выполняется уже после смещения, что приводит к криволинейному движению по дуге.

Композиция трансформаций через группы

Two.js поддерживает группировку объектов, что позволяет применять трансформации к целой группе сразу. Все дочерние объекты наследуют трансформации родителя.

let group = two.makeGroup(rect, circle);
group.translation.set(200, 150);
group.rotation = Math.PI / 6;
  • Масштабирование и вращение группы влияет на все дочерние элементы.
  • Трансформации дочерних объектов применяются относительно родителя, что позволяет строить сложные иерархические сцены.

Практические рекомендации по порядку

  1. Сначала масштабирование: уменьшает или увеличивает объект относительно его центра.
  2. Затем вращение: вращение работает корректно относительно уже масштабированной фигуры.
  3. В конце смещение: перемещает объект в итоговое положение, не нарушая пропорции и ориентацию.

Трансформации и точки привязки

Все трансформации в Two.js выполняются относительно точки origin объекта. По умолчанию origin находится в центре фигуры. Изменение точки привязки позволяет получить нестандартное вращение или масштабирование:

rect.origin.set(0, 0); // Точка привязки в левом верхнем углу
rect.rotation = Math.PI / 4;

Теперь вращение происходит относительно левого верхнего угла, а не центра.

Комбинирование трансформаций через метод add

Для создания сложных эффектов удобно использовать цепочку объектов с вложенными трансформациями:

let innerCircle = two.makeCircle(0, 0, 20);
let outerGroup = two.makeGroup(innerCircle);
outerGroup.translation.set(150, 150);
outerGroup.rotation = Math.PI / 3;
  • Вложенные объекты унаследуют все трансформации родителя.
  • Можно комбинировать разные трансформации, не изменяя координаты самих объектов.

Анимация трансформаций

Two.js позволяет динамически изменять трансформации в цикле анимации:

two.bind('update', function(frameCount) {
    rect.rotation += 0.01;
    rect.translation.x = 100 + Math.sin(frameCount * 0.05) * 50;
});
two.play();
  • Изменение rotation и translation в каждом кадре создаёт плавную анимацию.
  • Порядок применения по-прежнему соблюдается: сначала масштабирование → вращение → смещение → рендеринг.

Эффективное использование трансформаций в Two.js требует понимания порядка их применения, правильной настройки origin и работы с группами. Контролируемая композиция этих элементов позволяет создавать сложные визуальные эффекты и динамические сцены с точным управлением движением и ориентацией объектов.

Оглавление