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 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
<summary>Old doc</summary>
> [!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"