Создание экземпляра Two

Two.js — это легковесная библиотека для работы с векторной графикой в браузере на основе JavaScript, поддерживающая рендеринг через SVG, Canvas и WebGL. Для начала работы необходимо подключить библиотеку. Это можно сделать двумя способами: через CDN или через пакетный менеджер npm.

Через CDN:

<script src="https://cdn.jsdelivr.net/npm/two.js@latest/build/two.min.js"></script>

Через npm:

npm install two.js

После установки через npm можно импортировать библиотеку:

import Two from 'two.js';

Создание экземпляра Two

Экземпляр Two является основой всей работы с библиотекой. Он отвечает за рендеринг, управление сценой и отслеживание объектов. Создание экземпляра происходит с использованием конструктора Two(options).

Параметры конструктора:

  • type — тип рендерера: 'svg', 'canvas' или 'webgl'. Если не указано, выбирается оптимальный для текущего браузера.
  • width и height — размеры области рендеринга.
  • domElement — элемент DOM, куда будет встроен рендерер. По умолчанию создается <canvas> или <svg>.
  • autostart — логическое значение, определяющее автоматический запуск цикла анимации.

Пример создания базового экземпляра:

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.canvas
});
document.body.appendChild(two.renderer.domElement);

В этом примере создается экземпляр с Canvas-рендерером и размером 800×600 пикселей.

Основные свойства экземпляра

  • scene — корневой контейнер для всех объектов Two. Все фигуры и группы добавляются в two.scene.
  • width и height — текущие размеры холста.
  • renderer — объект рендерера, содержащий DOM-элемент и методы для рендеринга.
  • frameCount — счетчик кадров, увеличивающийся на каждой итерации цикла анимации.
  • paused — логическое свойство для управления анимацией.

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

const circle = two.makeCircle(400, 300, 50);
circle.fill = '#FF0000';
circle.stroke = '#000000';
circle.linewidth = 2;
two.update(); // обновляет сцену, отображая изменения

Настройка рендерера

Выбор рендерера влияет на производительность и возможности графики:

  • SVG — хорошо подходит для статической или масштабируемой векторной графики.
  • Canvas — обеспечивает высокую скорость рендеринга динамических сцен.
  • WebGL — оптимален для сложной анимации и 3D-подобных эффектов.

Принудительный выбор WebGL:

const two = new Two({
  type: Two.Types.webgl,
  width: 1024,
  height: 768
});
document.body.appendChild(two.renderer.domElement);

Автозапуск анимации

Свойство autostart позволяет сразу запустить цикл рендеринга. Если оно установлено в false, обновление сцены нужно инициировать вручную через two.update() или two.play().

const two = new Two({ width: 500, height: 500, autostart: true });
document.body.appendChild(two.renderer.domElement);

two.bind('update', function(frameCount) {
  // логика анимации объектов
});

Методы управления экземпляром

  • play() — запускает анимацию.
  • pause() — останавливает анимацию.
  • update() — принудительно обновляет сцену, полезно при статических сценах.
  • clear() — очищает сцену от всех объектов.

Пример циклического изменения позиции объекта:

const rect = two.makeRectangle(250, 250, 100, 50);
rect.fill = '#00FF00';

two.bind('update', function() {
  rect.rotation += 0.02;
});

two.play();

Инициализация с элементом DOM

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

const container = document.getElementById('two-container');
const two = new Two({ width: 600, height: 400 }).appendTo(container);

Метод appendTo автоматически вставляет DOM-элемент рендерера в выбранный контейнер, упрощая настройку.

Настройка фона и прозрачности

Для управления фоном сцены используется свойство two.renderer.domElement.style. Можно задавать цвет, прозрачность и градиенты через CSS:

two.renderer.domElement.style.background = '#f0f0f0';
two.renderer.domElement.style.opacity = 0.95;

Гибкая конфигурация через объект опций

Объект опций конструктора Two позволяет одновременно задавать несколько параметров:

const two = new Two({
  type: Two.Types.svg,
  width: 800,
  height: 600,
  autostart: true
}).appendTo(document.body);

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

Оглавление