用途:用 Three.js 为网页构建 3D 场景、动画与交互体验,面向产品查看器/3D 展示、交互背景、3D 数据可视化、创意实验和类游戏体验。当前状态为 Starter,模式会随使用演进。
主要能力:通过原生 Three.js 或 React Three Fiber 创建场景、相机、渲染器、几何体、材质与灯光,并运行动画循环;可用 Drei 的 useGLTF 加载 GLTF 模型,用 OrbitControls、Environment 等辅助组件;支持响应式画布与 dpr 适配;可选 postprocessing 实现 Bloom 等后处理;用 useFrame 编写逐帧动画。
安装与用法:原生方式执行 pnpm add three 与 pnpm add -D @types/three;React 方式执行 pnpm add three @react-three/fiber @react-three/drei 与 pnpm add -D @types/three;后处理执行 pnpm add @react-three/postprocessing。原生用法为创建 Scene、PerspectiveCamera、WebGLRenderer,添加网格与 DirectionalLight,并调用 requestAnimationFrame 渲染循环;React 用法为在 Canvas 中放置 mesh、灯光、OrbitControls 与 Environment。
AI 资产流程:在 Google AI Studio 用 Nano Banana 生成图像,再经 Tripo、Meshy 等转为 3D,导出 GLTF/GLB 后加载进 Three.js。
限制:资料未提供收费、价格与具体平台限制;尚未完成首个实际项目以确定模式,原生与 React Three Fiber 偏好待定,着色器与物理(rapier)模式待补充。