Реактивность и рендеринг

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

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // или Two.Types.canvas, Two.Types.webgl
}).appendTo(document.body);

Ключевые моменты:

  • type определяет рендерер: svg создаёт векторную графику, canvas — растровую, webgl — аппаратное ускорение с 3D-возможностями.
  • Метод appendTo добавляет сцену в DOM, связывая её с HTML-элементом.

После создания сцены можно добавлять фигуры, линии, группы и тексты.

Добавление фигур и их свойства

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

const circle = two.makeCircle(400, 300, 50); // x, y, радиус
circle.fill = '#ff8000';
circle.stroke = '#000';
circle.linewidth = 3;

const rectangle = two.makeRectangle(200, 150, 100, 50); // x, y, ширина, высота
rectangle.fill = '#0080ff';
rectangle.opacity = 0.5;

Основные свойства объектов:

  • fill — заливка фигуры цветом.
  • stroke — цвет обводки.
  • linewidth — толщина линии.
  • opacity — прозрачность (0–1).
  • translation — позиция объекта в пространстве сцены (object.translation.set(x, y)).
  • rotation — вращение в радианах.
  • scale — масштаб объекта (object.scale = 1.5).

Каждое свойство можно изменять в любой момент, что напрямую влияет на визуализацию.

Реактивное обновление сцены

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

Пример создания анимации:

two.bind('upd ate', function(frameCount) {
  circle.rotation += 0.02;
  rectangle.translation.x += 1;
  if (rectangle.translation.x > 800) rectangle.translation.x = 0;
}).play();

Особенности механизма обновления:

  • two.bind('update', callback) создаёт реактивный цикл, который вызывается на каждом кадре.
  • two.play() запускает встроенный таймер анимации.
  • Все изменения свойств фигур в цикле немедленно отражаются на холсте при следующем рендере.

Группы объектов и наследование трансформаций

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

const group = two.makeGroup(circle, rectangle);
group.translation.se t(100, 50);
group.rotation = Math.PI / 6;

Эффект группировки:

  • Все дочерние объекты наследуют трансформации группы: смещение, вращение и масштабирование.
  • Можно динамически добавлять или удалять объекты из группы с помощью методов group.add(object) и group.remove(object).
  • Группы сохраняют локальные координаты объектов, что облегчает сложные анимации.

Динамическое обновление атрибутов

Two.js позволяет реактивно изменять цвет, прозрачность и положение объектов в реальном времени. Для плавных переходов удобно использовать интерполяцию или встроенные методы анимации, например через Two.Tween (с расширениями):

two.bind('update', function() {
  circle.fill = `rgb(${Math.floor(Math.sin(Date.now() * 0.001) * 127 + 128)},0,0)`;
});

Принципы реактивности:

  • Все изменения свойств сразу отражаются при следующем кадре рендера.
  • Можно изменять несколько свойств одновременно без дополнительных вызовов перерисовки.
  • Эффективность достигается тем, что Two.js обновляет только изменённые атрибуты в DOM или канвасе.

События и взаимодействие с пользователем

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

circle._renderer.elem.addEventListener('click', () => {
  circle.scale = 1.5;
});

Особенности взаимодействия:

  • Доступ к нативным DOM-элементам через _renderer.elem.
  • Можно обрабатывать клики, движения мыши, наведение и касания.
  • Любые изменения свойств в обработчиках сразу интегрируются в реактивный рендеринг.

Производительность рендеринга

Для больших сцен и сложных анимаций важно контролировать нагрузку:

  • Использовать webgl рендерер при наличии сложной геометрии или большого числа объектов.
  • Минимизировать частые изменения свойств, которые требуют пересчёта трансформаций.
  • Группировать объекты для сокращения числа отдельных рендер-вычислений.
  • Отключать обновление сцены, когда анимация не требуется, через two.pause().

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

Итоговые рекомендации по реактивности

  • Реактивные циклы создаются через two.bind('update', ...).
  • Изменения свойств объектов автоматически учитываются в рендере.
  • Группы обеспечивают наследование трансформаций и упрощают управление сложными сценами.
  • Поддерживаются события пользователя с мгновенной интеграцией в реактивную модель.
  • Производительность повышается использованием подходящего рендерера и оптимизацией числа обновлений.

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

Оглавление