Работа с внешними SVG ресурсами

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

const elem = document.getElementById('drawing');
const two = new Two({ width: 800, height: 600 }).appendTo(elem);

Two.load('path/to/file.svg', function(svg) {
  two.add(svg);
  two.update();
});

Ключевой момент — Two.load работает асинхронно. Функция обратного вызова получает уже разобранный объект, содержащий все элементы SVG: группы (<g>), фигуры (<path>, <circle>, <rect> и т.д.), и применяет их в контексте Two.js.

Структура загруженного SVG

После загрузки SVG-ресурса каждый элемент доступен через объект svg.children. Это позволяет динамически модифицировать отдельные части рисунка:

  • svg.children[i].translation.set(x, y) — перемещение элемента.
  • svg.children[i].scale = s — изменение масштаба.
  • svg.children[i].rotation = angle — поворот фигуры.
  • svg.children[i].fill и svg.children[i].stroke — цвет заливки и контура.

Например, для анимации отдельных частей SVG можно использовать встроенный рендеринг Two.js:

Two.load('icon.svg', function(svg) {
  two.add(svg);
  svg.children.forEach(child => {
    child.rotation = Math.PI / 4;
  });
  two.update();
});

Работа с группами и вложенными элементами

SVG часто содержит вложенные группы (<g>). Two.js преобразует их в объект Two.Group, который позволяет применять трансформации ко всей группе сразу. Это удобно для сложных композиций:

Two.load('complex.svg', function(svg) {
  const group = svg.children[0]; // предполагаем, что первая группа
  group.scale = 2;
  group.translation.set(400, 300);
  two.add(svg);
  two.update();
});

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

Преобразование SVG-путей в объекты Two.js

Элементы <path> в SVG преобразуются в Two.Path. Это позволяет:

  • манипулировать контрольными точками (vertices),
  • изменять кривые Безье,
  • применять динамическую анимацию.
Two.load('shape.svg', function(svg) {
  const path = svg.children.find(el => el.type === 'path');
  path.vertices.forEach(v => v.x += 10); // сдвиг всех точек вправо
  two.add(svg);
  two.update();
});

Для сложных анимаций можно использовать цикл обновления через two.bind('upd ate', callback) или two.play() с заранее определёнными tween-анимациями.

Интеграция нескольких SVG на одной сцене

Two.js позволяет загружать несколько SVG и комбинировать их на одном холсте. Для этого каждое SVG добавляется отдельно:

Two.load('first.svg', function(svg1) {
  Two.load('second.svg', function(svg2) {
    two.add(svg1, svg2);
    svg1.translation.se t(100, 100);
    svg2.translation.set(500, 200);
    two.update();
  });
});

Важно учитывать порядок добавления: элементы, добавленные позже, рендерятся поверх предыдущих.

Оптимизация и упрощение SVG перед загрузкой

Для высокой производительности рекомендуется:

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

Также Two.js поддерживает только базовые SVG-форматы: сложные фильтры и эффекты не всегда корректно интерпретируются.

Динамическое изменение SVG после загрузки

После того как SVG добавлен на сцену, его элементы становятся полноценными объектами Two.js. Можно:

  • анимировать свойства scale, rotation, translation,
  • изменять цвет и прозрачность через fill и stroke,
  • удалять или добавлять элементы в группы через методы add и remove.
Two.load('logo.svg', function(svg) {
  two.add(svg);
  const circle = svg.children.find(c => c.type === 'circle');
  circle.fill = '#FF0000';
  two.update();
});

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

Поддержка событий и взаимодействий

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

circle._renderer.elem.addEventListener('click', () => {
  circle.scale *= 1.1;
  two.update();
});

Таким образом, SVG перестает быть просто изображением и превращается в полноценный интерактивный объект на сцене Two.js.

Оглавление