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

yarn add drei

import { ... } from 'drei'

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

<PerspectiveCamera>
  <mesh />
</PerspectiveCamera>

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

<TransformControls>
  <mesh />
</TransformControls>

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>

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.

<PositionalAudo url="/song.mp3" />

Adds the Draco extension to your GLTFLoader.

useLoader(GLTFLoader, url, draco())

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

<StandardEffects />

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

• 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