Recipe

drei helpers

Utility components and hooks from the drei library that simplify common Three.js patterns in React Three Fiber scenes.

Overview

drei provides a collection of helpers that reduce boilerplate for controls, environment maps, text rendering, and more. Import directly from @react-three/drei.

Common Helpers

OrbitControls

Camera orbit, pan, and zoom with mouse or touch.

Environment

Pre-built HDR environment maps for PBR lighting.

Text / Text3D

Render 2D or extruded 3D text with any font.

Float

Gentle floating animation wrapper for any child.

MeshReflectorMaterial

Real-time planar reflections on surfaces.

useGLTF / useFBX

Suspense-ready model loaders with caching.

Quick Example

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

function Scene() {
  return (
    <>
      <OrbitControls enableDamping />
      <Environment preset="sunset" />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial />
      </mesh>
    </>
  )
}

Next Steps

Explore the full drei catalog for stage presets, shader materials, and pointer-based interaction helpers. Combine with React Three Fiber fundamentals.