# Drei — Essential Helpers for React Three Fiber

> Drei is a collection of useful helpers, abstractions, and ready-made components for React Three Fiber that simplify building 3D scenes in React applications.

## Install

Save as a script file and run:

# Drei — Essential Helpers for React Three Fiber

## Quick Use
```bash
npm install @react-three/drei @react-three/fiber three
```
```jsx
import { Canvas } from "@react-three/fiber"
import { OrbitControls, Stage } from "@react-three/drei"
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-b86bad68
Author: Script Depot