什么是 Theatre.js

Theatre.js 是一个用于制作 Web 动画的 JavaScript 库，可以和 Three.js 配合制作 2D、3D 动画。文章先介绍了它的几个核心概念：剧场、演员、相机、时间轴和事件处理。

跟着官方示例做一个立方体

用 pnpm 安装依赖后写出立方体模型，会发现颜色和景深跟官网不一样。原因是 three.js 从 v0.154.0 升级到 v0.155.0 时，把 WebGLRenderer.useLegacyLights 的默认值从 true 改成了 false；解决办法是把光照强度乘以 π，或者手动把它改回 true。

Studio 调试与导出动画

初始化 studio 调试界面，用 SheetProvider 和 editable 把 react-three-fiber 组件变成可编辑对象，并用 PerspectiveCamera 替换默认相机。在控制台打好关键帧后导出动画文件，再用这个文件播放动画。