Repolode
Submit
pmndrs

pmndrs/drei

A collection of ready-made React helper components and hooks for building 3D scenes with react-three-fiber.

View on GitHubWebsite
Stars
9,994
Forks
853
Open issues
136
Last commit
yesterday

What is it?

drei is a helper library for react-three-fiber, the React renderer for Three.js. It provides prebuilt components and hooks for common 3D tasks, so developers don't have to rewrite camera controls, loaders, shadows, text, or shader materials from scratch.

The library is organized by area. It covers cameras and controls such as CameraControls, ScrollControls and KeyboardControls; gizmos like TransformControls and GizmoHelper; abstractions for Text, Image, Edges and Trail; staging helpers such as Environment, Sky, Stars and ContactShadows; and performance utilities including Instances, Merged and AdaptiveDpr. Loader hooks like useGLTF and useTexture are also included.

The package is published as @react-three/drei. It offers a default web entry that exports Html and Loader, and a separate native entry for React Native that omits those two components. Documentation is hosted on a separate site with live Storybook examples.

Key features

  • 01Prebuilt camera controls, gizmos and keyboard/scroll input components
  • 02Abstractions for 3D text, images, edges, trails and outlines
  • 03Loader hooks such as useGLTF, useTexture and useFBX
  • 04Staging helpers for environment maps, sky, shadows and lighting
  • 05Performance utilities including instancing, merged geometry and adaptive resolution
  • 06Separate web and React Native entry points

Use cases

  • Building interactive product viewers with orbit controls and loaded glTF models
  • Adding 3D text, HTML overlays or scroll-driven animations to a React site
  • Creating scenes with soft shadows, environment lighting and reflective materials
  • Rendering large numbers of repeated meshes efficiently in a React Three Fiber app

Quick start

  1. 1

    Install the package from npm

    npm install @react-three/drei

Things to know

  • The React Native route (@react-three/drei/native) does not export Html or Loader.
  • It is built for react-three-fiber, so you must also set up @react-three/fiber.

Topics

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

FAQ

What is drei?
A collection of ready-made React helper components and hooks for building 3D scenes with react-three-fiber. drei is a helper library for react-three-fiber, the React renderer for Three.js. It provides prebuilt components and hooks for common 3D tasks, so developers don't have to rewrite camera controls, loaders, shadows, text, or shader materials from scratch.
Is drei free to use? What license does it have?
drei is open source under the MIT license. Check the license terms before using it in commercial products.
Is drei still maintained?
Actively maintained. The last commit to drei was on Oct 19, 2026.
What can I use drei for?
Building interactive product viewers with orbit controls and loaded glTF models Adding 3D text, HTML overlays or scroll-driven animations to a React site Creating scenes with soft shadows, environment lighting and reflective materials Rendering large numbers of repeated meshes efficiently in a React Three Fiber app
How do I install drei?
Install the package from npm: npm install @react-three/drei
Where can I get drei?
The source code and installation instructions are on GitHub: https://github.com/pmndrs/drei

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects