Drei — Essential Helpers for React Three Fiber

Introduction

Drei (German for "three") is the companion library for React Three Fiber. It provides dozens of pre-built components that would otherwise require significant boilerplate: camera controls, loaders, shaders, abstractions for text, HTML overlays, environment maps, and performance utilities.

What Drei Does

• Provides camera controls including OrbitControls, FlyControls, and ScrollControls out of the box
• Offers environment and lighting helpers like Environment, Lightformer, and Stage
• Includes geometry abstractions such as RoundedBox, Text, Text3D, and Line
• Supplies loading utilities for GLTF models, textures, cubemaps, and HDR files
• Adds performance tools like Detailed (LOD), Instances, Preload, and BVH helpers

Architecture Overview

Drei is a collection of React components and hooks that wrap Three.js classes and patterns into the React Three Fiber declarative model. Each component is a standalone module that integrates with R3F's reconciler, receiving updates through React's render cycle. The library uses tree-shaking-friendly exports so bundlers only include the components your application actually uses.

Self-Hosting & Configuration

• Install alongside React Three Fiber: npm install @react-three/drei @react-three/fiber three
• Import only the components you need for optimal bundle size
• Configure Drei components as JSX children inside an R3F <Canvas> element
• Environment maps can load from local assets or remote HDR URLs
• GLTF models can be pre-processed with gltfjsx to generate typed React components

Key Features

• ScrollControls for scroll-driven 3D animations tied to page scroll position
• Html component for embedding DOM elements inside 3D scenes with occlusion
• useGLTF hook with Draco and Meshopt compression support
• Shader materials like MeshTransmissionMaterial and MeshReflectorMaterial
• Billboard, Float, and MeshWobbleMaterial for common visual effects

Comparison with Similar Tools

• Raw Three.js — full control but requires imperative code; Drei provides declarative React wrappers
• React Three Fiber alone — R3F is the renderer; Drei adds the ecosystem of reusable components
• Leva — a GUI controls panel; often used alongside Drei but focuses on tweaking parameters
• Theatre.js — animation studio for R3F; Drei handles static helpers, Theatre handles timeline animation
• A-Frame — HTML-based 3D framework; Drei stays in the React/JSX paradigm

FAQ

Q: Do I need React Three Fiber to use Drei? A: Yes. Drei components are designed to work inside an R3F Canvas and depend on its reconciler.

Q: Does Drei increase bundle size significantly? A: No. Drei supports tree-shaking, so only the components you import are included in the final bundle.

Q: Can I use Drei with vanilla Three.js? A: Drei is React-specific. For vanilla Three.js, look at the individual Three.js examples or libraries like three-stdlib.

Q: How do I load 3D models with Drei? A: Use the useGLTF hook to load .glb or .gltf files. For optimized components, run npx gltfjsx model.glb to generate a React component.

Sources

• https://github.com/pmndrs/drei
• https://drei.docs.pmnd.rs