Theatre.js — анимация

Theatre.js — анимация

Theatre.js — библиотека для создания сложных таймлайнов анимации. Позволяет задавать keyframes, кривые и последовательности, как в видеоредакторах.

Основные концепции

• Project — корневой объект, хранит все анимации.
• Sheet — лист с дорожками.
• Object — анимируемый объект (например, 3D-модель).
• Props — свойства для анимации (position, rotation, opacity).

Интеграция с R3F

Используйте @theatre/r3f для связи Theatre.js с React Three Fiber:

import { editable as e } from "@theatre/r3f";

<e.mesh theatreKey="box">
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="hotpink" />
</e.mesh>

Таймлайн в коде

import { getProject } from "@theatre/core";

const project = getProject("My Project");
const sheet = project.sheet("Scene");
const obj = sheet.object("Box", { x: 0, y: 0, z: 0 });

// Анимация
obj.props.x.set(2, 1000); // x = 2 за 1 секунду

Связанные статьи

• Интеграция R3F в Next.js — настройка в проекте
• Частые ошибки при работе с 3D — типичные проблемы

Установка

npm install @theatre/core

Для R3F: @theatre/r3f (если доступен) или ручная привязка через useFrame.

Дополнительно

• Theatre.js (анимации и сцены)