Первая программа на Two.js

Two.js — это библиотека для работы с 2D-графикой на основе JavaScript, обеспечивающая простое создание анимаций и интерактивных сцен. Для начала необходимо подключить библиотеку к проекту. Существует несколько способов:

Через CDN:

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

Через npm:

npm install two.js

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

import Two from 'two.js';

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

Основной объект библиотеки — экземпляр Two, который управляет сценой и рендерингом. Для создания сцены используются настройки размеров, типа рендерера и DOM-контейнера:

const elem = document.getElementById('draw-area');

const params = {
  width: 800,
  height: 600,
  type: Two.Types.canvas // Альтернативы: svg, webgl
};

const two = new Two(params).appendTo(elem);

Ключевые моменты:

  • width и height задают размеры холста.
  • type определяет рендерер: canvas, svg или webgl.
  • Метод appendTo() добавляет сцену в DOM.

Основные примитивы

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

Круг:

const circle = two.makeCircle(400, 300, 50); // x, y, радиус
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;

Прямоугольник:

const rect = two.makeRectangle(200, 150, 100, 50); // x, y, width, height
rect.fill = '#00BFFF';
rect.stroke = '#000000';
rect.linewidth = 3;

Линия:

const line = two.makeLine(50, 50, 300, 300); // x1, y1, x2, y2
line.stroke = '#FF0000';
line.linewidth = 4;

Все объекты автоматически добавляются на сцену при создании через make* методы.

Группы объектов

Для удобного управления несколькими объектами используется Group:

const group = two.makeGroup(circle, rect);
group.translation.set(100, 50); // Смещение всей группы
group.rotation = Math.PI / 4;   // Поворот группы

Особенности групп:

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

Анимация и обновление сцены

Two.js имеет встроенный механизм анимации через метод update и встроенный цикл bind:

two.bind('upd ate', function(frameCount) {
  circle.rotation += 0.01; // Постепенный поворот
  rect.translation.x += 1;  // Движение по горизонтали
}).play();

Ключевые моменты:

  • frameCount — счетчик кадров с начала анимации.
  • Метод play() запускает автоматический рендеринг сцены.
  • Для остановки используется two.pause().

Работа с цветом и стилями

Каждый объект поддерживает свойства fill, stroke и linewidth. Цвета можно задавать в формате HEX, RGB или CSS-подобными строками:

circle.fill = 'rgba(255, 128, 0, 0.5)'; // Полупрозрачный оранжевый
rect.stroke = '#008000';
rect.linewidth = 5;

Преобразования объектов

Two.js позволяет изменять положение, масштаб и вращение каждого элемента:

circle.translation.se t(100, 100); // Перемещение
circle.scale = 1.5;                // Масштаб
circle.rotation = Math.PI / 2;     // Поворот на 90 градусов

Совет: Все изменения сразу отображаются после следующего рендера сцены, не требуется явный вызов обновления для каждого свойства.

Интерфейс события

Two.js интегрируется с DOM-событиями для интерактивности:

elem.addEventListener('click', function(event) {
  circle.fill = '#FF0000'; // Изменение цвета при клике
});

Можно комбинировать события с анимацией для создания интерактивных визуализаций.

Экспорт и сохранение

Для сохранения сцены доступны методы экспорта:

  • two.renderer.domElement.toDataURL() — экспорт канваса в изображение.
  • Для SVG используется two.renderer.domElement.outerHTML.
const dataURL = two.renderer.domElement.toDataURL('image/png');
console.log(dataURL);

Первая программа

Объединение всех компонентов в простую программу:

const elem = document.getElementById('draw-area');

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

const circle = two.makeCircle(400, 300, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;

const rect = two.makeRectangle(200, 150, 100, 50);
rect.fill = '#00BFFF';
rect.stroke = '#000000';
rect.linewidth = 3;

two.bind('update', function(frameCount) {
  circle.rotation += 0.02;
  rect.translation.x += 1;
  if (rect.translation.x > 800) rect.translation.x = 0;
}).play();

Этот код создаёт интерактивную сцену с анимированным кругом и движущимся прямоугольником. Весь процесс от создания сцены до анимации и отображения управляется исключительно средствами Two.js, что делает библиотеку удобной для первых шагов в 2D-графике на JavaScript.

Оглавление