Отключение автоматического обновления

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

Свойство autostart

autostart — это ключевое свойство экземпляра Two.js, отвечающее за автоматический запуск рендеринга при инициализации. Оно принимает логическое значение:

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

Особенности использования:

  • Если autostart установлен в true, Two.js сразу начинает цикл обновлений (upd ate loop), и каждый кадр автоматически отрисовывается.
  • Установка autostart: false при создании экземпляра отключает автоматическое обновление, оставляя управление рендерингом на разработчике.

Метод update()

После отключения автозапуска, для рендеринга сцены используется метод update():

two.update();

Применение метода:

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

Метод play() и pause()

Если необходимо запускать и останавливать анимацию динамически, Two.js предоставляет методы play() и pause():

two.play();  // Запуск анимации
two.pause(); // Остановка анимации

Особенности:

  • play() активирует внутренний цикл обновления, аналогичный autostart: true.
  • pause() останавливает цикл, позволяя в дальнейшем вручную контролировать update().

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

Для тонкой оптимизации можно создать собственный цикл обновления с использованием requestAnimationFrame:

function animate() {
  // Логика обновления объектов
  shape.rotation += 0.01;

  // Ручной рендеринг сцены
  two.update();

  requestAnimationFrame(animate);
}

animate();

Преимущества ручного цикла:

  • Обработка сложной логики перед рендерингом без лишних перерисовок.
  • Полный контроль частоты обновления кадра.
  • Возможность интеграции с другими библиотеками, не создавая конфликта с внутренним циклом Two.js.

Примеры практического применения

  1. Большие сцены с сотнями объектов

Отключение автозапуска позволяет обновлять только изменённые объекты, снижая нагрузку на GPU и CPU.

  1. Сложная анимация с синхронизацией

При ручном управлении можно запускать анимацию только при достижении определённых условий, например, после завершения расчётов физики.

  1. Интерактивные приложения

При взаимодействии пользователя сцена обновляется только при событии, например mousemove или click, что экономит ресурсы.

canvas.addEventListener('mousemove', (event) => {
  shape.translation.se t(event.clientX, event.clientY);
  two.update();
});

Рекомендации по оптимизации

  • Использовать ручное обновление для больших сцен и частых вычислений.
  • Сохранять объекты, которые не изменяются, чтобы исключить их перерисовку.
  • Совмещать ручной цикл с requestAnimationFrame для плавной анимации.
  • При необходимости временно включать play() для быстрого прототипирования или демонстраций.

Важные свойства и методы для контроля обновления

Свойство / Метод Тип Описание
autostart Boolean Автоматический запуск рендеринга при создании Two.js
update() Method Ручная перерисовка сцены
play() Method Запуск цикла анимации
pause() Method Остановка цикла анимации

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

Оглавление