当 Remotion 需要一个 3D 开场，Three.js 就登场了

当 Remotion 的时间线需要一个 3D 开场，或者说任何网页项目需要一个能转能打光的立体场景，绕来绕去都会落到同一个名字上。Three.js 是这个领域的默认答案，11.7 万星、MIT 协议，npm 版本号 0.186.1，官方定位是易用、轻量、跨浏览器的通用 3D 库。本系列聊到 3D 了，第 9 个工具就是它。

一、场景、相机、渲染器三件套

Three.js 的心智模型三句话讲完：场景（scene）放东西，相机（camera）定视角，渲染器（renderer）出画面。物体是几何体加材质组成的网格（mesh）：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;

const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(0.2, 0.2, 0.2),
  new THREE.MeshNormalMaterial()
);
scene.add(mesh);

改 mesh 的位置、旋转、缩放，或者换材质、加灯光，画面就动起来了。渲染后端这条线上，当前主线构建包含 WebGL 和 WebGPU 两个渲染器，SVG 和 CSS3D 渲染器作为插件单独提供。官方 examples 目录的数量庞大，每个都附完整源码，对 agent 来说等于一个按效果索引的代码库，要什么效果先抄最近的一例再改。

二、生态决定了它的上限

单看库本身，Three.js 只是开始。React 技术栈有 React Three Fiber，把场景写成组件树，react-spring 的 three 版绑定能直接驱动 3D 属性做弹簧动画；资产侧，GLTFLoader 是加载 3D 模型的事实标准，配 glTF 格式走遍各大建模工具；后处理有 EffectComposer，辉光、景深、色差都是现成模块。

对 agent 工作流真正重要的是资料密度：11.7 万星背后是十年的教程、问答和示例，模型生成的 Three.js 代码见过足够多正确写法，出错率显著低于小众库。

三、放进出片流水线

3D 出片最常见的组合是 Three.js 加 Remotion：时间线归 Remotion 管，相机和物体的关键帧用当前帧号驱动，而不是挂在 requestAnimationFrame 上，这样每一帧可复现，序列帧才对得齐。模型资产用 glTF 格式进出，后续的压缩和优化交给流水线下一环。

一句话分工：生成式草稿归 p5.js，高性能 2D 归 PixiJS，3D 场景归 Three.js。下一篇是 Rapier，给这个 3D 世界装上物理。