Вложенность групп

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

const group = new Two.Group();

После создания группы объекты добавляются в неё методом add:

const circle = two.makeCircle(0, 0, 50);
const rect = two.makeRectangle(0, 0, 100, 50);

group.add(circle, rect);
two.add(group);

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

Трансформации групп

Группы поддерживают те же свойства трансформации, что и отдельные объекты: translation, rotation, scale. Применение этих свойств к группе влияет на все дочерние элементы относительно центра группы.

group.translation.set(200, 150);
group.rotation = Math.PI / 4;
group.scale = 1.5;
  • translation — перемещение всей группы в пространстве.
  • rotation — вращение всех объектов вокруг центра группы.
  • scale — масштабирование всех объектов одновременно, сохраняя пропорции.

Вложенные группы

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

const parentGroup = new Two.Group();
const childGroup = new Two.Group();

const circle = two.makeCircle(0, 0, 30);
childGroup.add(circle);

parentGroup.add(childGroup);
two.add(parentGroup);

parentGroup.translation.set(300, 200);
childGroup.rotation = Math.PI / 6;

В этом примере childGroup вращается относительно своей локальной оси, а parentGroup перемещает всю структуру по сцене.

Управление стилями через группы

Группы могут управлять стилевыми свойствами дочерних объектов. При изменении свойств группы, таких как fill или stroke, эти изменения применяются ко всем объектам внутри группы, если объекты не переопределяют эти свойства индивидуально.

group.fill = 'rgba(100, 150, 200, 0.5)';
group.stroke = '#333';
group.linewidth = 4;

Дочерние элементы будут автоматически наследовать цвет заливки, обводки и толщину линий, что облегчает массовое изменение внешнего вида сложных сцен.

Добавление и удаление объектов из группы

Объекты можно динамически добавлять и удалять из группы, что позволяет создавать интерактивные сцены:

const rect = two.makeRectangle(0, 0, 50, 50);
group.add(rect); // добавление

group.remove(rect); // удаление

После удаления объекта из группы он больше не наследует трансформации группы, но остаётся в сцене до явного удаления через two.remove().

Итерация по элементам группы

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

group.children.forEach(child => {
    child.rotation += 0.01;
});

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

Применение к сложным анимациям

Вложенные группы особенно полезны для анимации сложных систем. Например, при создании солнечной системы можно использовать иерархию:

  • Родительская группа — весь планетарный диск.
  • Внутри группы — подгруппы для каждой планеты.
  • Внутри каждой планеты — спутники.
const solarSystem = new Two.Group();
two.add(solarSystem);

const earthGroup = new Two.Group();
const earth = two.makeCircle(100, 0, 20);
earthGroup.add(earth);
solarSystem.add(earthGroup);

const moon = two.makeCircle(30, 0, 5);
earthGroup.add(moon);

Теперь вращение earthGroup будет вращать Землю и Луну вместе, а вращение solarSystem — всю планетарную систему.

Практические советы

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

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

Оглавление