Установка и подключение к проекту

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

Подключение через CDN

Самый быстрый способ начать работу с Two.js — подключить библиотеку через CDN. Для этого в HTML-документе достаточно добавить тег <script> с ссылкой на актуальную версию:

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.0/two.min.js"></script>

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

Преимущества CDN-подключения:

  • Не требует установки дополнительных пакетов.
  • Быстрое тестирование и прототипирование.
  • Автоматическое использование кеша браузера, если библиотека уже загружалась с CDN.

Недостатки:

  • Зависимость от стороннего сервиса.
  • Ограниченная гибкость при управлении версиями.

Установка через npm

Для более крупного проекта и удобного управления зависимостями лучше использовать npm. Установка выполняется командой:

npm install two.js

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

import Two from 'two.js';

Для CommonJS-проектов используется синтаксис require:

const Two = require('two.js');

Использование npm позволяет:

  • Контролировать версию библиотеки.
  • Интегрировать Two.js с модульными сборщиками (Webpack, Parcel, Vite).
  • Писать код в современном стиле ES6+ с импортами и экспортами.

Создание контейнера для рендеринга

Two.js рендерит графику внутри HTML-элемента (контейнера). Для этого создаётся DOM-элемент, обычно <div>, в который будет добавлен canvas, SVG или WebGL-контекст. Пример:

<div id="draw-area"></div>
const elem = document.getElementById('draw-area');

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.canvas, // SVG, WebGL также доступны
}).appendTo(elem);

Основные параметры конструктора Two:

  • width и height — размеры области рисования.
  • type — тип рендерера (Two.Types.svg, Two.Types.canvas, Two.Types.webgl).
  • autostart — автоматический запуск анимации при создании (по умолчанию true).

Интеграция с существующим HTML

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

<div id="ui-panel">
  <button id="add-circle">Добавить круг</button>
</div>
<div id="canvas-container"></div>
const container = document.getElementById('canvas-container');
const two = new Two({ width: 500, height: 400 }).appendTo(container);

document.getElementById('add-circle').addEventListener('click', () => {
  const circle = two.makeCircle(250, 200, 50);
  circle.fill = '#FF0000';
  circle.stroke = '#000000';
  circle.linewidth = 2;
  two.update();
});

Подключение к сборщикам модулей

Для проектов с использованием Webpack или Vite важно корректно настроить импорт Two.js. В современных проектах ES-модули предпочтительнее:

import Two from 'two.js';

Если используется TypeScript, можно установить типы через пакет @types/two.js (если доступен) или создать собственные декларации типов, чтобы избежать ошибок компиляции.

Автоматическая инициализация

Two.js предоставляет возможность автоматически запускать анимацию через опцию autostart или вручную управлять циклом обновления:

const two = new Two({ width: 400, height: 300, autostart: false }).appendTo(container);

// Рисуем объект
const rect = two.makeRectangle(200, 150, 100, 50);
rect.fill = 'blue';

// Запускаем анимацию вручную
two.play();

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

Совместимость с разными браузерами

Two.js использует стандарты HTML5 (Canvas, SVG, WebGL) и корректно работает в современных браузерах: Chrome, Firefox, Safari, Edge. Для старых версий Internet Explorer поддержка ограничена, особенно для WebGL. В production-проектах рекомендуется проверять доступность выбранного рендерера перед использованием:

const renderer = Two.Types.webgl;
if (Two.Utils.isWebGLAvailable() && renderer === Two.Types.webgl) {
  // Использовать WebGL
} else {
  // fallback на Canvas или SVG
}

Настройка размеров и адаптивность

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

function resize() {
  two.width = window.innerWidth;
  two.height = window.innerHeight;
  two.update();
}

window.addEventListener('resize', resize);

Такой подход гарантирует корректное отображение графики на любых экранах, включая мобильные устройства и планшеты.

Резюме основных способов подключения

  • CDN — быстро, удобно для прототипов и экспериментов.
  • npm — контроль версий, интеграция с сборщиками и ES6 модулями.
  • Комбинированный подход — часть проекта через npm, прототипирование через CDN.

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

Оглавление