react-three-fiber - 使用 React Three Fiber 构建声明式 3D 场景
使用 React Three Fiber 在 React 中构建基于组件的交互式 3D 场景，并使用 Three.js 对象、Hooks、状态管理和可复用抽象。
标签
更新于: 2026-10-16能力
典型输入
典型输出
该技能可以做什么
- 创建声明式 3D 场景
- 配置 Canvas 渲染
- 使用 useFrame 制作动画
- 使用 useThree 访问场景状态
- 使用 useLoader 加载资源
- 处理指针交互
- 创建可复用 3D 组件
- 优化多对象渲染
输入
- React 应用
- Three.js 资源
- 场景配置
- 相机配置
- 渲染器设置
- 交互需求
输出
- 渲染的 3D 场景
- 可交互的 3D 对象
- 带动画的场景元素
- 已加载的模型和纹理
- 可复用的 React 组件
要求
- React 环境
- React Three Fiber
- Three.js
- 支持 WebGL 的渲染器