@react-three/drei

A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.

If you make a component that is generic enough to be useful to others, think about CONTRIBUTING!

npm install @react-three/drei

[!IMPORTANT] this package is using the stand-alone three-stdlib instead of three/examples/jsm.

Basic usage

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

React-native

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'

The native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.

Documentation

https://pmndrs.github.io/drei

Old doc

[!WARNING] Below is an archive of the anchors links with their new respective locations to the documentation website. Do not update the links below, they are for reference only.

Cameras

PerspectiveCamera

Documentation has moved here

OrthographicCamera

Documentation has moved here

CubeCamera

Documentation has moved here

Controls

CameraControls

Documentation has moved here

ScrollControls

Documentation has moved here

PresentationControls

Documentation has moved here

KeyboardControls

Documentation has moved here

FaceControls

Documentation has moved here

MotionPathControls

Documentation has moved here

Gizmos

GizmoHelper

Documentation has moved here

PivotControls

Documentation has moved here

DragControls

Documentation has moved here

TransformControls

Documentation has moved here

Grid

Documentation has moved here

Helper / useHelper

Documentation has moved here

Shapes

Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape

Documentation has moved here

RoundedBox

Documentation has moved here

ScreenQuad

Documentation has moved here

Line

Documentation has moved here

QuadraticBezierLine

Documentation has moved here

CubicBezierLine

Documentation has moved here

CatmullRomLine

Documentation has moved here

Facemesh

Documentation has moved here

Abstractions

Image

Documentation has moved here

Text

Documentation has moved here

Text3D

Documentation has moved here

Effects

Documentation has moved here

PositionalAudio

Documentation has moved here

Billboard

Documentation has moved here

ScreenSpace

Documentation has moved here

ScreenSizer

Documentation has moved here

GradientTexture

Documentation has moved here

Edges

Documentation has moved here

Outlines

Documentation has moved here

Trail

Documentation has moved here

Sampler

Documentation has moved here

ComputedAttribute

Documentation has moved here

Clone

Documentation has moved here

useAnimations

Documentation has moved here

MarchingCubes

Documentation has moved here

Decal

Documentation has moved here

Svg

Documentation has moved here

AsciiRenderer

Documentation has moved here

Splat

Documentation has moved here

Shaders

MeshReflectorMaterial

Documentation has moved here

MeshWobbleMaterial

Documentation has moved here

MeshDistortMaterial

Documentation has moved here

MeshRefractionMaterial

Documentation has moved here

MeshTransmissionMaterial

Documentation has moved here

MeshDiscardMaterial

Documentation has moved here

PointMaterial

Documentation has moved here

SoftShadows

Documentation has moved here

shaderMaterial

Documentation has moved here

Modifiers

CurveModifier

Documentation has moved here

Misc

useContextBridge

Documentation has moved here

Example

Documentation has moved here

Html

Documentation has moved here

CycleRaycast

Documentation has moved here

Select

Documentation has moved here

Sprite Animator

Documentation has moved here

Stats

Documentation has moved here

StatsGl

Documentation has moved here

Wireframe

Documentation has moved here

useDepthBuffer

Documentation has moved here

Fbo / useFBO

Documentation has moved here

useCamera

Documentation has moved here

CubeCamera / useCubeCamera

Documentation has moved here

DetectGPU / useDetectGPU

Documentation has moved here

useAspect

Documentation has moved here

useCursor

Documentation has moved here

useIntersect

Documentation has moved here

useBoxProjectedEnv

Documentation has moved here

Trail / useTrail

Documentation has moved here

useSurfaceSampler

Documentation has moved here

FaceLandmarker

Documentation has moved here

Loading

Loader

Documentation has moved here

Progress / useProgress

Documentation has moved here

Gltf / useGLTF

Documentation has moved here

Fbx / useFBX

Documentation has moved here

Texture / useTexture

Documentation has moved here

Ktx2 / useKTX2

Documentation has moved here

CubeTexture / useCubeTexture

Documentation has moved here

VideoTexture / useVideoTexture

Documentation has moved here

TrailTexture / useTrailTexture

Documentation has moved here

useFont

Documentation has moved here

useSpriteLoader

Documentation has moved here

Performance

Instances

Documentation has moved here

Merged

Documentation has moved here

Points

Documentation has moved here

Segments

Documentation has moved here

Detailed

Documentation has moved here

Preload

Documentation has moved here

BakeShadows

Documentation has moved here

meshBounds

Documentation has moved here

AdaptiveDpr

Documentation has moved here

AdaptiveEvents

Documentation has moved here

Bvh

Documentation has moved here

PerformanceMonitor

Documentation has moved here

Portals

Hud

Documentation has moved here

View

Documentation has moved here

RenderTexture

Documentation has moved here

RenderCubeTexture

Documentation has moved here

Fisheye

Documentation has moved here

Mask

Documentation has moved here

MeshPortalMaterial

Documentation has moved here

Staging

Center

Documentation has moved here

Resize

Documentation has moved here

BBAnchor

Documentation has moved here

Bounds

Documentation has moved here

CameraShake

Documentation has moved here

Float

Documentation has moved here

Stage

Documentation has moved here

Backdrop

Documentation has moved here

Shadow

Documentation has moved here

Caustics

Documentation has moved here

ContactShadows

Documentation has moved here

RandomizedLight

Documentation has moved here

AccumulativeShadows

Documentation has moved here

SpotLight

Documentation has moved here

SpotLightShadow

Documentation has moved here

Environment

Documentation has moved here

Lightformer

Documentation has moved here

Sky

Documentation has moved here

Stars

Documentation has moved here

Sparkles

Documentation has moved here

Cloud

Documentation has moved here

useEnvironment

Documentation has moved here

MatcapTexture / useMatcapTexture

Documentation has moved here

NormalTexture / useNormalTexture

Documentation has moved here

ShadowAlpha

Documentation has moved here

Dev

INSTALL

$ corepack enable
$ yarn install

Test

Local

Pre-requisites:

• $ npx playwright install
  

To run visual tests locally:

$ yarn build
$ yarn test

To update a snapshot:

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test

Docker

[!IMPORTANT] Snapshots are system-dependent, so to run playwright in the same environment as the CI:

$ docker run --init --rm \
    -v $(pwd):/app -w /app \
    ghcr.io/pmndrs/playwright:drei \
      sh -c "corepack enable && yarn install && yarn build && yarn test"

To update a snapshot:

$ docker run --init --rm \
    -v $(pwd):/app -w /app \
    -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 \
    ghcr.io/pmndrs/playwright:drei \
      sh -c "corepack enable && yarn install && yarn build && yarn test"

Similar packages

Other packages similar to @react-three/drei

three

Three.js is the core library for creating 3D graphics in the browser. While it provides a comprehensive set of features for 3D rendering, it requires more boilerplate code compared to @react-three/drei, which offers higher-level abstractions and components.

react-three-fiber

React-three-fiber is a React renderer for three.js. It allows you to build and manage 3D scenes using React components. @react-three/drei is built on top of react-three-fiber and provides additional helpers and components to simplify common tasks.

aframe

A-Frame is a web framework for building virtual reality experiences. It is built on top of three.js and provides a declarative, HTML-like syntax for creating 3D scenes. While it is not React-based, it offers similar functionalities for building 3D environments.