# pmndrs/drei

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/pmndrs-drei).**

9,705 stars · 816 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/pmndrs/drei
- Homepage: https://docs.pmnd.rs/drei
- awesome-repositories: https://awesome-repositories.com/repository/pmndrs-drei.md

## Topics

`helpers` `hooks` `react` `react-three-fiber` `threejs`

## Description

This project is a Three.js utility library and a collection of declarative React components designed for building 3D scenes. It provides a set of abstractions that wrap low-level primitives to manage lifecycles and memory disposal, serving as a geometry generator, a post-processing pipeline, and a scroll-driven animation tool.

The library is distinguished by its specialized camera control systems, which include unified abstractions for orbit and perspective views as well as real-time face tracking and landmark detection via webcam feeds. It also features interactive transform gizmos for object manipulation and a declarative effect pipeline for composing render passes and visual effects.

Broadly, the project covers spatial audio integration, 3D typography and curve generation, and reactive input mapping for keyboard actions. It includes various scene management utilities such as coordinate grids and billboarding effects, alongside image rendering tools that utilize custom shaders for scaling and clipping.

The library includes native-optimized components that exclude web-only dependencies for use in non-browser environments.

## Tags

### Graphics & Multimedia

- [Three.js Utility Libraries](https://awesome-repositories.com/f/graphics-multimedia/three-js-utility-libraries.md) — Provides a comprehensive collection of React components that wrap Three.js primitives to manage lifecycles and memory disposal.
- [3D Geometry Generators](https://awesome-repositories.com/f/graphics-multimedia/3d-geometry-generators.md) — Provides components that generate rounded boxes, lines, curves, and text meshes without low-level code.
- [Camera Orbit Controls](https://awesome-repositories.com/f/graphics-multimedia/3d-scene-abstractions/camera-orbit-controls.md) — Provides interactive camera orbit controls supporting panning, zooming, and rotation via mouse and touch. ([source](https://pmndrs.github.io/drei/controls/camera-controls))
- [3D Viewpoint Control](https://awesome-repositories.com/f/graphics-multimedia/3d-viewpoint-control.md) — Manages 3D viewpoint navigation through orbit controls, gizmos, and real-time face tracking.
- [Camera Control Abstractions](https://awesome-repositories.com/f/graphics-multimedia/camera-control-abstractions.md) — Provides a unified React component interface that wraps various camera control implementations.
- [Camera Perspective Configurations](https://awesome-repositories.com/f/graphics-multimedia/camera-systems/camera-perspective-configurations.md) — Implements orthographic camera configurations for parallel projection rendering. ([source](https://pmndrs.github.io/drei/cameras/orthographic-camera))
- [Declarative Geometry Generators](https://awesome-repositories.com/f/graphics-multimedia/declarative-geometry-generators.md) — Provides a system for creating 3D shapes via high-level component parameters instead of imperative vertex manipulation.
- [Post-Processing Pipelines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/post-processing-pipelines.md) — Provides a declarative pipeline for composing multiple render passes and visual effects.
- [Declarative Effect Pipelines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/post-processing-effects/declarative-effect-pipelines.md) — Provides a declarative hierarchy for composing multiple render passes into a single post-processing effect chain.
- [Object Manipulators](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/3d-value-manipulators/object-manipulators.md) — Provides interactive 3D gizmos for translating, rotating, and scaling objects within a scene.
- [3D Mesh Primitives](https://awesome-repositories.com/f/graphics-multimedia/3d-mesh-primitives.md) — Ships pre-configured buffer geometry and materials for common 3D shapes. ([source](https://pmndrs.github.io/drei/shapes/mesh))
- [3D Typography Generation](https://awesome-repositories.com/f/graphics-multimedia/3d-typography-generation.md) — Generates 3D typography from JSON font data with customizable geometry and alignment. ([source](https://pmndrs.github.io/drei/abstractions/text3d))
- [Proximity-Based Volume Control](https://awesome-repositories.com/f/graphics-multimedia/audio-music/terminal-based-audio-playback/proximity-based-volume-control.md) — Implements audio sources that vary volume based on the distance between the 3D object and the camera. ([source](https://pmndrs.github.io/drei/abstractions/positional-audio))
- [Cubic Bezier Rendering](https://awesome-repositories.com/f/graphics-multimedia/bezier-curve-interpolations/cubic-bezier-rendering.md) — Implements 3D line rendering using cubic Bezier interpolation between control points. ([source](https://pmndrs.github.io/drei/shapes/cubic-bezier-line))
- [Quadratic Bezier Rendering](https://awesome-repositories.com/f/graphics-multimedia/bezier-curve-interpolations/quadratic-bezier-rendering.md) — Implements 3D line rendering using quadratic Bezier interpolation. ([source](https://pmndrs.github.io/drei/shapes/quadratic-bezier-line))
- [Billboard Constraints](https://awesome-repositories.com/f/graphics-multimedia/billboard-constraints.md) — Implements a mechanism that ensures 3D elements always rotate to face the camera regardless of position. ([source](https://pmndrs.github.io/drei/abstractions/billboard))
- [Camera Control Widgets](https://awesome-repositories.com/f/graphics-multimedia/camera-control-widgets.md) — Provides 3D widgets to visualize and adjust camera orientation and position. ([source](https://pmndrs.github.io/drei/gizmos/gizmo-helper))
- [Custom Widget Frameworks](https://awesome-repositories.com/f/graphics-multimedia/camera-control-widgets/custom-widget-frameworks.md) — Offers a context hook for creating custom camera-control widgets beyond standard options. ([source](https://pmndrs.github.io/drei/gizmos/gizmo-helper))
- [Target-Based Object Orientation](https://awesome-repositories.com/f/graphics-multimedia/camera-systems/camera-interaction-controllers/camera-animations/ray-traced-object-animations/target-based-object-orientation.md) — Implements orientation logic that forces 3D objects to consistently face a specified target point during motion. ([source](https://pmndrs.github.io/drei/controls/motion-path-controls))
- [Cross-Platform 3D Components](https://awesome-repositories.com/f/graphics-multimedia/cross-platform-3d-components.md) — Provides 3D helper components optimized for native environments by stripping web-specific dependencies. ([source](https://cdn.jsdelivr.net/gh/pmndrs/drei@master/README.md))
- [Rounded Box Geometry](https://awesome-repositories.com/f/graphics-multimedia/geometric-rounding/rounded-box-geometry.md) — Generates 3D box buffer geometry with rounded corners using extrusion. ([source](https://pmndrs.github.io/drei/shapes/rounded-box))
- [Line Geometry Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/line-geometry-renderers.md) — Provides tools for rendering high-performance stylized line geometries and wireframes in 3D. ([source](https://pmndrs.github.io/drei/shapes/line))
- [Render Targets](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/3d-graphics-pipelines/scene-renderers/render-targets.md) — Captures camera output into render targets to be used as textures on other 3D objects. ([source](https://pmndrs.github.io/drei/cameras/perspective-camera))
- [Scene Rotation Utilities](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/scene-initialization/scene-rotation-utilities.md) — Ships utilities for smooth, physics-based rotation and polar zooming of scene contents for presentations. ([source](https://pmndrs.github.io/drei/controls/presentation-controls))
- [Shader-Based Image Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/shaders/shader-based-image-rendering.md) — Uses custom fragment shaders to render images that automatically scale to cover their container. ([source](https://pmndrs.github.io/drei/abstractions/image))
- [SDF](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering/sdf.md) — Implements signed distance fields to render sharp, antialiased text at any scale in 3D space.
- [Material Transparency Configurations](https://awesome-repositories.com/f/graphics-multimedia/material-transparency-configurations.md) — Implements alpha blending and transparency configurations for 3D image materials. ([source](https://pmndrs.github.io/drei/abstractions/image))
- [Path Animation Utilities](https://awesome-repositories.com/f/graphics-multimedia/path-animation-utilities.md) — Enables 3D objects to be animated along Bezier and Catmull-Rom curves with configurable looping and damping.
- [Reactive Input Mapping](https://awesome-repositories.com/f/graphics-multimedia/reactive-input-mapping.md) — Maps physical keyboard keys to a reactive state for decoupled input handling in 3D environments.
- [Spatial Audio Integration](https://awesome-repositories.com/f/graphics-multimedia/spatial-audio-integration.md) — Links spatial audio sources to 3D objects so that panning and volume respond dynamically to camera distance.
- [Real-time Environment Capture](https://awesome-repositories.com/f/graphics-multimedia/surface-reflection-masks/environment-reflection-mapping/real-time-environment-capture.md) — Renders the scene in real-time into six-sided cube maps to provide dynamic reflections for 3D materials.

### User Interface & Experience

- [Scroll Progress Mapping](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-progress-mapping.md) — Implements logic to translate scroll ranges into normalized progress values to drive complex 3D animations. ([source](https://pmndrs.github.io/drei/controls/scroll-controls))
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — Provides reactive hooks that bind HTML scroll positions to 3D scene properties and animations.
- [Transform Origin Controllers](https://awesome-repositories.com/f/user-interface-experience/axis-scaling-transformations/transform-origin-controllers.md) — Implements transform gizmos with offset pivot points for rotations and scaling relative to a custom origin. ([source](https://pmndrs.github.io/drei/gizmos/pivot-controls))
- [Face-Driven Camera Motion](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/animation-targets/dynamic-target-tracking/camera-target-tracking/face-driven-camera-motion.md) — Implements real-time camera movement and rotation that follows a user's face detected via webcam.
- [Drag Direction Restrictions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-operation-controls/drag-handles/drag-direction-restrictions.md) — Restricts the movement of 3D objects to a single axis during interactive drag operations. ([source](https://pmndrs.github.io/drei/gizmos/drag-controls))
- [Gizmo Frameworks](https://awesome-repositories.com/f/user-interface-experience/ui-components/text-editors/gizmo-frameworks.md) — Provides a context hook framework for building custom 3D gizmo widgets with unique visuals and behavior. ([source](https://pmndrs.github.io/drei/gizmos/gizmo-helper))
- [Manipulation Gizmos](https://awesome-repositories.com/f/user-interface-experience/ui-components/text-editors/manipulation-gizmos.md) — Ships interactive 3D widgets for translating, rotating, and scaling objects with axis locking and snap behavior.

### Artificial Intelligence & ML

- [Facial Feature Tracking](https://awesome-repositories.com/f/artificial-intelligence-ml/computer-vision-systems/computer-vision/development-orchestration-tools/computer-vision-libraries/camera-tracking/facial-feature-tracking.md) — Drives real-time camera movement and rotation based on detected facial landmark positions. ([source](https://pmndrs.github.io/drei/controls/face-controls))
- [Blendshape Animations](https://awesome-repositories.com/f/artificial-intelligence-ml/computer-vision-systems/computer-vision/facial-analysis-systems/face-tracking/blendshape-animations.md) — Provides tools for animating facial blendshapes and eye movements using real-time face tracking data. ([source](https://pmndrs.github.io/drei/shapes/facemesh))
- [Blendshape Rendering](https://awesome-repositories.com/f/artificial-intelligence-ml/computer-vision-systems/computer-vision/facial-analysis-systems/face-tracking/blendshape-rendering.md) — Renders facial blendshapes and performs eye tracking using provided blendshape data. ([source](https://pmndrs.github.io/drei/shapes/facemesh))
- [Landmark-Driven Mesh Rendering](https://awesome-repositories.com/f/artificial-intelligence-ml/computer-vision-systems/computer-vision/facial-analysis-systems/face-tracking/landmark-driven-mesh-rendering.md) — Renders oriented face meshes based on facial keypoints with configurable dimensions. ([source](https://pmndrs.github.io/drei/shapes/facemesh))
- [Mesh Object Access](https://awesome-repositories.com/f/artificial-intelligence-ml/computer-vision-systems/computer-vision/facial-analysis-systems/face-tracking/mesh-object-access.md) — Provides programmatic access to face mesh, outer containers, and eye objects for orientation tracking. ([source](https://pmndrs.github.io/drei/shapes/facemesh))
- [Facial Landmark Detection](https://awesome-repositories.com/f/artificial-intelligence-ml/facial-landmark-detection.md) — Provides real-time identification of facial key points from video feeds to drive 3D interactions. ([source](https://pmndrs.github.io/drei/controls/face-controls))
- [Gaze Vector Calculations](https://awesome-repositories.com/f/artificial-intelligence-ml/iris-tracking/gaze-vector-calculations.md) — Calculates world-space gaze vectors from eye meshes to influence camera and scene behavior. ([source](https://pmndrs.github.io/drei/controls/face-controls))

### Mobile Development

- [Image Masking & Shaping](https://awesome-repositories.com/f/mobile-development/android-image-interaction/image-masking-shaping.md) — Provides utilities for clipping images into non-rectangular shapes, such as rounded-corner rectangles. ([source](https://pmndrs.github.io/drei/abstractions/image))