Drei is a comprehensive collection of useful helpers and ready-made abstractions built for react-three-fiber, a React renderer for Three.js. The library provides developers with pre-built components and hooks that accelerate 3D web development by eliminating the need to create common functionality from scratch. The project is maintained by the Poimandres collective and serves as a growing ecosystem of reusable 3D components designed to be generic enough for broad utility across different projects.
The library is organized into several major categories of functionality. Camera utilities include PerspectiveCamera, OrthographicCamera, and CubeCamera components. Control systems encompass a wide range of options such as CameraControls, FlyControls, MapControls, TrackballControls, ArcballControls, PointerLockControls, and ScrollControls, allowing developers to implement various camera interaction patterns. Gizmos and manipulation tools include GizmoHelper, PivotControls, DragControls, TransformControls, and Grid components for scene editing and visualization. The library also provides numerous abstractions for common 3D tasks including Text, Text3D, Billboard, PositionalAudio, Effects, Edges, Outlines, Trail, and Clone components.
Drei includes specialized shader materials such as MeshReflectorMaterial, MeshWobbleMaterial, MeshDistortMaterial, MeshRefractionMaterial, and MeshTransmissionMaterial that enable advanced visual effects. The library offers extensive loading capabilities through hooks like useGLTF, useFBX, useTexture, useFont, and useVideoTexture, streamlining asset management. Performance optimization features include Instances, Merged, Points, Segments, Detailed, BakeShadows, AdaptiveDpr, and a Bvh component for efficient scene rendering.
Staging and environment utilities provide components for scene setup including Center, Bounds, Environment, Lightformer, Sky, Stars, Sparkles, Cloud, ContactShadows, and AccumulativeShadows. Portal and rendering utilities like Hud, View, RenderTexture, and MeshPortalMaterial enable advanced rendering techniques. The library includes a comprehensive set of geometric shapes from basic primitives like Plane, Box, and Sphere to more complex forms like RoundedBox, Line variants, and Facemesh.
The repository uses the standalone three-stdlib package instead of Three.js examples, and provides separate export routes for web and React Native environments, with the native route excluding Html and Loader components. Complete documentation is available at pmndrs.github.io/drei, and the project actively encourages community contributions of generic, reusable components.
