Repolode
提交项目
pmndrs

pmndrs/drei

为 react-three-fiber 提供的一组开箱即用的 React 3D 辅助组件与 Hooks。

在 GitHub 查看官网
Star
9,994
Fork
853
未关闭 Issue
136
最近提交
昨天

这是什么？

drei 是 react-three-fiber（Three.js 的 React 渲染器）的辅助库，提供一批预制的组件和 Hooks，覆盖常见的 3D 开发需求，开发者无需从零实现相机控制、模型加载、阴影、文字或着色器材质。

库内功能按领域划分：相机与控制器包括 CameraControls、ScrollControls、KeyboardControls 等；辅助工具有 TransformControls 和 GizmoHelper；抽象组件包括 Text、Image、Edges、Trail；场景布置类有 Environment、Sky、Stars、ContactShadows；性能相关有 Instances、Merged、AdaptiveDpr 等。此外还提供 useGLTF、useTexture 等资源加载 Hook。

包名为 @react-three/drei。默认入口面向 Web，导出 Html 和 Loader；另有面向 React Native 的 native 入口，不包含这两个组件。文档站点提供可交互的 Storybook 示例。

核心功能

  • 01提供预制的相机控制器、Gizmo 以及键盘、滚动输入组件
  • 02提供 3D 文字、图片、边缘线、拖尾和描边等抽象组件
  • 03提供 useGLTF、useTexture、useFBX 等资源加载 Hook
  • 04提供环境贴图、天空、阴影和灯光等场景布置工具
  • 05提供实例化、合并几何体和自适应分辨率等性能工具
  • 06区分 Web 与 React Native 两个入口

适用场景

  • 用轨道控制器和 glTF 模型搭建交互式产品展示
  • 在 React 网站中加入 3D 文字、HTML 叠加层或滚动驱动动画
  • 制作带软阴影、环境光照和反射材质的场景
  • 在 React Three Fiber 应用中高效渲染大量重复网格

快速上手

  1. 1

    从 npm 安装该包

    npm install @react-three/drei

使用前须知

  • React Native 入口（@react-three/drei/native）不导出 Html 和 Loader。
  • 它是为 react-three-fiber 构建的，因此还需要同时配置 @react-three/fiber。

标签

#react#threejs#3d#webgl#react-three-fiber#graphics#helpers#hooks

常见问题

drei 是什么？
为 react-three-fiber 提供的一组开箱即用的 React 3D 辅助组件与 Hooks。 drei 是 react-three-fiber（Three.js 的 React 渲染器）的辅助库，提供一批预制的组件和 Hooks，覆盖常见的 3D 开发需求，开发者无需从零实现相机控制、模型加载、阴影、文字或着色器材质。
drei 可以免费使用吗？用的什么许可证？
drei 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
drei 还在维护吗？
活跃维护中。drei 最近一次提交是在 2026年10月19日。
drei 适合用来做什么？
用轨道控制器和 glTF 模型搭建交互式产品展示 在 React 网站中加入 3D 文字、HTML 叠加层或滚动驱动动画 制作带软阴影、环境光照和反射材质的场景 在 React Three Fiber 应用中高效渲染大量重复网格
drei 怎么安装和运行？
从 npm 安装该包: npm install @react-three/drei
在哪里获取 drei？
源代码和安装说明在 GitHub 上：https://github.com/pmndrs/drei

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目