用途:在网页中构建实时 3D 动效,包括 3D 首屏、产品查看器、交互或滚动联动的 3D 背景、相机飞行、GLTF 动画播放与混合,以及大量对象的实例化渲染。
主要能力:提供最小场景与渲染循环写法;用 clock.getDelta() 实现与帧率无关的运动,用 setAnimationLoop 替代 requestAnimationFrame;通过 AnimationMixer 播放 GLTF 动画片段,并用 crossFadeTo 做片段间平滑过渡,一次性动画可设 LoopOnce 与 clampWhenFinished;相机平滑跟随采用指数插值 lerp(goal, 1 - exp(-lambda*dt)),滚动联动把 scrollY 映射到相机目标,曲线飞行可用 CatmullRomCurve3;大量相同网格用 InstancedMesh 与 setMatrixAt 合并绘制调用;React Three Fiber 中用 useFrame 驱动动画,dpr 限制像素比,模型用 useGLTF、动画用 useAnimations。
性能与限制:建议将像素比限制为 Math.min(devicePixelRatio, 2),复用几何体与材质,优先使用 matcap 或烘焙光照,减少实时阴影光源。GPU 资源(几何体、材质、纹理、渲染目标)不会随 JS 对象被垃圾回收,必须显式 dispose,否则反复挂载会耗尽显存并导致上下文丢失;scene.remove 只解除场景图引用,不释放 GPU 资源。R3F 中声明式资源会自动释放,命令式创建的资源需用 useMemo 配合 useEffect 清理,共享资源可设 dispose={null}。可用 renderer.info.memory 验证是否泄漏。
交付与验证:独立场景可交付单个 HTML 文件,通过 importmap 从 CDN 引入 three 与 three/addons,无需构建步骤;所有运动由 clock.getElapsedTime() 单一时间源驱动,随机量使用固定种子;支持 ?t=N 冻结单帧以便截图,可用 npx playwright screenshot 在起始、中间、结束时刻截图检查黑屏、裁切、NaN 与 404 等问题,并遵循 prefers-reduced-motion。
资料未提供收费、价格与平台支持等具体信息。