pmndrs/react-three-fiber

这是什么？

核心功能

• 01以 JSX 元素编写 Three.js 场景，每个元素直接对应 Three.js 对象。
• 02在 3D 对象上使用 React 状态和 onClick、onPointerOver 等事件处理器。
• 03通过 useFrame Hook 在渲染循环中执行每帧逻辑。
• 04无需等待库更新即可使用 Three.js 的全部功能。
• 05通过独立入口支持 React Native。

适用场景

• 在 React 应用中构建可交互的 3D 产品配置器或数据可视化。
• 创建带有自身状态和动画的可复用 3D 组件。
• 在 React Native 移动应用中加入 3D 场景。
• 借助测试渲染器在 Node 中为 3D 场景组件编写单元测试。

快速上手

1. 1

   使用 npm 安装依赖包

   npm install three @types/three @react-three/fiber
2. 2

   创建 Canvas 并用 JSX 组件渲染场景（参见 README 示例）

使用前须知

• !react-three-fiber 需要与对应的 React 主版本配套：v8 对应 react@18，v9 对应 react@19。

标签

常见问题

react-three-fiber 是什么？

用于 Three.js 的 React 渲染器，以声明式 JSX 组件构建 3D 场景。 react-three-fiber（即 @react-three/fiber）是 Three.js 的 React 渲染器。你不必命令式地创建网格、材质和灯光，而是用 <mesh />、<ambientLight /> 这样的 JSX 元素描述场景，每个元素都对应一个 Three.js 对象。组件可以拥有自己的 React 状态，响应指针事件，并通过 useFrame 等 Hook 接入渲染循环。

react-three-fiber 可以免费使用吗？用的什么许可证？

react-three-fiber 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

react-three-fiber 还在维护吗？

活跃维护中。react-three-fiber 最近一次提交是在 2026年10月21日。

react-three-fiber 适合用来做什么？

在 React 应用中构建可交互的 3D 产品配置器或数据可视化。 创建带有自身状态和动画的可复用 3D 组件。 在 React Native 移动应用中加入 3D 场景。 借助测试渲染器在 Node 中为 3D 场景组件编写单元测试。

react-three-fiber 怎么安装和运行？

使用 npm 安装依赖包: npm install three @types/three @react-three/fiber 创建 Canvas 并用 JSX 组件渲染场景（参见 README 示例）

在哪里获取 react-three-fiber？

源代码和安装说明在 GitHub 上：https://github.com/pmndrs/react-three-fiber