Skip to content
Get packs

Guide · Open source

How to use drei: install and use React Three Fiber helpers

Updated · written with AI from the project's own documentation and checked against our catalogue data

drei is an open-source collection of ready-made components and hooks for react-three-fiber, which lets you write Three.js 3D graphics using React. Instead of writing low-level code for common needs such as camera controls, text, loaders or materials, you import a finished piece from the package. This guide shows how to install it, which import route to use and how the helpers fit into a React scene.

dreipmndrs/drei · ★ 10.1k · MIT

Quick start

  1. 1Confirm prerequisites. Make sure Node.js and npm are installed and that your project uses react-three-fiber.
  2. 2Install the package. Run npm install @react-three/drei in your project folder.
  3. 3Pick an import route. Use the default route for web projects, or the /native route for React Native.
  4. 4Browse the documentation. Open pmndrs.github.io/drei and find the helper you need.
  5. 5Import the helper. Import the component or hook from the package in the file where you build your scene.
  6. 6Use it in your scene. Place the helper inside your react-three-fiber Canvas and adjust its props as the documentation describes.

Check the prerequisites before you install drei

drei is a package for React developers who already build 3D scenes with react-three-fiber. The library assumes familiarity with both React and Three.js and does not explain those basics, so beginners to both should learn them first.

The install step needs Node.js and npm, as listed in the project's install method.

  • Node.js and npm installed on your machine
  • A React project that uses react-three-fiber
  • Basic familiarity with Three.js concepts

Install drei with npm

Run the install command from your project folder. The package name is @react-three/drei, the same name used in the project's README.

npm install @react-three/drei

Import components from the web and native routes

The default import route is the web build, which exports components such as PerspectiveCamera and PositionalAudio, along with Html and Loader. The native route is for React Native and does not export Html or Loader.

The README also notes that the package uses the stand-alone three-stdlib instead of three/examples/jsm.

  • Web (default): import from '@react-three/drei'
  • React Native: import from '@react-three/drei/native'
  • Html and Loader are only available on the web route
import { PerspectiveCamera, PositionalAudio } from '@react-three/drei'

Use a helper inside a react-three-fiber scene

Helpers are used like any React component inside a react-three-fiber Canvas. Import the helper you need and place it in your JSX, instead of writing the underlying Three.js setup yourself.

Helpers only work inside react-three-fiber. If your project does not use React, drei will not help.

  • Find the helper you need in the documentation at pmndrs.github.io/drei
  • Import it from the package
  • Place it inside your react-three-fiber scene

Find the right helper in the documentation

The helpers are grouped into categories such as cameras, controls, gizmos, abstractions, shaders, loaders and performance tools. Each category lists specific helpers, for example camera controls, text, loaders or materials.

The official documentation is at https://pmndrs.github.io/drei, and the project also has a Storybook at drei.pmnd.rs for visual examples.

  • Controls: camera and interaction helpers
  • Abstractions: components such as Text and Image
  • Loaders: helpers for loading assets
  • Performance: helpers for optimizing scenes

What people use it for

  • Adding ready-made camera controls to a 3D product viewer
  • Rendering text labels inside a react-three-fiber scene
  • Loading 3D models and textures with built-in loader helpers
  • Creating materials with shader helpers such as MeshDistortMaterial
  • Improving scene performance with helpers from the Performance category

Frequently asked questions

Is drei free to use?

drei is released under the MIT licence, according to the project's listing. Check the licence file in the repository for the full terms before using it in your project.

What do I need to install drei?

The install method requires Node.js and npm. You install the package with npm install @react-three/drei, and you also need a react-three-fiber project for the helpers to work.

Can I use drei without React?

No. The components only work inside react-three-fiber, which is a React renderer for Three.js. Projects that do not use React should look at Three.js directly.

Why does drei not export Html or Loader on React Native?

The native route of the library does not export Html or Loader. The default web route exports both, so use the default import on web projects.

Is drei a beginner-friendly way to learn 3D on the web?

Not on its own. The library assumes familiarity with React and Three.js and does not explain those basics, so learn them first.

What are the alternatives to drei?

The project lists react-three-fiber, three.js and theatre.js as comparable projects. react-three-fiber is the renderer drei is built on, and three.js is the underlying 3D library.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

drei suits React developers who already build 3D scenes with react-three-fiber and want ready-made camera controls, text, loaders and materials. If you are new to both React and Three.js, or you do not use React, start with the underlying libraries or a different tool. Those who need a standalone 3D editor or finished app should look elsewhere.

Install options & downloads