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

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

const elem = document.getElementById('draw-area');

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // Возможные значения: svg, canvas, webgl
}).appendTo(elem);
  • width и height задают размеры холста.
  • type определяет рендерер: svg для векторной графики, canvas — растровый холст, webgl — GPU-ускоренный рендеринг.
  • Метод appendTo() привязывает рендеринг к DOM-элементу.

После создания сцены объекты добавляются к корневому элементу через метод add().

Создание объектов и добавление в сцену

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

const circle = two.makeCircle(400, 300, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;

const rectangle = two.makeRectangle(200, 150, 100, 50);
rectangle.fill = '#0080FF';
rectangle.opacity = 0.7;
  • fill задаёт цвет заливки.
  • stroke — цвет обводки.
  • linewidth — толщина линии.
  • opacity — прозрачность объекта.

После создания объекта его можно анимировать или изменять свойства в реальном времени.

Реактивное обновление свойств объектов

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

circle.radius = 80;
circle.fill = '#00FF00';
two.update();

Важно: изменения без вызова two.update() не появятся на экране при svg или canvas. WebGL-рендеринг может обновляться автоматически при использовании анимации через two.bind('upd ate', callback).

Использование анимационного цикла

Two.js предоставляет встроенный механизм анимации через two.bind('update', callback) и two.play():

two.bind('update', function(frameCount, timeDelta) {
  circle.rotation += 0.01;
  rectangle.scale = 1 + Math.sin(frameCount * 0.05) * 0.5;
}).play();
  • frameCount — номер текущего кадра.
  • timeDelta — время между кадрами в миллисекундах.
  • Свойства объектов, изменяемые внутри функции update, обновляются каждый кадр.

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

Работа с группами объектов

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

const group = two.makeGroup(circle, rectangle);
group.translation.se t(100, 50);
group.rotation = Math.PI / 4;
  • translation перемещает всю группу по координатам.
  • rotation вращает группу вокруг её центра.
  • Изменения группы автоматически применяются ко всем дочерним объектам.

Привязка данных к свойствам

Реактивность усиливается использованием динамических зависимостей через функции:

two.bind('upd ate', function() {
  circle.radius = 30 + Math.sin(Date.now() * 0.005) * 20;
  rectangle.rotation += 0.02;
});
  • Значение радиуса зависит от времени, обеспечивая плавную анимацию.
  • Любое свойство объекта можно обновлять по аналогичной схеме.

Событийная реактивность

Two.js позволяет реагировать на события мыши или клавиатуры, изменяя объекты сцены:

elem.addEventListener('mousemove', function(e) {
  circle.translation.se t(e.offsetX, e.offsetY);
  two.update();
});
  • Перемещение мыши напрямую меняет координаты объекта.
  • Метод two.update() обеспечивает моментальное отображение изменений.

Оптимизация реактивных обновлений

  1. Минимизировать вызовы two.update() — лучше собирать все изменения и обновлять сцену один раз.
  2. Использовать группы для массового перемещения и трансформации.
  3. Использовать WebGL, если сцена содержит много объектов и требуется высокая производительность.
  4. Декларировать анимации в update вместо постоянного ручного обновления свойств.

Комбинация анимации и пользовательского ввода

Смешение событийной и таймфреймовой реактивности создаёт интерактивные эффекты:

two.bind('update', function() {
  rectangle.rotation += 0.01;
});

elem.addEventListener('click', function() {
  circle.fill = circle.fill === '#FF0000' ? '#00FF00' : '#FF0000';
  two.update();
});

two.play();
  • Анимация вращает прямоугольник непрерывно.
  • Клик по холсту меняет цвет круга мгновенно.
  • Комбинация двух подходов создаёт полноценную интерактивную сцену.

Работа с внешними данными

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

const data = [50, 100, 75, 120];

two.bind('update', function() {
  for (let i = 0; i < data.length; i++) {
    let bar = two.makeRectangle(i * 60 + 50, 300 - data[i]/2, 50, data[i]);
    bar.fill = '#3366CC';
  }
}).play();
  • Каждое обновление создаёт новые объекты по значениям данных.
  • Для динамических графиков лучше предварительно хранить объекты и изменять их свойства вместо полного пересоздания, чтобы снизить нагрузку на рендерер.

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

Оглавление