Типичные ошибки и их решения

Неправильная установка сцены Одной из самых распространённых ошибок является некорректное создание экземпляра Two. Например:

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

Если элемент DOM, к которому привязывается Two, ещё не загружен, сцена не будет отображаться. Решение — использовать событие DOMContentLoaded или помещать скрипт в конец <body>.

Конфликт размеров Установка ширины и высоты сцены с помощью CSS может конфликтовать с параметрами, переданными при инициализации. Правильный подход — задавать размеры только через объект конфигурации Two и контролировать стиль контейнера через overflow: hidden и position: relative.

Ошибки при работе с фигурами

Неправильное добавление фигур в сцену Частая ошибка: создание фигуры без добавления её в Two:

const circle = two.makeCircle(100, 100, 50);
// circle не появится без two.add(circle)

Однако у Two.js все примитивы автоматически добавляются в two при использовании фабричных методов (makeCircle, makeRectangle). Проблема возникает при создании кастомных объектов через Two.Path — их необходимо явно добавлять:

const path = new Two.Path(vertices, true);
two.add(path);

Использование устаревших методов Методы вроде addToScene или прямое изменение renderer изнутри фигуры могут привести к ошибкам, так как новые версии Two.js полностью управляют рендерингом через внутренний scene и renderer.

Ошибки при анимации

Неправильный вызов two.update() Разработчики иногда вызывают two.update() без обертки в requestAnimationFrame. Это приводит к некорректной отрисовке и низкой производительности:

function animate() {
    two.update();
    requestAnimationFrame(animate);
}
animate();

Использование two.play() после ручного обновления Если одновременно используется two.play() и ручной цикл через two.update(), анимация может дергаться или не обновляться. Нужно выбрать один подход: либо автоматический two.play(), либо ручной цикл с requestAnimationFrame.

Неправильная работа с Two.Animation Ошибки возникают при попытке обновлять свойства объектов вне Two.bind('update', callback). Все динамические изменения должны происходить внутри привязанных событий:

two.bind('update', function(frameCount) {
    circle.rotation += 0.01;
});
two.play();

Ошибки с цветами и стилями

Неправильный формат цвета Two.js поддерживает CSS-совместимые цвета и числа в формате 0xRRGGBB. Ошибка возникает при использовании неподдерживаемых форматов, например rgb(255,0,0,0.5). Корректно:

circle.fill = 'rgba(255,0,0,0.5)';
circle.stroke = '#000000';

Игнорирование прозрачности При установке opacity у фигуры необходимо учитывать, что свойства fill и stroke наследуют прозрачность. Ошибка: установка fill-opacity отдельно через CSS не влияет на фигуру Two.js.

Ошибки при работе с группами и трансформациями

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

const group = new Two.Group();
group.add(new Two.Circle(50, 50, 20)); // Ошибка, фигура не в сцене
two.add(group);

Правильно:

const circle = two.makeCircle(50, 50, 20);
const group = new Two.Group(circle);
two.add(group);

Конфликт трансформаций Ошибки возникают при попытке применять translation, rotation или scale одновременно к фигуре и к её родительской группе без учёта иерархии. Нужно помнить, что трансформации в группах комбинируются:

group.rotation = Math.PI / 4;
circle.rotation = Math.PI / 4; // комбинируется с группой

Ошибки с загрузкой внешних ресурсов

Некорректная загрузка изображений и текстур Two.js использует стандартный Image объект. Часто забывают ждать загрузки:

const img = new Image();
img.src = 'texture.png';
const texture = two.makeSprite(img, 100, 100);
two.add(texture);

Если изображение ещё не загружено, спрайт будет пустым. Решение — использовать событие onload:

img.onl oad = () => {
    const texture = two.makeSprite(img, 100, 100);
    two.add(texture);
    two.update();
};

Ошибка при использовании SVG При импорте SVG через Two.Commands нужно проверять корректность путей и наличие viewBox. Ошибка часто проявляется как неправильное масштабирование или отсутствие фигуры на сцене.

Ошибки с управлением сценой

Повторное создание экземпляра Two Попытка создать несколько экземпляров на одном контейнере приводит к затиранию предыдущего рендера. Нужно создавать один Two на элемент DOM и работать через него.

Игнорирование ресайза окна Two.js не реагирует автоматически на изменение размеров контейнера. Частая ошибка — неподдержка адаптивности:

window.addEventListener('resize', () => {
    two.width = window.innerWidth;
    two.height = window.innerHeight;
    two.update();
});

Ошибки от неопытных оптимизаций

Чрезмерное создание объектов в цикле Создание сотен фигур в каждом кадре без удаления старых приводит к торможению. Решение — использовать Two.Group и обновлять свойства существующих объектов вместо создания новых.

Игнорирование two.renderer.setSize Если размер сцены меняется через CSS, рендерер может не соответствовать новому размеру, что вызывает искажения. Всегда синхронизировать размеры:

two.renderer.setSize(two.width, two.height);
two.update();

Неправильная очистка сцены При удалении объектов важно использовать методы remove и clear Two.js, иначе память постепенно будет засоряться:

two.remove(circle);
two.clear();
two.update();
Оглавление