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

Two.js предоставляет мощные средства для работы с графическими объектами и их трансформациями, включая масштабирование, поворот и смещение. Иногда требуется вернуть объект в исходное состояние, сбросив все ранее применённые трансформации. Для этого в Two.js используются свойства и методы, влияющие на позицию, масштаб, вращение и матрицы трансформации.

Сброс позиции

Каждый объект в Two.js имеет координаты translation.x и translation.y, которые определяют его положение в пространстве. Для возвращения объекта в исходное положение необходимо присвоить этим свойствам значения по умолчанию:

shape.translation.x = 0;
shape.translation.y = 0;

Можно также использовать объект translation.set(x, y):

shape.translation.set(0, 0);

Особенность: сброс позиции не влияет на масштаб и вращение объекта.

Сброс масштаба

Масштаб объекта определяется через свойства scale.x и scale.y. Для возврата к исходному размеру применяется единичное значение:

shape.scale.x = 1;
shape.scale.y = 1;

Или метод scale.set(x, y):

shape.scale.set(1, 1);

Важный момент: если объект был несимметрично масштабирован (разные значения по осям), сброс через set(1, 1) гарантирует восстановление исходной формы.

Сброс вращения

Вращение в Two.js задаётся через свойство rotation, которое измеряется в радианах. Для возвращения к исходному положению достаточно установить нулевое значение:

shape.rotation = 0;

Замечание: сброс вращения возвращает объект к ориентации, в которой он был создан, не затрагивая его позицию и масштаб.

Сброс матрицы трансформации

Для комплексного управления объектом Two.js использует матрицу трансформации matrix. Иногда проще сбросить все трансформации сразу через установку единичной матрицы:

shape.matrix.identity();

Метод identity() обнуляет все смещения, масштабирование и поворот, возвращая объект к исходному состоянию.

Совет: после сброса матрицы рекомендуется вызвать shape.translation.set(0, 0) для явного уточнения позиции, так как некоторые версии Two.js могут сохранять смещение в матрице.

Комбинированный сброс

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

shape.translation.set(0, 0);
shape.scale.set(1, 1);
shape.rotation = 0;
shape.matrix.identity();

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

Сброс дочерних объектов

Если объект является группой (Two.Group) или содержит дочерние элементы, трансформации родителя не всегда влияют на дочерние объекты напрямую. Чтобы сбросить трансформации всей группы, необходимо пройтись по каждому элементу:

group.children.forEach(child => {
  child.translation.set(0, 0);
  child.scale.set(1, 1);
  child.rotation = 0;
  child.matrix.identity();
});

Использование group.translation.set(0, 0) или group.matrix.identity() сбрасывает трансформации только на уровне группы, не влияя на дочерние объекты напрямую.

Важные нюансы

  • Порядок трансформаций имеет значение. Two.js применяет смещение, затем масштаб, затем вращение. Сброс всех компонентов в правильном порядке предотвращает накопление ошибок в положении объектов.
  • Автоматическое обновление: после сброса рекомендуется вызывать two.update() для обновления сцены, чтобы визуальное состояние объектов соответствовало их внутренним свойствам.
  • Композиция матриц: при работе с сложными иерархиями объектов предпочтительнее сбрасывать трансформации через матрицу (matrix.identity()), так как она учитывает родительские преобразования.

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

Оглавление