Published on October 15, 2024

Drei (German for “three”) is a collection of useful helpers for React Three Fiber. Here are the components I reach for most often.

OrbitControls

The bread and butter of 3D navigation:

import { OrbitControls } from '@react-three/drei'

<Canvas>
  <OrbitControls enableDamping />
</Canvas>

Environment

Instantly add realistic lighting with HDR environments:

import { Environment } from '@react-three/drei'

<Environment preset="sunset" background />

Text

Performant 3D text with MSDF rendering:

import { Text } from '@react-three/drei'

<Text fontSize={1} color="white">
  Hello World
</Text>

useGLTF

Load 3D models with automatic Draco/meshopt support:

import { useGLTF } from '@react-three/drei'

function Model() {
  const { scene } = useGLTF('/model.glb')
  return <primitive object={scene} />
}

Html

Embed HTML in 3D space:

import { Html } from '@react-three/drei'

<Html position={[0, 2, 0]} center>
  <div className="tooltip">Click me!</div>
</Html>

Float

Add gentle floating animation:

import { Float } from '@react-three/drei'

<Float speed={2} floatIntensity={1}>
  <mesh>...</mesh>
</Float>

These components save countless hours of implementation time. Check out the drei docs for the full list.