gem-hunter

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'

Documentation

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

Dev

INSTALL

$ yarn install

Test

Local

$ yarn build
$ yarn test

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

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