Создание сложных визуализаций

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

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg, // Можно использовать 'webgl' или 'canvas'
  autostart: true
}).appendTo(document.body);

Ключевые параметры:

  • width и height – задают размеры сцены.
  • type – определяет тип рендеринга: svg, canvas, webgl.
  • autostart – автоматически запускает цикл анимации.

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

Создание и управление примитивами

Two.js поддерживает множество примитивов: Rectangle, Circle, Ellipse, Polygon, Line, Path. Основная последовательность работы:

const circle = two.makeCircle(200, 200, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 4;

const rectangle = two.makeRectangle(400, 300, 150, 100);
rectangle.fill = 'rgba(0, 150, 255, 0.5)';
rectangle.stroke = '#003366';
rectangle.linewidth = 3;

Особенности работы с примитивами:

  • fill – цвет заливки (поддерживает rgba для прозрачности).
  • stroke – цвет обводки.
  • linewidth – толщина линии.
  • Координаты примитивов указываются относительно левого верхнего угла сцены.

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

Группировка объектов

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

const group = two.makeGroup(circle, rectangle);
group.translation.set(100, 50);  // Смещение всей группы
group.rotation = Math.PI / 4;    // Поворот всей группы

Преимущества группировки:

  • Масштабирование, вращение и смещение применяются ко всем объектам группы.
  • Можно комбинировать разные типы примитивов, сохраняя иерархию.
  • Упрощается управление сложными сценами с множеством элементов.

Работа с анимацией

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

two.bind('update', function(frameCount) {
  circle.rotation += 0.01;
  rectangle.scale = 1 + 0.5 * Math.sin(frameCount * 0.05);
});
two.play();

Особенности анимации:

  • frameCount – счетчик кадров, полезен для синусоидальных и циклических эффектов.
  • Изменение свойств объектов в функции update позволяет создавать непрерывные движения и трансформации.
  • Метод play запускает анимацию, pause останавливает цикл, stop завершает его полностью.

Создание сложных форм с Path

Для более детализированных визуализаций используются Path и Anchor, которые позволяют строить произвольные кривые и формы:

const path = two.makePath(100, 100, 200, 50, 300, 100, true);
path.fill = 'none';
path.stroke = '#FF0000';
path.linewidth = 2;

Особенности Path:

  • Последний параметр closed определяет, замкнута ли фигура.
  • Можно использовать кривые Безье, задавая сегменты с управляющими точками.
  • Поддерживается динамическое добавление и удаление анкерных точек.
const anchor = new Two.Anchor(400, 400, 450, 350, 500, 450);
path.vertices.push(anchor);

Применение градиентов и текстур

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

const linearGradient = two.makeLinearGradient(0, 0, 200, 200, new Two.Stop(0, '#FF0000'), new Two.Stop(1, '#0000FF'));
rectangle.fill = linearGradient;

const imageTexture = two.makeSprite('texture.png', 100, 100);
imageTexture.scale = 2;

Особенности:

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

Работа с трансформациями и эффектами

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

group.rotation += 0.02;
group.scale = 1 + 0.3 * Math.sin(two.frameCount * 0.03);
group.translation.x = 400 + 100 * Math.cos(two.frameCount * 0.02);

Ключевые приемы:

  • Комбинирование translation, rotation и scale позволяет создавать плавные движения.
  • Использование sin и cos для циклических анимаций имитирует органические движения.
  • Можно применять эффекты к отдельным объектам или целым группам.

Интеграция с DOM и событиями

Two.js предоставляет доступ к DOM-элементам для обработки событий мыши и клавиатуры:

two.renderer.domElement.addEventListener('mousemove', function(event) {
  circle.translation.x = event.clientX;
  circle.translation.y = event.clientY;
});

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

  • Любой примитив или группа может реагировать на события.
  • Возможна реализация интерактивных визуализаций с drag-and-drop.
  • События синхронизируются с рендерингом, обеспечивая плавность анимаций.

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

Для сложных сцен важно управлять производительностью:

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

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

Использование слоев и прозрачности

Two.js поддерживает слои через группировку и контроль прозрачности:

const background = two.makeRectangle(400, 300, 800, 600);
background.fill = '#f0f0f0';
background.opacity = 0.5;

group.add(background);
group.opacity = 0.8;
  • Свойство opacity применяется ко всему объекту или группе.
  • Можно комбинировать несколько слоев для сложных визуальных эффектов, включая наложения и мягкие тени.

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

Оглавление