工具条目首选
three.js
Web 3D 的事实标准。在 React 里配合 React Three Fiber，用组件的方式写场景。
- 最后审阅
- 适用版本
- three 0.186 · React Three Fiber 9.8
适合
- 产品展示、首页主视觉、数据可视化里需要真正 3D 的场景
- 想让页面有记忆点、愿意为此投入性能预算的项目
- React 项目（通过 React Three Fiber 以组件方式编写）
不适合
- 用 CSS 变换或一段视频就能实现的“伪 3D”效果
- 低端设备占比高、对加载速度极其敏感的页面
three.js 封装了 WebGL，让你用场景、相机、灯光、网格这些概念描述 3D 画面，而不用直接写着色器。它是 Web 3D 生态最大的库，AI 对它也非常熟悉。
为什么是首选
- 生态最大。 模型加载、后期效果、物理、控制器都有成熟方案，遇到问题几乎都能搜到答案。
- React 里写起来自然。 React Three Fiber 把 three.js 对象映射成 JSX 组件，场景跟着状态更新；配套的 drei 提供大量常用组件（相机控制、环境光、文字等）。
- AI 写得出来。 描述清楚要什么，AI 能给出可运行的场景；难的是性能，这也是纪念品要约束的部分。
上手
pnpm add three @react-three/fiber @react-three/drei
import { Canvas } from '@react-three/fiber';
export function Hero3D() {
return (
<Canvas dpr={[1, 2]} frameloop="demand">
<ambientLight intensity={0.6} />
<mesh rotation={[0.4, 0.6, 0]}>
<boxGeometry />
<meshStandardMaterial color="#ec7a59" />
</mesh>
</Canvas>
);
}
需要知道的取舍
3D 是最容易拖慢页面的展示组件：库本身体积不小，模型和贴图更大，持续渲染还会耗电发热。按下方纪念品的约束来写——限制像素比、按需渲染、懒加载、给不支持或不想要动效的用户一个静态替代——3D 才不会变成负担。
纪念品
带走给你的 AI
把这份 3d-scene-brief.md 放进项目，或直接粘贴给 AI 编程助手。
# 3D 场景简报（交给 AI）
用 three.js + React Three Fiber 做一个 <场景描述>，放在 <页面位置>。
## 性能约束
- `<Canvas dpr={[1, 2]}>` 限制像素比；静态场景用 `frameloop="demand"`，只在变化时渲染。
- 3D 组件用 `React.lazy` 懒加载，进入视口后再挂载；加载期间显示同尺寸的静态占位图。
- 模型用压缩过的 glTF（.glb），单个模型不超过 2 MB；贴图尺寸不超过 2048。
- 组件卸载时释放几何体、材质和贴图。
## 可访问性与降级
- 用户开启“减少动态效果”时，不自动旋转或循环动画，只显示静态画面。
- 不支持 WebGL 或加载失败时，显示静态图片，页面其余功能不受影响。
- 画布不承载必要信息；关键文字放在 HTML 里，而不是 3D 场景中。
## 验收
- 在中端手机上滚动页面不卡顿；首屏加载不被 3D 资源阻塞。