Управление состоянием сцены

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

const elem = document.getElementById('draw-shapes');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg
}).appendTo(elem);

Здесь width и height задают размеры сцены, а type определяет рендерер: svg, canvas или webgl. Выбор рендерера влияет на производительность и возможности сцены.

Управление объектами сцены

Все элементы, добавленные в сцену, автоматически включаются в цикл рендеринга. Добавление объектов осуществляется через метод add или напрямую при создании:

const circle = two.makeCircle(100, 100, 50);
circle.fill = '#FF8000';
circle.stroke = 'orangered';
circle.linewidth = 5;

two.add(circle);

Ключевые свойства объектов сцены:

  • position — координаты объекта: circle.position.set(x, y)
  • scale — масштабирование: circle.scale = 1.5
  • rotation — угол поворота в радианах: circle.rotation = Math.PI / 4
  • opacity — прозрачность: circle.opacity = 0.5

Объекты можно группировать через Two.Group, что упрощает управление множеством элементов:

const group = two.makeGroup(circle);
group.translation.set(200, 150);
group.rotation = Math.PI / 6;

Цикл рендеринга и обновления

Two.js использует встроенный анимационный цикл, который можно запускать через метод play. Для динамических сцен используется bind для обновления объектов в каждом кадре:

two.bind('upd ate', function(frameCount) {
  circle.rotation += 0.01;
}).play();

frameCount позволяет отслеживать количество кадров и использовать его для анимации. Можно изменять свойства объектов в зависимости от времени, создавая плавные движения.

Работа с слоями и порядком отображения

Сцена поддерживает порядок отображения объектов через их индекс в массиве. Объекты, добавленные позже, отрисовываются поверх предыдущих. Для явного управления используется метод add и структура Group:

const rect = two.makeRectangle(200, 200, 100, 50);
rect.fill = 'blue';

two.add(rect);
two.add(circle); // circle будет выше rect

Чтобы изменять порядок объектов в реальном времени, используется bringToFront и sendToBack:

circle._renderer.elem.parentNode.appendChild(circle._renderer.elem); // bring to front

Управление состоянием сцены

Состояние сцены включает в себя активные объекты, их трансформации и свойства рендерера. Two.js предоставляет методы для сохранения и восстановления состояния:

  • clone() — создает копию объекта или группы.
  • remove() — удаляет объект из сцены.
  • clear() — очищает всю сцену, удаляя все объекты.
const clonedCircle = circle.clone();
clonedCircle.position.se t(300, 300);
two.add(clonedCircle);

two.remove(circle); // удаление исходного объекта

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

Оптимизация и производительность

Two.js позволяет управлять производительностью сцены через:

  • updateOnlyChanged — рендерит только изменившиеся объекты.
  • manual — ручной вызов two.update() вместо автоматического цикла.
two.update(); // обновление сцены вручную

Использование этих методов особенно важно при работе с большим количеством объектов или при анимации в реальном времени, чтобы минимизировать нагрузку на процессор и GPU.

Реакция сцены на пользовательский ввод

Сцена может взаимодействовать с событиями мыши и клавиатуры. Для этого объекты сцены поддерживают listeners через стандартные DOM-события:

elem.addEventListener('mousemove', function(event) {
  circle.position.set(event.offsetX, event.offsetY);
  two.update();
});

Можно комбинировать события с анимациями и состояниями объектов, создавая интерактивные сцены.

Принципы управления сложными сценами

Для масштабных проектов рекомендуется:

  • Разбивать сцену на группы объектов.
  • Использовать клонирование для повторяющихся элементов.
  • Управлять порядком рендеринга через группы и методы bringToFront.
  • Разграничивать автоматическое и ручное обновление сцены для экономии ресурсов.
  • Сохранять состояние объектов при необходимости отката или анимации.

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

Оглавление