Плагины и утилиты

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

  1. Инициализация плагина: Для подключения стороннего плагина необходимо сначала импортировать его в проект, а затем зарегистрировать через метод Two.Plugin.register(pluginName, pluginObject). Пример:

    import SomePlugin from './twojs-some-plugin.js';
Two.Plugin.register('somePlugin', SomePlugin);

  2. Использование плагина на сцене или объекте: После регистрации плагина его методы становятся доступными через экземпляр Two.js или конкретные фигуры. Например:

    const two = new Two({ width: 800, height: 600 }).appendTo(document.body);
two.somePlugin.initialize();

  3. Создание собственных плагинов: Плагин в Two.js представляет собой объект с обязательным методом initialize, который вызывается при добавлении плагина к сцене, и дополнительными методами для обработки объектов:

    const CustomPlugin = {
  initialize: function(two) {
    this.two = two;
    console.log('Плагин инициализирован');
  },
  highlightShape: function(shape) {
    shape.fill = '#FF0000';
  }
};

Two.Plugin.register('customPlugin', CustomPlugin);

Утилиты для работы с фигурами и геометрией

Two.js предоставляет набор встроенных утилит, упрощающих работу с векторами, координатами и трансформациями. Ключевые из них:

  • Two.Utils.clamp(value, min, max) Ограничивает числовое значение между заданными пределами:

    let clamped = Two.Utils.clamp(120, 0, 100); // 100

  • Two.Utils.toFixed(number, precision) Округляет число до заданного количества знаков после запятой:

    let rounded = Two.Utils.toFixed(3.14159, 2); // 3.14

  • Two.Utils.getRatio(number, min, max) Возвращает отношение числа к диапазону:

    let ratio = Two.Utils.getRatio(75, 0, 100); // 0.75

  • Two.Utils.mod(n, m) Безопасное вычисление остатка с поддержкой отрицательных чисел:

    let remainder = Two.Utils.mod(-1, 5); // 4

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

Работа с цветами через утилиты Two.js

Two.js имеет собственный объект Two.Utils.Color, который упрощает управление цветами и их конвертацию:

  • Создание цвета:

    const color = new Two.Utils.Color('#3498db');

  • Методы цвета:

    • color.toHex() — возвращает цвет в формате #RRGGBB.
    • color.toRgb() — возвращает массив [r, g, b] в диапазоне 0–255.
    • color.lerp(targetColor, amount) — плавная интерполяция между текущим и целевым цветом.
    const startColor = new Two.Utils.Color('#ff0000');
const endColor = new Two.Utils.Color('#0000ff');
startColor.lerp(endColor, 0.5); // Возвращает промежуточный фиолетовый цвет

Встроенные трансформации и утилиты анимации

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

  • Трансформации:

    • shape.translation.set(x, y) — перемещение фигуры.
    • shape.rotation = angle — вращение в радианах.
    • shape.scale = scalar — масштабирование фигуры.
    • shape.center() — центрирование фигуры относительно сцены.

  • Анимации: Two.js использует цикл two.update() для обновления сцены. Утилиты анимации включают:

    • Two.Interpolate.linear(start, end, amount) — линейная интерполяция.
    • Two.Interpolate.easeIn(start, end, amount) — постепенное ускорение.
    • Two.Interpolate.easeOut(start, end, amount) — постепенное замедление.

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

    let x = Two.Interpolate.linear(0, 400, 0.25); // x = 100
shape.translation.set(x, 200);

Расширенные утилиты для сложных объектов

Для работы с кривыми, линиями и полигонами предоставляются специализированные методы:

  • Two.Utils.getControlPoints(points, closed) — вычисляет управляющие точки для кривых Безье на основе массива вершин.
  • Two.Utils.getBoundingClientRect(shape) — возвращает габариты фигуры с учётом трансформаций.
  • Two.Utils.getIntersection(line1, line2) — вычисляет точку пересечения двух линий, если она существует.

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

Интеграция с внешними библиотеками

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

  • Детектирование столкновений через библиотеки SAT.js или Matter.js.
  • Векторные операции с Vector2 из three.js или p5.js.
  • Анимационные кривые с GSAP.

Плагины и утилиты Two.js обеспечивают гибкость и масштабируемость, позволяя создавать интерактивные 2D-сцены с высокой точностью и плавной анимацией.

Оглавление