Theatre.js 是面向 Web 的动效设计与动画库，提供可视化时间轴编辑器 Studio，并支持通过代码控制动画。
用途：实现动效设计、时间轴动画、可视化动画编辑、关键帧动画，以及为 Three.js / React Three Fiber 场景制作动画。
主要能力：核心概念包括 Project（动画数据容器，对应导出的 JSON 状态）、Sheet（场景或组件，含对象与一条序列）、Object（带类型属性的可动画实体）、Sequence（含关键帧的时间轴，控制播放）、Props（number、compound、rgba 等类型值）。支持读取值、监听值变化、播放/暂停/跳转序列，以及 React 与 R3F 集成。
安装：npm install @theatre/core@0.7 @theatre/studio@0.7；R3F 集成 npm install @theatre/r3f@0.7；React 工具 npm install @theatre/react；简化控件 npm install theatric。
使用方式：开发环境初始化 Studio（if (import.meta.env.DEV) { studio.initialize() }），通过 getProject 创建项目、project.sheet 创建 sheet、sheet.object 创建对象，用 obj.onValuesChange 响应值变化，用 sheet.sequence.play({ iterationCount: Infinity }) 播放。R3F 场景需引入 @theatre/r3f 的 editable 与 SheetProvider，并 studio.extend(extension)，可编辑组件需 theatreKey。Theatric 提供 useControls 简化控件。
限制与注意事项：Studio 不应进入生产包，仅开发环境初始化；生产环境需加载导出的 state.json，否则无动画；对象 key 必须唯一，重复会覆盖；R3F 需扩展 extension 才能获得 3D 控件；e.mesh 等可编辑组件必须提供 theatreKey。导出状态通过 Studio → Project → Export（JSON）。