Two.Texture

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

Инициализация объекта Two.Texture

Объект создается с помощью конструктора:

const texture = new Two.Texture('path/to/image.png', callback);
  • ‘path/to/image.png’ – путь к изображению. Может быть локальным или URL.
  • callback – функция, вызываемая после успешной загрузки изображения. Полезно использовать для асинхронной работы с текстурой.

Пример использования:

const texture = new Two.Texture('textures/wood.jpg', () => {
    console.log('Текстура загружена');
});

Текстура автоматически создается и готова к применению после загрузки изображения.

Основные свойства Two.Texture

  • image – объект HTMLImageElement, который хранит загруженное изображение.

  • repeat – режим повторения текстуры. Возможные значения:

    • 'repeat' – текстура повторяется по горизонтали и вертикали.
    • 'repeat-x' – повторяется только по горизонтали.
    • 'repeat-y' – повторяется только по вертикали.
    • 'no-repeat' – текстура отображается один раз.

  • offset – смещение текстуры относительно фигуры. Объект {x, y} задает сдвиг в пикселях.

  • scale – масштаб текстуры. Объект {x, y} позволяет растянуть или сжать изображение по осям.

  • loaded – булевое значение, показывающее, загружена ли текстура полностью.

Пример задания свойств:

texture.repeat = 'repeat';
texture.offset = { x: 10, y: 20 };
texture.scale = { x: 0.5, y: 0.5 };

Применение текстур к фигурам

После создания текстуры её можно привязать к любому объекту Two.js, поддерживающему заливку (fill) или контур (stroke).

Пример: текстура на круге

const two = new Two({ width: 500, height: 500 }).appendTo(document.body);

const circle = two.makeCircle(250, 250, 100);
circle.fill = texture;
circle.noStroke();

two.update();

В данном примере круг окрашен текстурой wood.jpg. Two.js автоматически учитывает размеры и масштаб текстуры, если не задано иное.

Пример: текстура на прямоугольнике с повторением

const rect = two.makeRectangle(250, 250, 300, 150);
rect.fill = texture;
texture.repeat = 'repeat';
rect.noStroke();

two.update();

Режим repeat позволяет повторять изображение по всей площади фигуры, создавая бесшовный эффект.

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

Two.Texture поддерживает обновление изображения на лету:

texture.image.src = 'textures/metal.jpg';
texture.loaded = false;

texture._update(); // Обновление текстуры в сцене
two.update();

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

Совместное использование текстур и градиентов

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

const gradient = two.makeLinearGradient(0, 0, 0, 200, new Two.Stop(0, '#ffffff'), new Two.Stop(1, '#000000'));
circle.fill = gradient;
circle.fill.opacity = 0.5; // полупрозрачность
circle.fillTexture = texture; // наложение текстуры
two.update();

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

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

  • Использовать малые размеры изображений для часто повторяемых текстур.
  • Устанавливать repeat только при необходимости, чтобы снизить нагрузку на GPU.
  • Предварительно загружать текстуры через Two.Texture с колбэком, чтобы избежать “мигания” при рендере.
  • Для анимаций текстур использовать методы обновления _update() вместо пересоздания объектов.

Полезные методы Two.Texture

  • clone() – создание копии текстуры с сохранением всех настроек.
  • **_update()** – внутренний метод обновления текстуры на сцене после изменения свойств.
  • destroy() – освобождение ресурсов изображения для снижения потребления памяти.

Пример клонирования текстуры:

const texture2 = texture.clone();
rect.fill = texture2;
two.update();

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

  • Всегда проверять свойство loaded перед использованием текстуры.
  • Использовать offset и scale для точной подгонки текстуры под фигуру.
  • Для повторяющихся фонов использовать repeat.
  • Для динамических изменений — менять image.src и вызывать _update().

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

Оглавление