r3f-drei

R3F Drei

Drei ("three" in German) provides production-ready abstractions for common R3F patterns—controls, loaders, helpers, and effects.

Quick Start

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

function Scene() {
  const { scene } = useGLTF('/model.glb');
  
  return (
    <>
      <OrbitControls />
      <Environment preset="city" />
      <Text position={[0, 2, 0]} fontSize={0.5}>Hello World</Text>
      <primitive object={scene} />
    </>
  );
}

Controls

OrbitControls

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

<OrbitControls
  // Rotation
  enableRotate={true}
  rotateSpeed={1}
  minPolarAngle={0}           // Vertical min (0 = top)
  maxPolarAngle={Math.PI}     // Vertical max (π = bottom)
  minAzimuthAngle={-Infinity} // Horizontal min
  maxAzimuthAngle={Infinity}  // Horizontal max
  
  // Zoom
  enableZoom={true}
  zoomSpeed={1}
  minDistance={1}             // Min zoom distance
  maxDistance={100}           // Max zoom distance
  
  // Pan
  enablePan={true}
  panSpeed={1}
  screenSpacePanning={true}
  
  // Damping
  enableDamping={true}
  dampingFactor={0.05}
  
  // Target
  target={[0, 0, 0]}
  
  // Events
  onChange={(e) => console.log('changed')}
  onStart={(e) => console.log('interaction start')}
  onEnd={(e) => console.log('interaction end')}
/>

Other Controls

// First-person controls
import { PointerLockControls } from '@react-three/drei';
<PointerLockControls />

// Fly controls
import { FlyControls } from '@react-three/drei';
<FlyControls movementSpeed={10} rollSpeed={0.5} />

// Trackball controls
import { TrackballControls } from '@react-three/drei';
<TrackballControls />

// Map controls (constrained orbit)
import { MapControls } from '@react-three/drei';
<MapControls />

// Transform controls (gizmo)
import { TransformControls } from '@react-three/drei';
<TransformControls object={meshRef} mode="translate" />

Loading

useGLTF (3D Models)