Package detail

@react-three/drei

pmndrs1.6mMIT10.0.7

useful add-ons for react-three-fiber

react, three, threejs, react-three-fiber

readme

Storybook Version Downloads Discord Shield Open in GitHub Codespaces

logo

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 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

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