Repository: pmndrs/drei
Stars: 9579
README.md
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/dreithis 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
<details>
<summary>Old doc</summary>
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.
<!-- <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> -->
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:
$ nvm install
$ nvm use
$ node -v # make sure your version satisfies package.json#engines.nodenb: if you want this node version to be your default nvm's one:
nvm 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 installTest
#### Local
Pre-requisites:
-
$ npx playwright installTo run visual tests locally:
$ yarn build
$ yarn testTo update a snapshot:
$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test#### Docker
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"