# Technical Documentation: pmndrs/drei > ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/pmndrs/drei) ### Overview (`README.md`) [](https://drei.pmnd.rs/) [](https://www.chromatic.com/library?appId=64a019f36ecd3751d0ada612&branch=master) [](https://www.npmjs.com/package/@react-three/drei) [](https://www.npmjs.com/package/@react-three/drei) [](https://discord.com/channels/740090768164651008/741751532592038022) [](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei) [](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 Pre-requisites: - Install [nvm](https://github.com/nvm-sh/nvm), then: ```sh $ nvm install $ nvm use $ node -v # make sure your version satisfies package.json#engines.node ``` nb: if you want this node version to be your default nvm's one: `nvm alias default node` - Install yarn, with: ```sh $ corepack enable $ corepack prepare --activate # it reads "packageManager" $ yarn -v # make sure your version satisfies package.json#engines.yarn ``` ```sh $ 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" ``` --- ### Abstractions Ascii Renderer (`docs/abstractions/ascii-renderer.mdx`) --- title: AsciiRenderer sourcecode: src/core/AsciiRenderer.tsx ---
    • Abstraction of three's [AsciiEffect](https://threejs.org/examples/?q=as#webgl_effects_ascii). It creates a DOM layer on top of the canvas and renders the scene as ascii characters. ```tsx type AsciiRendererProps = { /** Render index, default: 1 */ renderIndex?: number /** CSS background color (can be "transparent"), default: black */ bgColor?: string /** CSS character color, default: white */ fgColor?: string /** Characters, default: ' .:-+*=%@#' */ characters?: string /** Invert character, default: true */ invert?: boolean /** Colorize output (very expensive!), default: false */ color?: boolean /** Level of detail, default: 0.15 */ resolution?: number } ``` ```jsx ``` --- ### Abstractions Billboard (`docs/abstractions/billboard.mdx`) --- title: Billboard sourcecode: src/core/Billboard.tsx --- storybook Adds a `` that always faces the camera. ```jsx I'm a billboard ``` --- ### Abstractions Clone (`docs/abstractions/clone.mdx`) --- title: Clone sourcecode: src/core/Clone.tsx ---
    • Declarative abstraction around THREE.Object3D.clone. This is useful when you want to create a shallow copy of an existing fragment (and Object3D, Groups, etc) into your scene, for instance a group from a loaded GLTF. This clone is now re-usable, but it will still refer to the original geometries and materials. ```ts React.ReactNode) /** Short access castShadow, applied to every mesh within */ castShadow?: boolean /** Short access receiveShadow, applied to every mesh within */ receiveShadow?: boolean /> ``` You create a shallow clone by passing a pre-existing object to the `object` prop. ```jsx const { nodes } = useGLTF(url) return ( ``` Or, multiple objects: ```jsx ``` You can dynamically insert objects, these will apply to anything that isn't a group or a plain object3d (meshes, lines, etc): ```jsx } /> ``` Or make inserts conditional: ```jsx (object.name === 'table' ? : null)} } /> ``` --- ### Abstractions Computed Attribute (`docs/abstractions/computed-attribute.mdx`) --- title: ComputedAttribute sourcecode: src/core/ComputedAttribute.tsx --- storybook Create and attach an attribute declaratively. ```tsx { // ...someLogic; return new THREE.BufferAttribute([1, 2, 3], 1) }} // you can pass any BufferAttribute prop to this component, eg. usage={THREE.StaticReadUsage} /> ``` --- ### Abstractions Decal (`docs/abstractions/decal.mdx`) --- title: Decal sourcecode: src/core/Decal.tsx --- storybook
    • Abstraction around Three's `DecalGeometry`. It will use the its parent `mesh` as the decal surface by default. The decal box has to intersect the surface, otherwise it will not be visible. if you do not specifiy a rotation it will look at the parents center point. You can also pass a single number as the rotation which allows you to spin it. ```js ``` If you do not specify a material it will create a transparent meshBasicMaterial with a polygonOffsetFactor of -10. ```jsx ``` If declarative composition is not possible, use the `mesh` prop to define the surface the decal must attach to. ```js ``` --- ### Abstractions Edges (`docs/abstractions/edges.mdx`) --- title: Edges sourcecode: src/core/Edges.tsx ---
    • Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/EdgesGeometry). It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a `geometry` prop. You can give it children, for instance a custom material. Edges is based on `` and supports all of its props. ```jsx ``` --- ### Abstractions Effects (`docs/abstractions/effects.mdx`) --- title: Effects sourcecode: src/core/Effects.tsx --- Abstraction around threes own [EffectComposer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). By default it will prepend a render-pass and a gammacorrection-pass. Children are cloned, `attach` is given to them automatically. You can only use passes or effects in there. By default it creates a render target with HalfFloatType, RGBAFormat. You can change all of this to your liking, inspect the types. ```jsx import { SSAOPass } from "three-stdlib" extend({ SSAOPass }) ``` --- ### Abstractions Gradient Texture (`docs/abstractions/gradient-texture.mdx`) --- title: GradientTexture sourcecode: src/core/GradientTexture.tsx ---
    • A declarative THREE.Texture which attaches to "map" by default. You can use this to create gradient backgrounds. ```jsx ``` Radial gradient. ```jsx import { GradientTexture, GradientType } from './GradientTexture' ; ``` --- ### Abstractions Image (`docs/abstractions/image.mdx`) --- title: Image sourcecode: src/core/Image.tsx ---
    • A shader-based image component with auto-cover (similar to css/background: cover). ```tsx export type ImageProps = Omit & { segments?: number scale?: number | [number, number] color?: Color zoom?: number radius?: number grayscale?: number toneMapped?: boolean transparent?: boolean opacity?: number side?: THREE.Side } ``` ```jsx function Foo() { const ref = useRef() useFrame(() => { ref.current.material.radius = ... // between 0 and 1 ref.current.material.zoom = ... // 1 and higher ref.current.material.grayscale = ... // between 0 and 1 ref.current.material.color.set(...) // mix-in color }) return } ``` To make the material transparent: ```jsx ``` You can have custom planes, for instance a rounded-corner plane. ```jsx import { extend } from '@react-three/fiber' import { Image } from '@react-three/drei' import { easing, geometry } from 'maath' extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry }) ``` --- ### Abstractions Marching Cubes (`docs/abstractions/marching-cubes.mdx`) --- title: MarchingCubes sourcecode: src/core/MarchingCubes.tsx --- storybook An abstraction for threes [MarchingCubes](https://threejs.org/examples/#webgl_marchingcubes) ```jsx ``` --- ### Abstractions Outlines (`docs/abstractions/outlines.mdx`) --- title: Outlines sourcecode: src/core/Outlines.tsx ---
    • An ornamental component that extracts the geometry from its parent and displays an [inverted-hull outline](https://bnpr.gitbook.io/bnpr/outline/inverse-hull-method). Supported parents are ``, `` and ``. ```tsx type OutlinesProps = ThreeElements['group'] & { /** Outline color, default: black */ color: ReactThreeFiber.Color /** Line thickness is independent of zoom, default: false */ screenspace: boolean /** Outline opacity, default: 1 */ opacity: number /** Outline transparency, default: false */ transparent: boolean /** Outline thickness, default 0.05 */ thickness: number /** Geometry crease angle (0 === no crease), default: Math.PI */ angle: number /** Clipping planes, default: null (no clipping) works the same as clipping planes on any material */ clippingPlanes: THREE.Plane[] | null } ``` ```jsx ``` --- ### Abstractions Positional Audio (`docs/abstractions/positional-audio.mdx`) --- title: PositionalAudio sourcecode: src/core/PositionalAudio.tsx ---
    • storybook suspense A wrapper around [THREE.PositionalAudio](https://threejs.org/docs/#api/en/audio/PositionalAudio). Add this to groups or meshes to tie them to a sound that plays when the camera comes near. ```jsx ``` --- ### Abstractions Sampler (`docs/abstractions/sampler.mdx`) --- title: Sampler sourcecode: src/core/Sampler.tsx --- storybook
    • Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points. Check the demos & code for more. You can either pass a Mesh and InstancedMesh as children: ```tsx // This simple example scatters 1000 spheres on the surface of the sphere mesh. ``` or use refs when you can't compose declaratively: ```tsx const { nodes } = useGLTF('my/mesh/url') const mesh = useRef(nodes) const instances = useRef() return <> ``` --- ### Abstractions Screen Sizer (`docs/abstractions/screen-sizer.mdx`) --- title: ScreenSizer sourcecode: src/core/ScreenSizer.tsx --- storybook Adds a `` that scales objects to screen space. ```jsx ``` --- ### Abstractions Screen Space (`docs/abstractions/screen-space.mdx`) --- title: ScreenSpace sourcecode: src/core/ScreenSpace.tsx --- storybook Adds a `` that aligns objects to screen space. ```jsx I'm in screen space ``` --- ### Abstractions Splat (`docs/abstractions/splat.mdx`) --- title: Splat sourcecode: src/core/Splat.tsx --- suspense
    • A declarative abstraction around [antimatter15/splat](https://github.com/antimatter15/splat). It supports re-use, multiple splats with correct depth sorting, splats can move and behave as a regular object3d's, supports alphahash & alphatest, and stream-loading. ```tsx type SplatProps = { /** Url towards a *.splat file, no support for *.ply */ src: string /** Whether to use tone mapping, default: false */ toneMapped?: boolean /** Alpha test value, , default: 0 */ alphaTest?: number /** Whether to use alpha hashing, default: false */ alphaHash?: boolean /** Chunk size for lazy loading, prevents chokings the worker, default: 25000 (25kb) */ chunkSize?: number } & ThreeElements['mesh'] ``` ```jsx ``` In order to depth sort multiple splats correectly you can either use alphaTest, for instance with a low value. But keep in mind that this can show a slight outline under some viewing conditions. ```jsx ``` You can also use alphaHash, but this can be slower and create some noise, you would typically get rid of the noise in postprocessing with a TAA pass. You don't have to use alphaHash on all splats. ```jsx ``` --- ### Abstractions Svg (`docs/abstractions/svg.mdx`) --- title: Svg sourcecode: src/core/Svg.tsx --- storybook suspense Wrapper around the `three` [svg loader](https://threejs.org/examples/?q=sv#webgl_loader_svg) demo. Accepts an SVG url or svg raw data. ```js ``` --- ### Abstractions Text (`docs/abstractions/text.mdx`) --- title: Text sourcecode: src/core/Text.tsx --- storybook suspense
    • Hi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using [troika-3d-text](https://github.com/protectwise/troika/tree/master/packages/troika-3d-text). All of troikas props are valid! Text is suspense-based! ```jsx hello world! ``` Text will suspend while loading the font data, but in order to completely avoid FOUC you can pass the characters it needs to render. ```jsx hello world! ``` --- ### Abstractions Text3d (`docs/abstractions/text3d.mdx`) --- title: Text3D sourcecode: src/core/Text3D.tsx --- storybook suspense
    • Render 3D text using ThreeJS's `TextGeometry`. Text3D will suspend while loading the font data. Text3D requires fonts in JSON format generated through [typeface.json](http://gero3.github.io/facetype.js), either as a path to a JSON file or a JSON object. If you face display issues try checking "Reverse font direction" in the typeface tool. ```jsx Hello world! ``` You can use any material. `textOptions` are options you'd pass to the `TextGeometry` constructor. Find more information about available options [here](https://threejs.org/docs/index.html?q=textg#examples/en/geometries/TextGeometry). You can align the text using the `
    ` component. ```jsx
    hello
    ``` It adds three properties that do not exist in the original `TextGeometry`, `lineHeight`, `letterSpacing` and smooth. LetterSpacing is a factor that is `1` by default. LineHeight is in threejs units and `0` by default. Smooth merges vertices with a tolerance and calls computeVertexNormals. ```jsx {`hello\nworld`} ``` --- ### Abstractions Trail (`docs/abstractions/trail.mdx`) --- title: Trail sourcecode: src/core/Trail.tsx --- storybook A declarative, `three.MeshLine` based Trails implementation. You can attach it to any mesh and it will give it a beautiful trail. Props defined below with their default values. ```jsx width} // A function to define the width in each point along it. > {/* If `target` is not defined, Trail will use the first `Object3D` child as the target. */} {/* You can optionally define a custom meshLineMaterial to use. */} {/* */} ``` 👉 Inspired by [TheSpite's Codevember 2021 #9](https://spite.github.io/codevember-2021/9/) --- ### Abstractions Use Animations (`docs/abstractions/use-animations.mdx`) --- title: useAnimations sourcecode: src/core/useAnimations.tsx --- storybook
    • A hook that abstracts [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer). ```jsx const { nodes, materials, animations } = useGLTF(url) const { ref, mixer, names, actions, clips } = useAnimations(animations) useEffect(() => { actions?.jump.play() }) return ( ``` The hook can also take a pre-existing root (which can be a plain object3d or a reference to one): ```jsx const { scene, animations } = useGLTF(url) const { actions } = useAnimations(animations, scene) return ``` --- ### Cameras Cube Camera (`docs/cameras/cube-camera.mdx`) --- title: CubeCamera sourcecode: src/core/CubeCamera.tsx --- storybook A [THREE.CubeCamera](https://threejs.org/docs/#api/en/cameras/CubeCamera) that returns its texture as a render-prop. It makes children invisible while rendering to the internal buffer so that they are not included in the reflection. ```tsx type Props = ThreeElements['group'] & { /** Number of frames to render, Infinity */ frames?: number /** Resolution of the FBO, 256 */ resolution?: number /** Camera near, 0.1 */ near?: number /** Camera far, 1000 */ far?: number /** Custom environment map that is temporarily set as the scenes background */ envMap?: THREE.Texture /** Custom fog that is temporarily set as the scenes fog */ fog?: Fog | FogExp2 /** The contents of CubeCamera will be hidden when filming the cube */ children: (tex: Texture) => React.ReactNode } ``` Using the `frames` prop you can control if this camera renders indefinitely or statically (a given number of times). If you have two static objects in the scene, make it `frames={2}` for instance, so that both objects get to "see" one another in the reflections, which takes multiple renders. If you have moving objects, unset the prop and use a smaller `resolution` instead. ```jsx {(texture) => ( )} ``` --- ### Cameras Orthographic Camera (`docs/cameras/orthographic-camera.mdx`) --- title: OrthographicCamera sourcecode: src/core/OrthographicCamera.tsx --- storybook A responsive [THREE.OrthographicCamera](https://threejs.org/docs/#api/en/cameras/OrthographicCamera) that can set itself as the default. ```jsx ``` You can use the OrthographicCamera to film contents into a RenderTarget, it has the same API as PerspectiveCamera. ```jsx {(texture) => ( )} ``` --- ### Cameras Perspective Camera (`docs/cameras/perspective-camera.mdx`) --- title: PerspectiveCamera sourcecode: src/core/PerspectiveCamera.tsx --- storybook ```tsx type Props = Omit & { /** Registers the camera as the system default, fiber will start rendering with it */ makeDefault?: boolean /** Making it manual will stop responsiveness and you have to calculate aspect ratio yourself. */ manual?: boolean /** The contents will either follow the camera, or be hidden when filming if you pass a function */ children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode) /** Number of frames to render, 0 */ frames?: number /** Resolution of the FBO, 256 */ resolution?: number /** Optional environment map for functional use */ envMap?: THREE.Texture } ``` A responsive [THREE.PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) that can set itself as the default. ```jsx ``` You can also give it children, which will now occupy the same position as the camera and follow along as it moves. ```jsx ``` You can also drive it manually, it won't be responsive and you have to calculate aspect ratio yourself. ```jsx c.updateProjectionMatrix()}> ``` You can use the PerspectiveCamera to film contents into a RenderTarget, similar to CubeCamera. As a child you must provide a render-function which receives the texture as its first argument. The result of that function will _not follow the camera_, instead it will be set invisible while the FBO renders so as to avoid issues where the meshes that receive the texture are interrering. ```jsx {(texture) => ( )} ``` --- ### Controls Camera Controls (`docs/controls/camera-controls.mdx`) --- title: CameraControls sourcecode: src/core/CameraControls.tsx ---
    • This is an implementation of the [camera-controls](https://github.com/yomotsu/camera-controls) library. ```tsx ``` ```tsx type CameraControlsProps = { /** Optional CameraControls subclass, default to `CameraControlsImpl` official class */ impl?: typeof CameraControlsImpl /** The camera to control, default to the state's `camera` */ camera?: PerspectiveCamera | OrthographicCamera /** DOM element to connect to, default to the state's `gl` renderer */ domElement?: HTMLElement /** Reference this CameraControls instance as state's `controls` */ makeDefault?: boolean /** Events callbacks, see: https://github.com/yomotsu/camera-controls#events */ onControlStart?: (e? { type: 'controlstart' }) => void onControl?: (e? { type: 'control' }) => void onControlEnd?: (e? { type: 'controlend' }) => void onTransitionStart?: (e? { type: 'transitionstart' }) => void onUpdate?: (e? { type: 'update' }) => void onWake?: (e? { type: 'wake' }) => void onRest?: (e? { type: 'rest' }) => void onSleep?: (e? { type: 'sleep' }) => void } ``` ## Breaking changes ### 10.5.0 This drei version includes camera-controls v3: see the [migration guide](https://github.com/yomotsu/camera-controls?tab=readme-ov-file#v3-migration-guide) ## Recipes ### `[camera]` If you need CC to control a specific camera, make it reactive so `CameraControls` is mounted/updated "reactively" to `mycam` ```tsx const [mycam, setMycam] = useState(); {mycam && } ```
    see: https://github.com/pmndrs/drei/blob/ca4e69c33e5b2eae9ad327c7319dda46de7fd4ae/src/core/CameraControls.tsx#L79-L82
    ### Inputs CC has ["user inputs"](https://yomotsu.github.io/camera-controls/#md:user-input-config) options: ```tsx import { CameraControlsImpl } from "@react-three/drei" const { ACTION } = CameraControlsImpl; ``` ### `[impl]` custom subclass You can pass a custom subclass of `CameraControlsImpl` to the `impl` prop. This allows you to override methods or add new functionality: ```tsx class MyCameraControls extends CameraControlsImpl { override rotate(...args: Parameters) { console.log('my rotate', ...args) return super.rotate(...args) } } ``` --- ### Controls Face Controls (`docs/controls/face-controls.mdx`) --- title: FaceControls sourcecode: src/web/FaceControls.tsx --- storybook The camera follows your (detected) face.
    • Prerequisite: wrap into a [`FaceLandmarker`](https://drei.docs.pmnd.rs/misc/face-landmarker) provider ```tsx ... ``` ```tsx ``` ``` /* Detailed source-code truncated for AI context efficiency. */ ``` ## Breaking changes ### 9.120.0
    `FaceControls` was [simplified](https://github.com/pmndrs/drei/pull/2242). Following props were deleted: - `autostart`: now use `videoTexture.start` - `webcam`: instead of `webcam: false`, you can now [`manualDetect`](http://localhost:6006/?path=/story/controls-facecontrols--face-controls-st-2) - `webcamVideoTextureSrc`: now use `videoTexture.src` (or instantiate your own video-texture[^1] outside) - `onVideoFrame`: now use `videoTexture.onVideoFrame` (or instantiate your own video-texture[^1] outside) Following api methods/fields were deleted: - `detect`: you can now [`manualDetect`](http://localhost:6006/?path=/story/controls-facecontrols--face-controls-st-2) outside and pass `faceLandmarkerResult` - `webcamApiRef`: if you need `videoTextureRef`, instantiate your own video-texture[^1] outside - `play`/`pause`: same, if you need the `video` object, instantiate your own video-texture[^1] outside [^1]: `` or ``
    --- ### Controls Introduction (`docs/controls/introduction.mdx`) --- title: Controls --- If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `frameloop="demand"` canvas-flag. They inherit all props from their underlying [THREE.Controls](https://threejs.org/docs/index.html?q=controls#api/en/extras/Controls). They are the first effects to run before all other useFrames, to ensure that other components may mutate the camera on top of them. [Some controls](https://github.com/search?q=repo%3Apmndrs%2Fdrei+language%3ATSX+path%3A%2F%5Esrc%5C%2F.*Controls%5C.tsx%2F+makeDefault&type=code) allow you to set `makeDefault`, similar to, for instance, `PerspectiveCamera`. This will set [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree)'s `controls` field in the root store. This can make it easier in situations where you want controls to be known and other parts of the app could respond to it. Some drei controls already take it into account, like `CameraShake`, `Gizmo` and `TransformControls`. ```tsx ``` ```tsx const controls = useThree((state) => state.controls) ``` Drei currently exports `OrbitControls` storybook, `MapControls` storybook, `TrackballControls`, `ArcballControls`, `FlyControls`, `DeviceOrientationControls`, `PointerLockControls` storybook, `FirstPersonControls` storybook `CameraControls` storybook `FaceControls` storybook and other [`*Controls`](https://github.com/search?q=repo%3Apmndrs%2Fdrei+language%3ATSX+path%3A%2F%5Esrc%5C%2F.*Controls%5C.tsx%2F&type=code) Some controls drive an object, not a camera, eg: `PresentationControls`. But all controls involving a camera, react to the default one. If you have a `` in your scene, they will control it. If you need to inject an imperative camera or one that isn't the default, use the `camera` prop: ``. `PointerLockControls` additionally supports a `selector` prop, which enables the binding of `click` event handlers for control activation to other elements than `document` (e.g. a 'Click here to play' button). All elements matching the `selector` prop will activate the controls. It will also center raycast events by default, so regular onPointerOver/etc events on meshes will continue to work. --- ### Controls Keyboard Controls (`docs/controls/keyboard-controls.mdx`) --- title: KeyboardControls sourcecode: src/web/KeyboardControls.tsx --- Dom only
    • A rudimentary keyboard controller which distributes your defined data-model to the `useKeyboard` hook. It's a rather simple way to get started with keyboard input. ```tsx type KeyboardControlsState = { [K in T]: boolean } type KeyboardControlsEntry = { /** Name of the action */ name: T /** The keys that define it, you can use either event.key, or event.code */ keys: string[] /** If the event receives the keyup event, true by default */ up?: boolean } type KeyboardControlsProps = { /** A map of named keys */ map: KeyboardControlsEntry[] /** All children will be able to useKeyboardControls */ children: React.ReactNode /** Optional onchange event */ onChange: (name: string, pressed: boolean, state: KeyboardControlsState) => void /** Optional event source */ domElement?: HTMLElement } ``` You start by wrapping your app, or scene, into ``. ```tsx enum Controls { forward = 'forward', back = 'back', left = 'left', right = 'right', jump = 'jump', } function App() { const map = useMemo[]>(()=>[ { name: Controls.forward, keys: ['ArrowUp', 'KeyW'] }, { name: Controls.back, keys: ['ArrowDown', 'KeyS'] }, { name: Controls.left, keys: ['ArrowLeft', 'KeyA'] }, { name: Controls.right, keys: ['ArrowRight', 'KeyD'] }, { name: Controls.jump, keys: ['Space'] }, ], []) return ( ``` You can either respond to input reactively, it uses zustand (with the `subscribeWithSelector` middleware) so all the rules apply: ```tsx function Foo() { const forwardPressed = useKeyboardControls(state => state.forward) ``` Or transiently, either by `subscribe`, which is a function which returns a function to unsubscribe, so you can pair it with useEffect for cleanup, or `get`, which fetches fresh state non-reactively. ```tsx function Foo() { const [sub, get] = useKeyboardControls() useEffect(() => { return sub( (state) => state.forward, (pressed) => { console.log('forward', pressed) } ) }, []) useFrame(() => { // Fetch fresh data from store const pressed = get().back }) } ``` --- ### Controls Motion Path Controls (`docs/controls/motion-path-controls.mdx`) --- title: MotionPathControls sourcecode: src/core/MotionPathControls.tsx ---
    • Motion path controls, it takes a path of bezier curves or catmull-rom curves as input and animates the passed `object` along that path. It can be configured to look upon an external object for staging or presentation purposes by adding a `focusObject` property (ref). ```tsx type MotionPathProps = ThreeElements['group'] & { /** An optional array of THREE curves */ curves?: THREE.Curve[] /** Show debug helpers */ debug?: boolean /** Color of debug helpers */ debugColor?: THREE.ColorRepresentation /** The target object that is moved, default: null (the default camera) */ object?: React.RefObject /** An object where the target looks towards, can also be a vector, default: null */ focus?: [x: number, y: number, z: number] | React.RefObject /** Should the target object loop back to the start when reaching the end, default: true */ loop?: boolean /** Position between 0 (start) and end (1), if this is not set useMotion().current must be used, default: null */ offset?: number /** Optionally smooth the curve, default: false */ smooth?: boolean | number /** Damping tolerance, default: 0.00001 */ eps?: number /** Damping factor for movement along the curve, default: 0.1 */ damping?: number /** Damping factor for lookAt, default: 0.1 */ focusDamping?: number /** Damping maximum speed, default: Infinity */ maxSpeed?: number } ``` You can use MotionPathControls with declarative curves. ```jsx function App() { const poi = useRef() return ( ``` Or with imperative curves. ```jsx ``` You can exert full control with the `useMotion` hook, it allows you to define the current position along the path for instance, or define your own lookAt. Keep in mind that MotionPathControls will still these values unless you set damping and focusDamping to 0. Then you can also employ your own easing. ```tsx type MotionState = { /** The user-defined, mutable, current goal position along the curve, it may be >1 or <0 */ current: number /** The combined curve */ path: THREE.CurvePath /** The focus object */ focus: React.RefObject> | [x: number, y: number, z: number] | undefined /** The target object that is moved along the curve */ object: React.RefObject> /** The automated, 0-1 normalised and damped current goal position along curve */ offset: number /** The current point on the curve */ point: THREE.Vector3 /** The current tangent on the curve */ tangent: THREE.Vector3 /** The next point on the curve */ next: THREE.Vector3 } const state: MotionState = useMotion() ``` ```jsx function Loop() { const motion = useMotion() useFrame((state, delta) => { // Set the current position along the curve, you can increment indiscriminately for a loop motion.current += delta // Look ahead on the curve motion.object.current.lookAt(motion.next) }) } ``` You can also use the MotionPathControls's reference to control the motion state in the `motion` property. ```tsx const motionPathRef = useRef(null!) const motionPathObject = useRef(null!) useFrame(() => { if (motionPathRef.current) { motionPathRef.current.motion.current += 0.01 } }) ``` --- ### Controls Presentation Controls (`docs/controls/presentation-controls.mdx`) --- title: PresentationControls sourcecode: src/web/PresentationControls.tsx --- Dom only
    • Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentational purposes. These controls do not turn the camera but will spin their contents. They will not suddenly come to rest when they reach limits like OrbitControls do, but rather smoothly anticipate stopping position. ```jsx ``` --- ### Controls Scroll Controls (`docs/controls/scroll-controls.mdx`) --- title: ScrollControls sourcecode: src/web/ScrollControls.tsx --- Dom only
    • ```tsx type ScrollControlsProps = { /** Precision, default 0.00001 */ eps?: number /** Horizontal scroll, default false (vertical) */ horizontal?: boolean /** Infinite scroll, default false (experimental!) */ infinite?: boolean /** Defines the length of the scroll area, each page is height:100%, default 1 */ pages?: number /** A factor that increases scroll bar travel, default 1 */ distance?: number /** Friction in seconds, default: 0.2 (1/5 second) */ damping?: number /** maxSpeed optionally allows you to clamp the maximum speed. If damping is 0.2s and looks OK * going between, say, page 1 and 2, but not for pages far apart as it'll move very rapid, * then a maxSpeed of e.g. 0.1 which will clamp the speed to 0.1 units per second, it may now * take much longer than damping to reach the target if it is far away. Default: Infinity */ maxSpeed?: number /** If true attaches the scroll container before the canvas */ prepend?: boolean enabled?: boolean style?: React.CSSProperties children: React.ReactNode } ``` Scroll controls create an HTML scroll container in front of the canvas. Everything you drop into the `` component will be affected. You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view. ``` /* Detailed source-code truncated for AI context efficiency. */ ``` --- ### Getting Started Introduction (`docs/getting-started/introduction.mdx`) --- title: Introduction description: Useful helpers for @react-three/fiber nav: -1 --- A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).