Преобразование координат

В Two.js координатная система сцены задаётся относительно контейнера, обычно <div> или <canvas>. Все объекты, создаваемые через Two.js, имеют собственные координаты, которые можно изменять с помощью трансформаций. Понимание работы с координатами необходимо для точного размещения и анимации объектов.

Локальные и глобальные координаты

Каждый объект в Two.js обладает локальной системой координат, относительно которой определяются его вершины и параметры. Например, прямоугольник Two.Rectangle с центром в (0, 0) внутри объекта будет располагаться в своей локальной системе. Перемещение объекта через position.set(x, y) изменяет его положение в глобальной системе координат сцены.

  • Локальные координаты — координаты относительно центра объекта.
  • Глобальные координаты — координаты относительно сцены (Two.Scene).

Использование translation позволяет легко преобразовать локальные координаты в глобальные.

let rect = two.makeRectangle(0, 0, 100, 50);
rect.position.set(200, 150); // смещение в глобальной системе

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

Масштабирование (scale) и вращение (rotation) объектов влияют на преобразование координат. Эти операции выполняются относительно центра объекта по умолчанию, но можно изменить точку трансформации через свойство origin.

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

[ x’ = x - y ] [ y’ = x + y ]

rect.scale = 1.5;        // увеличение объекта в 1.5 раза
rect.rotation = Math.PI/4; // поворот на 45 градусов

Матрицы преобразований

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

  • Композиция матриц позволяет объединять несколько трансформаций:

    1. Перенос (translation)
    2. Вращение (rotation)
    3. Масштаб (scale)
rect.translation.set(50, 30);
rect.rotation = Math.PI/6;
rect.scale = 2;
rect._matrix.identity().translate(rect.translation.x, rect.translation.y)
                      .rotate(rect.rotation)
                      .scale(rect.scale, rect.scale);

Преобразование точек между системами координат

Two.js предоставляет методы для явного преобразования координат:

  • localToWorld(point) — преобразует локальные координаты объекта в глобальные.
  • worldToLocal(point) — преобразует глобальные координаты сцены в локальные координаты объекта.
let localPoint = new Two.Vector(10, 20);
let worldPoint = rect.localToWorld(localPoint);

let convertedBack = rect.worldToLocal(worldPoint);

Эти методы полезны для обработки событий мыши или касаний, когда необходимо сопоставить координаты клика с объектами сцены.

Иерархия объектов и наследование координат

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

let group = two.makeGroup(rect1, rect2);
group.position.set(100, 100);
group.rotation = Math.PI/4;

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

Практические советы по работе с координатами

  • Использовать центры объектов (origin) для более предсказуемых вращений и масштабирования.
  • Для анимации удобнее работать с локальными координатами, чтобы трансформации не зависели от положения группы.
  • Сохранять исходные координаты для восстановления после сложных последовательных трансформаций.
  • Для событий мыши всегда переводить глобальные координаты в локальные через worldToLocal, чтобы корректно определить попадание в объект.

Взаимодействие с матрицами для сложных трансформаций

Для сложной графики иногда требуется работать напрямую с матрицами:

  • Матрицы 3x3 используются для 2D-преобразований.
  • Можно комбинировать трансляцию, масштаб и вращение в одну матрицу и применять её к объекту с помощью _matrix.multiply().
let m1 = new Two.Matrix().translate(50, 50);
let m2 = new Two.Matrix().rotate(Math.PI/4);
let m3 = new Two.Matrix().scale(2, 2);

rect._matrix.identity().multiply(m1).multiply(m2).multiply(m3);

Такой подход позволяет точно управлять положением объектов в сложных сценах, когда стандартные свойства position, rotation и scale недостаточны.

Заключение по преобразованиям координат

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

Оглавление