drei
A library of ready-made helper components and hooks for building 3D scenes with react-three-fiber.
- Stars
- 10.1k
- Forks
- 868
- Licence
- MIT
- Language
- JavaScript
- Last update
- 16 days ago
- Type
- Library
What it is
drei is a collection of pre-built components and hooks for react-three-fiber, a way to write Three.js 3D graphics using React. Instead of writing low-level code for common needs like camera controls, text, loaders, or materials, you can import a ready-made piece from the package. The README describes it as a growing set of useful helpers and ready-made abstractions.
- Add orbit or other camera controls to a React 3D scene using the provided control components
- Render 3D text or load GLTF models with the included abstractions and loader hooks
- Apply special materials such as distorted or transmissive surfaces to meshes
- Use Html to place regular HTML elements inside a 3D scene
Great for
- React developers who are building 3D scenes for the web with react-three-fiber
- Developers who want ready-made camera controls, text, or loaders instead of writing them from scratch
- Teams already using Three.js who want a React-friendly way to structure their scene code
Not ideal for
- People who are new to both React and Three.js, since the library assumes familiarity with both (reason: it builds on react-three-fiber and does not explain those basics)
- Projects that do not use React, because the components only work inside react-three-fiber
- Anyone needing a standalone 3D editor or finished app rather than code helpers
How to get it
- 1
Install with a package manager
You'll need: Node.js · npm
Install the package
npm install @react-three/drei - 2
Run it
- Install react-three-fiber and Three.js in your React project, since drei builds on them
- Run npm install @react-three/drei
- Import a component, for example PerspectiveCamera, from '@react-three/drei' into your scene
- Place the component inside your react-three-fiber Canvas and run your dev server
- 3
Get the most out of it
- Browse the Storybook at drei.pmnd.rs to see live examples of each helper before using it
- Use the documentation site at pmndrs.github.io/drei for full component reference
- Use the /native import route if you are building for React Native, keeping in mind Html and Loader are not included
- Check the CONTRIBUTING guide if you have a generic component to share back
Downloads
Strengths
- Saves time by providing many common 3D helpers in one package
- Built to work with react-three-fiber, so it fits naturally into React code
- MIT licensed with documentation and a Storybook for browsing examples
Trade-offs
- Depends on react-three-fiber and Three.js, so you must learn those to use it well
- The React Native route omits Html and Loader, so some features are web-only
- README is truncated here, so the full list of components and their options is only visible in the external docs
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| drei (this) | 10.1k | Library | intermediate | 16 days ago | React developers who are building 3D scenes for the web with react-three-fiber |
| react-three-fiber | 33.4k | Library | intermediate | 16 days ago | React developers who want to add 3D scenes to a web app |
| three.js | 117k | Library | intermediate | 4 days ago | Web developers adding interactive 3D graphics to a website |
| editor | 25.3k | App | intermediate | 6 days ago | People who want to sketch or model a building in 3D on their own machine |
| aframe | 17.7k | Library | beginner | 4 months ago | Web developers who want to add 3D or VR scenes to a website |
| zustand | 58.9k | Library | beginner | 15 days ago | React developers who want simpler shared state than Redux |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.