drei

A growing collection of useful helpers and abstractions for react-three-fiber, saving you some boilerplate.

If you find yourself repeating set-up code often and if it's generic enough, add it here, everyone benefits!

Requirements

• Types
• ForwardRefs if possible, so that objects can be referenced back
• Invalidate frames on any movement for those using invalidateFrameloop
• Cleanup on unmount, no left-overs, restore previous states

yarn add drei

import { ... } from 'drei'

Index

• <PerspectiveCamera />
• <OrbitControls />
• <MapControls />
• <TrackballControls />
• <TransformControls />
• <Detailed />
• <PositionalAudio />
• <StandardEffects />
• <Sky />
• <Stats />
• draco(url = '/draco-gtltf/')

Exports

Cameras

⚡️ PerspectiveCamera makeDefault=true

A responsive, perspective camera that sets itself as the default. Can take children, which from then on move along.

<PerspectiveCamera>
  <mesh />
</PerspectiveCamera>

Controls

If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the invalidateFrameloop canvas-flag.

⚡️ OrbitControls enableDamping=true

⚡️ MapControls enableDamping=true

⚡️ TrackballControls

⚡️ TransformControls

Abstractions

⚡️ Detailed

A wrapper around THREE.LOD (Level of detail). The number of distances corresponds to the direct children you add. Only one of the children will be shown according to how close the camera is to it.

<Detailed distances={[0, 10, 20]}>
  <mesh geometry={highDetail} />
  <mesh geometry={mediumDetail} />
  <mesh geometry={lowDetail} />
</Detailed>

⚡️ PositionalAudio url distance=1 loop=true

A wrapper around THREE.PositionalAudio. Add this to groups or meshes to tie them to a sound or a loop that plays when the camera comes near.

⚡️ StandardEffects ao=true|{...} bloom=true|{...}

Adds ambient-occlusion, bloom and SMAA using the postprocessing library.

Shaders

⚡️ Sky distance=450000 sunPosition=[0, 1, 0]

From: https://threejs.org/examples/webgl_shaders_sky.html

Misc

⚡️ Stats showPanel=0

Adds stats to document.body. It takes over the render-loop!

⚡️ draco(url = '/draco-gtltf/')

Adds the Draco extension to your GLTFLoader.

useLoader(GLTFLoader, url, draco())