useful add-ons for react-three-fiber
npm install glodrei
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!
``bash`
npm install @react-three/drei
> [!IMPORTANT]
> this package is using the stand-alone three-stdlib instead of three/examples/jsm.
`jsx`
import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
`jsx`
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.
https://pmndrs.github.io/drei
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.
#### PerspectiveCamera
#### OrthographicCamera
#### CubeCamera
#### CameraControls
#### ScrollControls
#### PresentationControls
#### KeyboardControls
#### FaceControls
#### MotionPathControls
#### GizmoHelper
#### PivotControls
#### DragControls
#### TransformControls
#### Grid
#### Helper / useHelper
#### 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
#### Image
#### Text
#### Text3D
#### Effects
#### PositionalAudio
#### Billboard
#### ScreenSpace
#### ScreenSizer
#### GradientTexture
#### Edges
#### Outlines
#### Trail
#### Sampler
#### ComputedAttribute
#### Clone
#### useAnimations
#### MarchingCubes
#### Decal
#### Svg
#### AsciiRenderer
#### Splat
#### MeshReflectorMaterial
#### MeshWobbleMaterial
#### MeshDistortMaterial
#### MeshRefractionMaterial
#### MeshTransmissionMaterial
#### MeshDiscardMaterial
#### PointMaterial
#### SoftShadows
#### shaderMaterial
#### CurveModifier
#### 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
#### Loader
#### Progress / useProgress
#### Gltf / useGLTF
#### Fbx / useFBX
#### Texture / useTexture
#### Ktx2 / useKTX2
#### CubeTexture / useCubeTexture
#### VideoTexture / useVideoTexture
#### TrailTexture / useTrailTexture
#### useFont
#### useSpriteLoader
#### Instances
#### Merged
#### Points
#### Segments
#### Detailed
#### Preload
#### BakeShadows
#### meshBounds
#### AdaptiveDpr
#### AdaptiveEvents
#### Bvh
#### PerformanceMonitor
#### Hud
#### View
#### RenderTexture
#### RenderCubeTexture
#### Fisheye
#### Mask
#### MeshPortalMaterial
#### 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
`sh`
$ corepack enable
$ yarn install
#### Local
Pre-requisites:
- `sh`
$ npx playwright install
To run visual tests locally:
`sh`
$ yarn build
$ yarn test
To update a snapshot:
`sh`
$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
#### Docker
> [!IMPORTANT]
> Snapshots are system-dependent, so to run playwright in the same environment as the CI:
`sh`
$ 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:
`sh``
$ 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"