drei

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

yarn add drei

import { ... } from 'drei'

Exports

Cameras

• <PerspectiveCamera makeDefault=true />, can take children (which are then moved w/ the cam)

<PerspectiveCamera>
  <mesh />
</PerspectiveCamera>

Controls

All 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 /> | sandbox
• <MapControls enableDamping=true /> | sandbox
• <TrackballControls />
• <TransformControls /> | sandbox

<TransformControls>
  <mesh />
</TransformControls>

Abstractions

• <Detailed />, a wrapper around THREE.LOD (Level of detail) | sandbox

<Detailed distances={[0, 10, 20]}>
  <mesh />
  <mesh />
  <mesh />
</Detailed>

• <PositionalAudio distance=1 loop=true/>, a wrapper around THREE.PositionalAudio | sandbox *suspense

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

Misc

• draco(url = "/draco-gtltf/"), adds Draco extension to GLTFLoader | sandbox

useLoader(GLTFLoader, url, draco())

• <StandardEffects ao=true|{...} bloom=true|{...} />, adds AO, bloom and SMAA *suspense

Using the postprocessing library. Ambient-occlusion-props, Bloom-props

<StandardEffects />

Contributions

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