Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/pmndrs/drei

🥉 useful helpers for react-three-fiber
https://github.com/pmndrs/drei
helpers hooks react react-three-fiber threejs
Last synced: 3 days ago
JSON representation
🥉 useful helpers for react-three-fiber
Host: GitHub
URL: https://github.com/pmndrs/drei
Owner: pmndrs
License: mit
Created: 2020-04-26T19:38:41.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-11-07T22:38:19.000Z (about 1 month ago)
Last Synced: 2024-11-09T04:03:50.262Z (about 1 month ago)
Topics: helpers, hooks, react, react-three-fiber, threejs
Language: JavaScript
Homepage: https://docs.pmnd.rs/drei
Size: 31.4 MB
Stars: 8,376
Watchers: 51
Forks: 699
Open Issues: 113
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

awesome-game-engine-dev - drei - Useful helpers for react-three-fiber. (Libraries / JavaScript)
awesome-list - drei - three-fiber | pmndrs | 1718 | (JavaScript)
awesome-threejs - drei - three-fiber by [@pmndrs](https://github.com/pmndrs) (Related Frameworks / React)
awesome-web -
awesome-webxr-development - Drei - [GLTF](https://github.com/pmndrs/drei#gltf) ![][r3f-badge] - A convenience component that will load a gltf file and clone the scene using drei/Clone. That means you can re-use and mount the same gltf file multiple times (Assets / GLTF & KTX2)
awesome-design-dev - Drei - three-fiber (3D)
awesome-design-dev - Drei - three-fiber (3D)
README

        [![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://drei.pmnd.rs/)

[![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)

[![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)

[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.com/channels/740090768164651008/741751532592038022)

[![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei)

[![logo](docs/logo.jpg)](https://codesandbox.io/s/bfplr)

A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).

If you make a component that is generic enough to be useful to others, think about [CONTRIBUTING](CONTRIBUTING.md)!

```bash

npm install @react-three/drei

```

> [!IMPORTANT]

> this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm).

## Basic usage

```jsx

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

```

## React-native

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

## Documentation

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.

### Cameras

#### PerspectiveCamera

[Documentation has moved here](https://pmndrs.github.io/drei/cameras/perspective-camera)

#### OrthographicCamera

[Documentation has moved here](https://pmndrs.github.io/drei/cameras/orthographic-camera)

#### CubeCamera

[Documentation has moved here](https://pmndrs.github.io/drei/cameras/cube-camera)

### Controls

#### CameraControls

[Documentation has moved here](https://pmndrs.github.io/drei/controls/camera-controls)

#### ScrollControls

[Documentation has moved here](https://pmndrs.github.io/drei/controls/scroll-controls)

#### PresentationControls

[Documentation has moved here](https://pmndrs.github.io/drei/controls/presentation-controls)

#### KeyboardControls

[Documentation has moved here](https://pmndrs.github.io/drei/controls/keyboard-controls)

#### FaceControls

[Documentation has moved here](https://pmndrs.github.io/drei/controls/face-controls)

#### MotionPathControls

[Documentation has moved here](https://pmndrs.github.io/drei/controls/motion-path-controls)

### Gizmos

#### GizmoHelper

[Documentation has moved here](https://pmndrs.github.io/drei/gizmos/gizmo-helper)

#### PivotControls

[Documentation has moved here](https://pmndrs.github.io/drei/gizmos/pivot-controls)

#### DragControls

[Documentation has moved here](https://pmndrs.github.io/drei/gizmos/drag-controls)

#### TransformControls

[Documentation has moved here](https://pmndrs.github.io/drei/gizmos/transform-controls)

#### Grid

[Documentation has moved here](https://pmndrs.github.io/drei/gizmos/grid)

#### Helper / useHelper

[Documentation has moved here](https://pmndrs.github.io/drei/gizmos/helper-use-helper)

### Shapes

#### Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/mesh)

#### RoundedBox

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/rounded-box)

#### ScreenQuad

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/screen-quad)

#### Line

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/line)

#### QuadraticBezierLine

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/quadratic-bezier-line)

#### CubicBezierLine

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/cubic-bezier-line)

#### CatmullRomLine

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/catmull-rom-line)

#### Facemesh

[Documentation has moved here](https://pmndrs.github.io/drei/shapes/facemesh)

### Abstractions

#### Image

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/image)

#### Text

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text)

#### Text3D

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text3d)

#### Effects

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/effects)

#### PositionalAudio

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/positional-audio)

#### Billboard

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/billboard)

#### ScreenSpace

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-space)

#### ScreenSizer

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-sizer)

#### GradientTexture

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/gradient-texture)

#### Edges

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/edges)

#### Outlines

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/outlines)

#### Trail

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/trail)

#### Sampler

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/sampler)

#### ComputedAttribute

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/computed-attribute)

#### Clone

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/clone)

#### useAnimations

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/use-animations)

#### MarchingCubes

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/marching-cubes)

#### Decal

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/decal)

#### Svg

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/svg)

#### AsciiRenderer

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/ascii-renderer)

#### Splat

[Documentation has moved here](https://pmndrs.github.io/drei/abstractions/splat)

### Shaders

#### MeshReflectorMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-reflector-material)

#### MeshWobbleMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-wobble-material)

#### MeshDistortMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-distort-material)

#### MeshRefractionMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-refraction-material)

#### MeshTransmissionMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-transmission-material)

#### MeshDiscardMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-discard-material)

#### PointMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/point-material)

#### SoftShadows

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/soft-shadows)

#### shaderMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/shaders/shader-material)

### Modifiers

#### CurveModifier

[Documentation has moved here](https://pmndrs.github.io/drei/modifiers/curve-modifier)

### Misc

#### useContextBridge

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-context-bridge)

#### Example

[Documentation has moved here](https://pmndrs.github.io/drei/misc/example)

#### Html

[Documentation has moved here](https://pmndrs.github.io/drei/misc/html)

#### CycleRaycast

[Documentation has moved here](https://pmndrs.github.io/drei/misc/cycle-raycast)

#### Select

[Documentation has moved here](https://pmndrs.github.io/drei/misc/select)

#### Sprite Animator

[Documentation has moved here](https://pmndrs.github.io/drei/misc/sprite-animator)

#### Stats

[Documentation has moved here](https://pmndrs.github.io/drei/misc/stats)

#### StatsGl

[Documentation has moved here](https://pmndrs.github.io/drei/misc/stats-gl)

#### Wireframe

[Documentation has moved here](https://pmndrs.github.io/drei/misc/wireframe)

#### useDepthBuffer

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-depth-buffer)

#### Fbo / useFBO

[Documentation has moved here](https://pmndrs.github.io/drei/misc/fbo-use-fbo)

#### useCamera

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-camera)

#### CubeCamera / useCubeCamera

[Documentation has moved here](https://pmndrs.github.io/drei/misc/cube-camera-use-cube-camera)

#### DetectGPU / useDetectGPU

[Documentation has moved here](https://pmndrs.github.io/drei/misc/detect-gpu-use-detect-gpu)

#### useAspect

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-aspect)

#### useCursor

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-cursor)

#### useIntersect

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-intersect)

#### useBoxProjectedEnv

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-box-projected-env)

#### Trail / useTrail

[Documentation has moved here](https://pmndrs.github.io/drei/misc/trail-use-trail)

#### useSurfaceSampler

[Documentation has moved here](https://pmndrs.github.io/drei/misc/use-surface-sampler)

#### FaceLandmarker

[Documentation has moved here](https://pmndrs.github.io/drei/misc/face-landmarker)

### Loading

#### Loader

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/loader)

#### Progress / useProgress

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/progress-use-progress)

#### Gltf / useGLTF

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/gltf-use-gltf)

#### Fbx / useFBX

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/fbx-use-fbx)

#### Texture / useTexture

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/texture-use-texture)

#### Ktx2 / useKTX2

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/ktx2-use-ktx2)

#### CubeTexture / useCubeTexture

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/cube-texture-use-cube-texture)

#### VideoTexture / useVideoTexture

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/video-texture-use-video-texture)

#### TrailTexture / useTrailTexture

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/trail-texture-use-trail-texture)

#### useFont

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-font)

#### useSpriteLoader

[Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-sprite-loader)

### Performance

#### Instances

[Documentation has moved here](https://pmndrs.github.io/drei/performances/instances)

#### Merged

[Documentation has moved here](https://pmndrs.github.io/drei/performances/merged)

#### Points

[Documentation has moved here](https://pmndrs.github.io/drei/performances/points)

#### Segments

[Documentation has moved here](https://pmndrs.github.io/drei/performances/segments)

#### Detailed

[Documentation has moved here](https://pmndrs.github.io/drei/performances/detailed)

#### Preload

[Documentation has moved here](https://pmndrs.github.io/drei/performances/preload)

#### BakeShadows

[Documentation has moved here](https://pmndrs.github.io/drei/performances/bake-shadows)

#### meshBounds

[Documentation has moved here](https://pmndrs.github.io/drei/performances/mesh-bounds)

#### AdaptiveDpr

[Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-dpr)

#### AdaptiveEvents

[Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-events)

#### Bvh

[Documentation has moved here](https://pmndrs.github.io/drei/performances/bvh)

#### PerformanceMonitor

[Documentation has moved here](https://pmndrs.github.io/drei/performances/performance-monitor)

### Portals

#### Hud

[Documentation has moved here](https://pmndrs.github.io/drei/portals/hud)

#### View

[Documentation has moved here](https://pmndrs.github.io/drei/portals/view)

#### RenderTexture

[Documentation has moved here](https://pmndrs.github.io/drei/portals/render-texture)

#### RenderCubeTexture

[Documentation has moved here](https://pmndrs.github.io/drei/portals/render-cube-texture)

#### Fisheye

[Documentation has moved here](https://pmndrs.github.io/drei/portals/fisheye)

#### Mask

[Documentation has moved here](https://pmndrs.github.io/drei/portals/mask)

#### MeshPortalMaterial

[Documentation has moved here](https://pmndrs.github.io/drei/portals/mesh-portal-material)

### Staging

#### Center

[Documentation has moved here](https://pmndrs.github.io/drei/staging/center)

#### Resize

[Documentation has moved here](https://pmndrs.github.io/drei/staging/resize)

#### BBAnchor

[Documentation has moved here](https://pmndrs.github.io/drei/staging/bb-anchor)

#### Bounds

[Documentation has moved here](https://pmndrs.github.io/drei/staging/bounds)

#### CameraShake

[Documentation has moved here](https://pmndrs.github.io/drei/staging/camera-shake)

#### Float

[Documentation has moved here](https://pmndrs.github.io/drei/staging/float)

#### Stage

[Documentation has moved here](https://pmndrs.github.io/drei/staging/stage)

#### Backdrop

[Documentation has moved here](https://pmndrs.github.io/drei/staging/backdrop)

#### Shadow

[Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow)

#### Caustics

[Documentation has moved here](https://pmndrs.github.io/drei/staging/caustics)

#### ContactShadows

[Documentation has moved here](https://pmndrs.github.io/drei/staging/contact-shadows)

#### RandomizedLight

[Documentation has moved here](https://pmndrs.github.io/drei/staging/randomized-light)

#### AccumulativeShadows

[Documentation has moved here](https://pmndrs.github.io/drei/staging/accumulative-shadows)

#### SpotLight

[Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light)

#### SpotLightShadow

[Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light-shadow)

#### Environment

[Documentation has moved here](https://pmndrs.github.io/drei/staging/environment)

#### Lightformer

[Documentation has moved here](https://pmndrs.github.io/drei/staging/lightformer)

#### Sky

[Documentation has moved here](https://pmndrs.github.io/drei/staging/sky)

#### Stars

[Documentation has moved here](https://pmndrs.github.io/drei/staging/stars)

#### Sparkles

[Documentation has moved here](https://pmndrs.github.io/drei/staging/sparkles)

#### Cloud

[Documentation has moved here](https://pmndrs.github.io/drei/staging/cloud)

#### useEnvironment

[Documentation has moved here](https://pmndrs.github.io/drei/staging/use-environment)

#### MatcapTexture / useMatcapTexture

[Documentation has moved here](https://pmndrs.github.io/drei/staging/matcap-texture-use-matcap-texture)

#### NormalTexture / useNormalTexture

[Documentation has moved here](https://pmndrs.github.io/drei/staging/normal-texture-use-normal-texture)

#### ShadowAlpha

[Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)

## Dev

### INSTALL

```sh

$ corepack enable

$ yarn install

```

### Test

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

```