@react-three/drei
useful add-ons for react-three-fiber
About
useful add-ons for react-three-fiber
Live mirror of the GitHub README. Updated whenever the repo's default branch changes.
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-stdlibinstead ofthree/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
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
OrthographicCamera
CubeCamera
Controls
CameraControls
ScrollControls
PresentationControls
KeyboardControls
FaceControls
MotionPathControls
Gizmos
GizmoHelper
PivotControls
DragControls
TransformControls
Grid
Helper / useHelper
Shapes
Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape
RoundedBox
ScreenQuad
Line
QuadraticBezierLine
CubicBezierLine
CatmullRomLine
Facemesh
Abstractions
Image
Text
Text3D
Effects
PositionalAudio
Billboard
ScreenSpace
ScreenSizer
GradientTexture
Edges
Outlines
Trail
Sampler
ComputedAttribute
Clone
useAnimations
MarchingCubes
Decal
Svg
AsciiRenderer
Splat
Shaders
MeshReflectorMaterial
MeshWobbleMaterial
MeshDistortMaterial
MeshRefractionMaterial
MeshTransmissionMaterial
MeshDiscardMaterial
PointMaterial
SoftShadows
shaderMaterial
Modifiers
CurveModifier
Misc
useContextBridge
Example
Html
CycleRaycast
Select
Sprite Animator
Stats
StatsGl
Wireframe
useDepthBuffer
Fbo / useFBO
useCamera
CubeCamera / useCubeCamera
DetectGPU / useDetectGPU
useAspect
useCursor
useIntersect
useBoxProjectedEnv
Trail / useTrail
useSurfaceSampler
FaceLandmarker
Loading
Loader
Progress / useProgress
Gltf / useGLTF
Fbx / useFBX
Texture / useTexture
Ktx2 / useKTX2
CubeTexture / useCubeTexture
VideoTexture / useVideoTexture
TrailTexture / useTrailTexture
useFont
useSpriteLoader
Performance
Instances
Merged
Points
Segments
Detailed
Preload
BakeShadows
meshBounds
AdaptiveDpr
AdaptiveEvents
Bvh
PerformanceMonitor
Portals
Hud
View
RenderTexture
RenderCubeTexture
Fisheye
Mask
MeshPortalMaterial
Staging
Center
Resize
BBAnchor
Bounds
CameraShake
Float
Stage
Backdrop
Shadow
Caustics
ContactShadows
RandomizedLight
AccumulativeShadows
SpotLight
SpotLightShadow
Environment
Lightformer
Sky
Stars
Sparkles
Cloud
useEnvironment
MatcapTexture / useMatcapTexture
NormalTexture / useNormalTexture
ShadowAlpha
Dev
INSTALL
Pre-requisites:
- Install nvm, then:
nb: if you want this node version to be your default nvm's one:$ nvm install $ nvm use $ node -v # make sure your version satisfies package.json#engines.nodenvm alias default node - Install yarn, with:
$ corepack enable $ corepack prepare --activate # it reads "packageManager" $ yarn -v # make sure your version satisfies package.json#engines.yarn
$ 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"
Quick facts
npm install @react-three/dreiCommon pairings
Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.
How Sourcemap Explorer detects @react-three/drei
We catch @react-three/drei from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@react-three/drei/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@react-three/drei/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@react-three/drei/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@react-three/drei/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Recent versions
FAQ
What is @react-three/drei used for?
useful add-ons for react-three-fiber
How can I tell if a website is using @react-three/drei?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `@react-three/drei` from two complementary signals: `node_modules/@react-three/drei/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
What is the latest version of @react-three/drei?
10.7.7, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Where can I read more?
Project homepage: https://github.com/pmndrs/drei. Source code: https://github.com/pmndrs/drei. Published on npm: https://www.npmjs.com/package/@react-three/drei. Licensed as MIT.
Keep reading on Sourcemap Explorer
Detection deep dives
Alternative tools
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for @react-three/drei and report the precise version. Without sourcemaps, an import / require in the page's scripts is enough to flag it.