A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.

If you make a component that is generic enough to be useful to others, think about CONTRIBUTING!

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'

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

Dev

INSTALL

$ corepack enable
$ yarn install

Test

Local

Pre-requisites:

• $ npx playwright install

To run visual tests locally:

$ yarn build
$ yarn test

To update a snapshot:

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

To update a snapshot:

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