back to home
pmndrs / drei
🥉 useful helpers for react-three-fiber
9,481 stars
788 forks
63 issues
JavaScriptTypeScriptShell
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing pmndrs/drei in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
[](https://repomind-ai.vercel.app/repo/pmndrs/drei)
Preview:
Repository Summary (README)
Preview
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
<details> <summary>Old doc</summary><!-- <table> <tr> <td valign="top"> <ul> <li><a href="#cameras">Cameras</a></li> <ul> <li><a href="#perspectivecamera">PerspectiveCamera</a></li> <li><a href="#orthographiccamera">OrthographicCamera</a></li> <li><a href="#cubecamera">CubeCamera</a></li> </ul> <li><a href="#controls">Controls</a></li> <ul> <li><a href="#cameracontrols">CameraControls</a></li> <li><a href="#controls">FlyControls</a></li> <li><a href="#controls">MapControls</a></li> <li><a href="#controls">DeviceOrientationControls</a></li> <li><a href="#controls">TrackballControls</a></li> <li><a href="#controls">ArcballControls</a></li> <li><a href="#controls">PointerLockControls</a></li> <li><a href="#controls">FirstPersonControls</a></li> <li><a href="#scrollcontrols">ScrollControls</a></li> <li><a href="#presentationcontrols">PresentationControls</a></li> <li><a href="#keyboardcontrols">KeyboardControls</a></li> <li><a href="#FaceControls">FaceControls</a></li> <li><a href="#motionpathcontrols">MotionPathControls</a></li> </ul> <li><a href="#gizmos">Gizmos</a></li> <ul> <li><a href="#gizmohelper">GizmoHelper</a></li> <li><a href="#pivotcontrols">PivotControls</a></li> <li><a href="#dragcontrols">DragControls</a></li> <li><a href="#transformcontrols">TransformControls</a></li> <li><a href="#grid">Grid</a></li> <li><a href="#helper--usehelper">Helper / useHelper</a></li> <li><a href="#helper">Helper</a></li> </ul> <li><a href="#abstractions">Abstractions</a></li> <ul> <li><a href="#image">Image</a></li> <li><a href="#text">Text</a></li> <li><a href="#text3d">Text3D</a></li> <li><a href="#positionalaudio">PositionalAudio</a></li> <li><a href="#billboard">Billboard</a></li> <li><a href="#screenspace">ScreenSpace</a></li> <li><a href="#screensizer">ScreenSizer</a></li> <li><a href="#effects">Effects</a></li> <li><a href="#gradienttexture">GradientTexture</a></li> <li><a href="#edges">Edges</a></li> <li><a href="#outlines">Outlines</a></li> <li><a href="#trail">Trail</a></li> <li><a href="#sampler">Sampler</a></li> <li><a href="#computedattribute">ComputedAttribute</a></li> <li><a href="#clone">Clone</a></li> <li><a href="#useanimations">useAnimations</a></li> <li><a href="#marchingcubes">MarchingCubes</a></li> <li><a href="#decal">Decal</a></li> <li><a href="#svg">Svg</a></li> <li><a href="#gltf">Gltf</a></li> <li><a href="#asciirenderer">AsciiRenderer</a></li> <li><a href="#splat">Splat</a></li> </ul> <li><a href="#shaders">Shaders</a></li> <ul> <li><a href="#meshreflectormaterial">MeshReflectorMaterial</a></li> <li><a href="#meshwobblematerial">MeshWobbleMaterial</a></li> <li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li> <li><a href="#meshrefractionmaterial">MeshRefractionMaterial</a></li> <li><a href="#meshtransmissionmaterial">MeshTransmissionMaterial</a></li> <li><a href="#meshdiscardmaterial">MeshDiscardMaterial</a></li> <li><a href="#pointmaterial">PointMaterial</a></li> <li><a href="#softshadows">SoftShadows</a></li> <li><a href="#shadermaterial">shaderMaterial</a></li> </ul> </ul> </td> <td valign="top"> <ul> <li><a href="#misc">Misc</a></li> <ul> <li><a href="#example">Example</a></li> <li><a href="#html">Html</a></li> <li><a href="#cycleraycast">CycleRaycast</a></li> <li><a href="#select">Select</a></li> <li><a href="#sprite-animator">Sprite Animator</a></li> <li><a href="#stats">Stats</a></li> <li><a href="#stats-gl">StatsGl</a></li> <li><a href="#wireframe">Wireframe</a></li> <li><a href="#usedepthbuffer">useDepthBuffer</a></li> <li><a href="#usecontextbridge">useContextBridge</a></li> <li><a href="#fbo--usefbo">Fbo / useFBO</a></li> <li><a href="#usecamera">useCamera</a></li> <li><a href="#cubecamera--usecubecamera">CubeCamera / useCubeCamera</a></li> <li><a href="#detectgpu--usedetectgpu">DetectGPU / useDetectGPU</a></li> <li><a href="#useaspect">useAspect</a></li> <li><a href="#usecursor">useCursor</a></li> <li><a href="#useintersect">useIntersect</a></li> <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li> <li><a href="#trail--useTrail">Trail / useTrail</a></li> <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li> <li><a href="#facelandmarker">FaceLandmarker</a></li> </ul> <li><a href="#loading">Loaders</a></li> <ul> <li><a href="#loader">Loader</a></li> <li><a href="#progress--useprogress">Progress / useProgress</a></li> <li><a href="#gltf--usegltf">Gltf / useGLTF</a></li> <li><a href="#fbx--usefbx">FBX / useFBX</a></li> <li><a href="#texture--usetexture">Texture / useTexture</a></li> <li><a href="#ktx2--usektx2">Ktx2 / useKTX2</a></li> <li><a href="#cubetexture--usecubetexture">CubeTexture / useCubeTexture</a></li> <li><a href="#videotexture--usevideotexture">VideoTexture / useVideoTexture</a></li> <li><a href="#trailtexture--usetrailtexture">TrailTexture / useTrailTexture</a></li> <li><a href="#usefont">useFont</a></li> <li><a href="#usespriteloader">useSpriteLoader</a></li> </ul> <li><a href="#performance">Performance</a></li> <ul> <li><a href="#instances">Instances</a></li> <li><a href="#merged">Merged</a></li> <li><a href="#points">Points</a></li> <li><a href="#segments">Segments</a></li> <li><a href="#detailed">Detailed</a></li> <li><a href="#preload">Preload</a></li> <li><a href="#bakeshadows">BakeShadows</a></li> <li><a href="#meshbounds">meshBounds</a></li> <li><a href="#adaptivedpr">AdaptiveDpr</a></li> <li><a href="#adaptiveevents">AdaptiveEvents</a></li> <li><a href="#bvh">Bvh</a></li> <li><a href="#performancemonitor">PerformanceMonitor</a></li> </ul> <li><a href="#portals">Portals</a></li> <ul> <li><a href="#hud">Hud</a></li> <li><a href="#view">View</a></li> <li><a href="#rendertexture">RenderTexture</a></li> <li><a href="#rendercubetexture">RenderCubeTexture</a></li> <li><a href="#fisheye">Fisheye</a></li> <li><a href="#mask">Mask</a></li> <li><a href="#meshportalmaterial">MeshPortalMaterial</a></li> </ul> <li><a href="#modifiers">Modifiers</a></li> <ul> <li><a href="#curvemodifier">CurveModifier</a></li> </ul> </ul> </td> <td valign="top"> <ul> <li><a href="#shapes">Shapes</a></li> <ul> <li><a href="#shapes">Plane</a></li> <li><a href="#shapes">Box</a></li> <li><a href="#shapes">Sphere</a></li> <li><a href="#shapes">Circle</a></li> <li><a href="#shapes">Cone</a></li> <li><a href="#shapes">Cylinder</a></li> <li><a href="#shapes">Tube</a></li> <li><a href="#shapes">Torus</a></li> <li><a href="#shapes">TorusKnot</a></li> <li><a href="#shapes">Ring</a></li> <li><a href="#shapes">Tetrahedron</a></li> <li><a href="#shapes">Polyhedron</a></li> <li><a href="#shapes">Icosahedron</a></li> <li><a href="#shapes">Octahedron</a></li> <li><a href="#shapes">Dodecahedron</a></li> <li><a href="#shapes">Extrude</a></li> <li><a href="#shapes">Lathe</a></li> <li><a href="#shapes">Shape</a></li> <li><a href="#roundedbox">RoundedBox</a></li> <li><a href="#screenquad">Screenquad</a></li> <li><a href="#line">Line</a></li> <li><a href="#quadraticbezierline">QuadraticBezierLine</a></li> <li><a href="#cubicbezierline">CubicBezierLine</a></li> <li><a href="#catmullromline">CatmullRomLine</a></li> <li><a href="#facemesh">Facemesh</a></li> </ul> <li><a href="#staging">Staging</a></li> <ul> <li><a href="#center">Center</a></li> <li><a href="#resize">Resize</a></li> <li><a href="#BBAnchor">BBAnchor</a></li> <li><a href="#bounds">Bounds</a></li> <li><a href="#camerashake">CameraShake</a></li> <li><a href="#float">Float</a></li> <li><a href="#stage">Stage</a></li> <li><a href="#backdrop">Backdrop</a></li> <li><a href="#environment">Environment</a></li> <li><a href="#lightformer">Lightformer</a></li> <li><a href="#spotlight">SpotLight</a></li> <li><a href="#spotlightshadow">SpotLightShadow</a></li> <li><a href="#shadow">Shadow</a></li> <li><a href="#caustics">Caustics</a></li> <li><a href="#contactshadows">ContactShadows</a></li> <li><a href="#randomizedlight">RandomizedLight</a></li> <li><a href="#accumulativeshadows">AccumulativeShadows</a></li> <li><a href="#sky">Sky</a></li> <li><a href="#stars">Stars</a></li> <li><a href="#sparkles">Sparkles</a></li> <li><a href="#cloud">Cloud</a></li> <li><a href="#useenvironment">useEnvironment</a></li> <li><a href="#matcaptexture--usematcaptexture">MatcapTexture / useMatcapTexture</a></li> <li><a href="#normaltexture--usenormaltexture">NormalTexture / useNormalTexture</a></li> <li><a href="#shadowalpha">ShadowAlpha</a></li> </ul> </ul> </td> </tr> </table> -->[!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
</details>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"