npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@react-three/drei

v9.117.3

Published

useful add-ons for react-three-fiber

Downloads

1,134,778

Readme

Storybook Version Downloads Discord Shield Open in GitHub Codespaces

logo

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

[!WARNING] Below is an archive of the anchors links with their new respective locations to the documentation website. Do not update the links below, they are for reference only.

Cameras

PerspectiveCamera

Documentation has moved here

OrthographicCamera

Documentation has moved here

CubeCamera

Documentation has moved here

Controls

CameraControls

Documentation has moved here

ScrollControls

Documentation has moved here

PresentationControls

Documentation has moved here

KeyboardControls

Documentation has moved here

FaceControls

Documentation has moved here

MotionPathControls

Documentation has moved here

Gizmos

GizmoHelper

Documentation has moved here

PivotControls

Documentation has moved here

DragControls

Documentation has moved here

TransformControls

Documentation has moved here

Grid

Documentation has moved here

Helper / useHelper

Documentation has moved here

Shapes

Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape

Documentation has moved here

RoundedBox

Documentation has moved here

ScreenQuad

Documentation has moved here

Line

Documentation has moved here

QuadraticBezierLine

Documentation has moved here

CubicBezierLine

Documentation has moved here

CatmullRomLine

Documentation has moved here

Facemesh

Documentation has moved here

Abstractions

Image

Documentation has moved here

Text

Documentation has moved here

Text3D

Documentation has moved here

Effects

Documentation has moved here

PositionalAudio

Documentation has moved here

Billboard

Documentation has moved here

ScreenSpace

Documentation has moved here

ScreenSizer

Documentation has moved here

GradientTexture

Documentation has moved here

Edges

Documentation has moved here

Outlines

Documentation has moved here

Trail

Documentation has moved here

Sampler

Documentation has moved here

ComputedAttribute

Documentation has moved here

Clone

Documentation has moved here

useAnimations

Documentation has moved here

MarchingCubes

Documentation has moved here

Decal

Documentation has moved here

Svg

Documentation has moved here

AsciiRenderer

Documentation has moved here

Splat

Documentation has moved here

Shaders

MeshReflectorMaterial

Documentation has moved here

MeshWobbleMaterial

Documentation has moved here

MeshDistortMaterial

Documentation has moved here

MeshRefractionMaterial

Documentation has moved here

MeshTransmissionMaterial

Documentation has moved here

MeshDiscardMaterial

Documentation has moved here

PointMaterial

Documentation has moved here

SoftShadows

Documentation has moved here

shaderMaterial

Documentation has moved here

Modifiers

CurveModifier

Documentation has moved here

Misc

useContextBridge

Documentation has moved here

Example

Documentation has moved here

Html

Documentation has moved here

CycleRaycast

Documentation has moved here

Select

Documentation has moved here

Sprite Animator

Documentation has moved here

Stats

Documentation has moved here

StatsGl

Documentation has moved here

Wireframe

Documentation has moved here

useDepthBuffer

Documentation has moved here

Fbo / useFBO

Documentation has moved here

useCamera

Documentation has moved here

CubeCamera / useCubeCamera

Documentation has moved here

DetectGPU / useDetectGPU

Documentation has moved here

useAspect

Documentation has moved here

useCursor

Documentation has moved here

useIntersect

Documentation has moved here

useBoxProjectedEnv

Documentation has moved here

Trail / useTrail

Documentation has moved here

useSurfaceSampler

Documentation has moved here

FaceLandmarker

Documentation has moved here

Loading

Loader

Documentation has moved here

Progress / useProgress

Documentation has moved here

Gltf / useGLTF

Documentation has moved here

Fbx / useFBX

Documentation has moved here

Texture / useTexture

Documentation has moved here

Ktx2 / useKTX2

Documentation has moved here

CubeTexture / useCubeTexture

Documentation has moved here

VideoTexture / useVideoTexture

Documentation has moved here

TrailTexture / useTrailTexture

Documentation has moved here

useFont

Documentation has moved here

useSpriteLoader

Documentation has moved here

Performance

Instances

Documentation has moved here

Merged

Documentation has moved here

Points

Documentation has moved here

Segments

Documentation has moved here

Detailed

Documentation has moved here

Preload

Documentation has moved here

BakeShadows

Documentation has moved here

meshBounds

Documentation has moved here

AdaptiveDpr

Documentation has moved here

AdaptiveEvents

Documentation has moved here

Bvh

Documentation has moved here

PerformanceMonitor

Documentation has moved here

Portals

Hud

Documentation has moved here

View

Documentation has moved here

RenderTexture

Documentation has moved here

RenderCubeTexture

Documentation has moved here

Fisheye

Documentation has moved here

Mask

Documentation has moved here

MeshPortalMaterial

Documentation has moved here

Staging

Center

Documentation has moved here

Resize

Documentation has moved here

BBAnchor

Documentation has moved here

Bounds

Documentation has moved here

CameraShake

Documentation has moved here

Float

Documentation has moved here

Stage

Documentation has moved here

Backdrop

Documentation has moved here

Shadow

Documentation has moved here

Caustics

Documentation has moved here

ContactShadows

Documentation has moved here

RandomizedLight

Documentation has moved here

AccumulativeShadows

Documentation has moved here

SpotLight

Documentation has moved here

SpotLightShadow

Documentation has moved here

Environment

Documentation has moved here

Lightformer

Documentation has moved here

Sky

Documentation has moved here

Stars

Documentation has moved here

Sparkles

Documentation has moved here

Cloud

Documentation has moved here

useEnvironment

Documentation has moved here

MatcapTexture / useMatcapTexture

Documentation has moved here

NormalTexture / useNormalTexture

Documentation has moved here

ShadowAlpha

Documentation has moved here

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"