Awesome
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
$ 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"