@react-three/drei

About

useful add-ons for react-three-fiber

What detecting @react-three/drei tells you about a site

@react-three/drei is the helpers-and-abstractions companion to react-three-fiber: cameras, controls, loaders, environment maps and ready-made effects. Its presence confirms not just that the site renders 3D, but that the team is building a polished, feature-rich scene quickly using community-blessed shortcuts rather than wiring every control from scratch. It is a strong tell of a serious 3D experience built by people fluent in the React-three ecosystem, and it implies both fiber and Three.js are also shipping in the bundle.

Why the exact @react-three/drei version matters

drei is versioned in lockstep expectation with react-three-fiber and Three.js, and individual helpers come and go or change props between releases as the upstream Three revisions shift. The exact version therefore pins which helper APIs and which underlying Three features were available, and it is one of the better signals of how recently the 3D work was done.

@react-three/drei in a real-world stack

When you find @react-three/drei in a bundle, it rarely travels alone. @react-three/fiber and three, almost always as a trio.

Quick facts

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

What @react-three/drei pulls in

@react-three/drei declares 21 direct dependencies — each one also rides into any bundle that ships @react-three/drei, so they are detection targets too. Reading them is a quick way to understand the package's real footprint .

How Sourcemap Explorer detects @react-three/drei

@react-three/drei ships as v10.7.7, published 2025-11-13 and carries 21 direct dependencies, 4 peer dependencies (react, three, react-dom), 949 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when @react-three/drei rides inside a deployed bundle — here is how the detection works.

We catch @react-three/drei from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@react-three/drei/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `@react-three/drei` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@react-three/drei/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@react-three/drei/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@react-three/drei/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of @react-three/drei

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the @react-three/drei version a site actually ships against the ecosystem.

Recent versions

@react-three/drei README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

npm install @react-three/drei

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'

$ yarn install

$ yarn build
$ yarn test

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test

$ docker run --init --rm \
    -v $(pwd):/app -w /app \
    ghcr.io/pmndrs/playwright:drei \
      sh -c "corepack enable && yarn install && yarn build && yarn test"

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

FAQ

Keep reading on Sourcemap Explorer