base on 🥉 useful helpers for react-three-fiber [](https://drei.pmnd.rs/) [](https://www.npmjs.com/package/@react-three/drei) [](https://www.npmjs.com/package/@react-three/drei) [](https://discord.com/channels/740090768164651008/741751532592038022) [](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei) [](https://codesandbox.io/s/bfplr) A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber). If you make a component that is generic enough to be useful to others, think about [CONTRIBUTING](CONTRIBUTING.md)! ```bash npm install @react-three/drei ``` > [!IMPORTANT] > this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm). ## Basic usage ```jsx import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei' ``` ## React-native ```jsx 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 <details> <summary>Old doc</summary> > [!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. <!-- <table> <tr> <td valign="top"> <ul> <li><a href="#cameras">Cameras</a></li> <ul> <li><a href="#perspectivecamera">PerspectiveCamera</a></li> <li><a href="#orthographiccamera">OrthographicCamera</a></li> <li><a href="#cubecamera">CubeCamera</a></li> </ul> <li><a href="#controls">Controls</a></li> <ul> <li><a href="#cameracontrols">CameraControls</a></li> <li><a href="#controls">FlyControls</a></li> <li><a href="#controls">MapControls</a></li> <li><a href="#controls">DeviceOrientationControls</a></li> <li><a href="#controls">TrackballControls</a></li> <li><a href="#controls">ArcballControls</a></li> <li><a href="#controls">PointerLockControls</a></li> <li><a href="#controls">FirstPersonControls</a></li> <li><a href="#scrollcontrols">ScrollControls</a></li> <li><a href="#presentationcontrols">PresentationControls</a></li> <li><a href="#keyboardcontrols">KeyboardControls</a></li> <li><a href="#FaceControls">FaceControls</a></li> <li><a href="#motionpathcontrols">MotionPathControls</a></li> </ul> <li><a href="#gizmos">Gizmos</a></li> <ul> <li><a href="#gizmohelper">GizmoHelper</a></li> <li><a href="#pivotcontrols">PivotControls</a></li> <li><a href="#dragcontrols">DragControls</a></li> <li><a href="#transformcontrols">TransformControls</a></li> <li><a href="#grid">Grid</a></li> <li><a href="#helper--usehelper">Helper / useHelper</a></li> <li><a href="#helper">Helper</a></li> </ul> <li><a href="#abstractions">Abstractions</a></li> <ul> <li><a href="#image">Image</a></li> <li><a href="#text">Text</a></li> <li><a href="#text3d">Text3D</a></li> <li><a href="#positionalaudio">PositionalAudio</a></li> <li><a href="#billboard">Billboard</a></li> <li><a href="#screenspace">ScreenSpace</a></li> <li><a href="#screensizer">ScreenSizer</a></li> <li><a href="#effects">Effects</a></li> <li><a href="#gradienttexture">GradientTexture</a></li> <li><a href="#edges">Edges</a></li> <li><a href="#outlines">Outlines</a></li> <li><a href="#trail">Trail</a></li> <li><a href="#sampler">Sampler</a></li> <li><a href="#computedattribute">ComputedAttribute</a></li> <li><a href="#clone">Clone</a></li> <li><a href="#useanimations">useAnimations</a></li> <li><a href="#marchingcubes">MarchingCubes</a></li> <li><a href="#decal">Decal</a></li> <li><a href="#svg">Svg</a></li> <li><a href="#gltf">Gltf</a></li> <li><a href="#asciirenderer">AsciiRenderer</a></li> <li><a href="#splat">Splat</a></li> </ul> <li><a href="#shaders">Shaders</a></li> <ul> <li><a href="#meshreflectormaterial">MeshReflectorMaterial</a></li> <li><a href="#meshwobblematerial">MeshWobbleMaterial</a></li> <li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li> <li><a href="#meshrefractionmaterial">MeshRefractionMaterial</a></li> <li><a href="#meshtransmissionmaterial">MeshTransmissionMaterial</a></li> <li><a href="#meshdiscardmaterial">MeshDiscardMaterial</a></li> <li><a href="#pointmaterial">PointMaterial</a></li> <li><a href="#softshadows">SoftShadows</a></li> <li><a href="#shadermaterial">shaderMaterial</a></li> </ul> </ul> </td> <td valign="top"> <ul> <li><a href="#misc">Misc</a></li> <ul> <li><a href="#example">Example</a></li> <li><a href="#html">Html</a></li> <li><a href="#cycleraycast">CycleRaycast</a></li> <li><a href="#select">Select</a></li> <li><a href="#sprite-animator">Sprite Animator</a></li> <li><a href="#stats">Stats</a></li> <li><a href="#stats-gl">StatsGl</a></li> <li><a href="#wireframe">Wireframe</a></li> <li><a href="#usedepthbuffer">useDepthBuffer</a></li> <li><a href="#usecontextbridge">useContextBridge</a></li> <li><a href="#fbo--usefbo">Fbo / useFBO</a></li> <li><a href="#usecamera">useCamera</a></li> <li><a href="#cubecamera--usecubecamera">CubeCamera / useCubeCamera</a></li> <li><a href="#detectgpu--usedetectgpu">DetectGPU / useDetectGPU</a></li> <li><a href="#useaspect">useAspect</a></li> <li><a href="#usecursor">useCursor</a></li> <li><a href="#useintersect">useIntersect</a></li> <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li> <li><a href="#trail--useTrail">Trail / useTrail</a></li> <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li> <li><a href="#facelandmarker">FaceLandmarker</a></li> </ul> <li><a href="#loading">Loaders</a></li> <ul> <li><a href="#loader">Loader</a></li> <li><a href="#progress--useprogress">Progress / useProgress</a></li> <li><a href="#gltf--usegltf">Gltf / useGLTF</a></li> <li><a href="#fbx--usefbx">FBX / useFBX</a></li> <li><a href="#texture--usetexture">Texture / useTexture</a></li> <li><a href="#ktx2--usektx2">Ktx2 / useKTX2</a></li> <li><a href="#cubetexture--usecubetexture">CubeTexture / useCubeTexture</a></li> <li><a href="#videotexture--usevideotexture">VideoTexture / useVideoTexture</a></li> <li><a href="#trailtexture--usetrailtexture">TrailTexture / useTrailTexture</a></li> <li><a href="#usefont">useFont</a></li> <li><a href="#usespriteloader">useSpriteLoader</a></li> </ul> <li><a href="#performance">Performance</a></li> <ul> <li><a href="#instances">Instances</a></li> <li><a href="#merged">Merged</a></li> <li><a href="#points">Points</a></li> <li><a href="#segments">Segments</a></li> <li><a href="#detailed">Detailed</a></li> <li><a href="#preload">Preload</a></li> <li><a href="#bakeshadows">BakeShadows</a></li> <li><a href="#meshbounds">meshBounds</a></li> <li><a href="#adaptivedpr">AdaptiveDpr</a></li> <li><a href="#adaptiveevents">AdaptiveEvents</a></li> <li><a href="#bvh">Bvh</a></li> <li><a href="#performancemonitor">PerformanceMonitor</a></li> </ul> <li><a href="#portals">Portals</a></li> <ul> <li><a href="#hud">Hud</a></li> <li><a href="#view">View</a></li> <li><a href="#rendertexture">RenderTexture</a></li> <li><a href="#rendercubetexture">RenderCubeTexture</a></li> <li><a href="#fisheye">Fisheye</a></li> <li><a href="#mask">Mask</a></li> <li><a href="#meshportalmaterial">MeshPortalMaterial</a></li> </ul> <li><a href="#modifiers">Modifiers</a></li> <ul> <li><a href="#curvemodifier">CurveModifier</a></li> </ul> </ul> </td> <td valign="top"> <ul> <li><a href="#shapes">Shapes</a></li> <ul> <li><a href="#shapes">Plane</a></li> <li><a href="#shapes">Box</a></li> <li><a href="#shapes">Sphere</a></li> <li><a href="#shapes">Circle</a></li> <li><a href="#shapes">Cone</a></li> <li><a href="#shapes">Cylinder</a></li> <li><a href="#shapes">Tube</a></li> <li><a href="#shapes">Torus</a></li> <li><a href="#shapes">TorusKnot</a></li> <li><a href="#shapes">Ring</a></li> <li><a href="#shapes">Tetrahedron</a></li> <li><a href="#shapes">Polyhedron</a></li> <li><a href="#shapes">Icosahedron</a></li> <li><a href="#shapes">Octahedron</a></li> <li><a href="#shapes">Dodecahedron</a></li> <li><a href="#shapes">Extrude</a></li> <li><a href="#shapes">Lathe</a></li> <li><a href="#shapes">Shape</a></li> <li><a href="#roundedbox">RoundedBox</a></li> <li><a href="#screenquad">Screenquad</a></li> <li><a href="#line">Line</a></li> <li><a href="#quadraticbezierline">QuadraticBezierLine</a></li> <li><a href="#cubicbezierline">CubicBezierLine</a></li> <li><a href="#catmullromline">CatmullRomLine</a></li> <li><a href="#facemesh">Facemesh</a></li> </ul> <li><a href="#staging">Staging</a></li> <ul> <li><a href="#center">Center</a></li> <li><a href="#resize">Resize</a></li> <li><a href="#BBAnchor">BBAnchor</a></li> <li><a href="#bounds">Bounds</a></li> <li><a href="#camerashake">CameraShake</a></li> <li><a href="#float">Float</a></li> <li><a href="#stage">Stage</a></li> <li><a href="#backdrop">Backdrop</a></li> <li><a href="#environment">Environment</a></li> <li><a href="#lightformer">Lightformer</a></li> <li><a href="#spotlight">SpotLight</a></li> <li><a href="#spotlightshadow">SpotLightShadow</a></li> <li><a href="#shadow">Shadow</a></li> <li><a href="#caustics">Caustics</a></li> <li><a href="#contactshadows">ContactShadows</a></li> <li><a href="#randomizedlight">RandomizedLight</a></li> <li><a href="#accumulativeshadows">AccumulativeShadows</a></li> <li><a href="#sky">Sky</a></li> <li><a href="#stars">Stars</a></li> <li><a href="#sparkles">Sparkles</a></li> <li><a href="#cloud">Cloud</a></li> <li><a href="#useenvironment">useEnvironment</a></li> <li><a href="#matcaptexture--usematcaptexture">MatcapTexture / useMatcapTexture</a></li> <li><a href="#normaltexture--usenormaltexture">NormalTexture / useNormalTexture</a></li> <li><a href="#shadowalpha">ShadowAlpha</a></li> </ul> </ul> </td> </tr> </table> --> ### Cameras #### PerspectiveCamera [Documentation has moved here](https://pmndrs.github.io/drei/cameras/perspective-camera) #### OrthographicCamera [Documentation has moved here](https://pmndrs.github.io/drei/cameras/orthographic-camera) #### CubeCamera [Documentation has moved here](https://pmndrs.github.io/drei/cameras/cube-camera) ### Controls #### CameraControls [Documentation has moved here](https://pmndrs.github.io/drei/controls/camera-controls) #### ScrollControls [Documentation has moved here](https://pmndrs.github.io/drei/controls/scroll-controls) #### PresentationControls [Documentation has moved here](https://pmndrs.github.io/drei/controls/presentation-controls) #### KeyboardControls [Documentation has moved here](https://pmndrs.github.io/drei/controls/keyboard-controls) #### FaceControls [Documentation has moved here](https://pmndrs.github.io/drei/controls/face-controls) #### MotionPathControls [Documentation has moved here](https://pmndrs.github.io/drei/controls/motion-path-controls) ### Gizmos #### GizmoHelper [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/gizmo-helper) #### PivotControls [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/pivot-controls) #### DragControls [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/drag-controls) #### TransformControls [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/transform-controls) #### Grid [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/grid) #### Helper / useHelper [Documentation has moved here](https://pmndrs.github.io/drei/gizmos/helper-use-helper) ### Shapes #### Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape [Documentation has moved here](https://pmndrs.github.io/drei/shapes/mesh) #### RoundedBox [Documentation has moved here](https://pmndrs.github.io/drei/shapes/rounded-box) #### ScreenQuad [Documentation has moved here](https://pmndrs.github.io/drei/shapes/screen-quad) #### Line [Documentation has moved here](https://pmndrs.github.io/drei/shapes/line) #### QuadraticBezierLine [Documentation has moved here](https://pmndrs.github.io/drei/shapes/quadratic-bezier-line) #### CubicBezierLine [Documentation has moved here](https://pmndrs.github.io/drei/shapes/cubic-bezier-line) #### CatmullRomLine [Documentation has moved here](https://pmndrs.github.io/drei/shapes/catmull-rom-line) #### Facemesh [Documentation has moved here](https://pmndrs.github.io/drei/shapes/facemesh) ### Abstractions #### Image [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/image) #### Text [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text) #### Text3D [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/text3d) #### Effects [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/effects) #### PositionalAudio [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/positional-audio) #### Billboard [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/billboard) #### ScreenSpace [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-space) #### ScreenSizer [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/screen-sizer) #### GradientTexture [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/gradient-texture) #### Edges [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/edges) #### Outlines [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/outlines) #### Trail [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/trail) #### Sampler [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/sampler) #### ComputedAttribute [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/computed-attribute) #### Clone [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/clone) #### useAnimations [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/use-animations) #### MarchingCubes [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/marching-cubes) #### Decal [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/decal) #### Svg [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/svg) #### AsciiRenderer [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/ascii-renderer) #### Splat [Documentation has moved here](https://pmndrs.github.io/drei/abstractions/splat) ### Shaders #### MeshReflectorMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-reflector-material) #### MeshWobbleMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-wobble-material) #### MeshDistortMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-distort-material) #### MeshRefractionMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-refraction-material) #### MeshTransmissionMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-transmission-material) #### MeshDiscardMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/mesh-discard-material) #### PointMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/point-material) #### SoftShadows [Documentation has moved here](https://pmndrs.github.io/drei/shaders/soft-shadows) #### shaderMaterial [Documentation has moved here](https://pmndrs.github.io/drei/shaders/shader-material) ### Modifiers #### CurveModifier [Documentation has moved here](https://pmndrs.github.io/drei/modifiers/curve-modifier) ### Misc #### useContextBridge [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-context-bridge) #### Example [Documentation has moved here](https://pmndrs.github.io/drei/misc/example) #### Html [Documentation has moved here](https://pmndrs.github.io/drei/misc/html) #### CycleRaycast [Documentation has moved here](https://pmndrs.github.io/drei/misc/cycle-raycast) #### Select [Documentation has moved here](https://pmndrs.github.io/drei/misc/select) #### Sprite Animator [Documentation has moved here](https://pmndrs.github.io/drei/misc/sprite-animator) #### Stats [Documentation has moved here](https://pmndrs.github.io/drei/misc/stats) #### StatsGl [Documentation has moved here](https://pmndrs.github.io/drei/misc/stats-gl) #### Wireframe [Documentation has moved here](https://pmndrs.github.io/drei/misc/wireframe) #### useDepthBuffer [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-depth-buffer) #### Fbo / useFBO [Documentation has moved here](https://pmndrs.github.io/drei/misc/fbo-use-fbo) #### useCamera [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-camera) #### CubeCamera / useCubeCamera [Documentation has moved here](https://pmndrs.github.io/drei/misc/cube-camera-use-cube-camera) #### DetectGPU / useDetectGPU [Documentation has moved here](https://pmndrs.github.io/drei/misc/detect-gpu-use-detect-gpu) #### useAspect [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-aspect) #### useCursor [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-cursor) #### useIntersect [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-intersect) #### useBoxProjectedEnv [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-box-projected-env) #### Trail / useTrail [Documentation has moved here](https://pmndrs.github.io/drei/misc/trail-use-trail) #### useSurfaceSampler [Documentation has moved here](https://pmndrs.github.io/drei/misc/use-surface-sampler) #### FaceLandmarker [Documentation has moved here](https://pmndrs.github.io/drei/misc/face-landmarker) ### Loading #### Loader [Documentation has moved here](https://pmndrs.github.io/drei/loaders/loader) #### Progress / useProgress [Documentation has moved here](https://pmndrs.github.io/drei/loaders/progress-use-progress) #### Gltf / useGLTF [Documentation has moved here](https://pmndrs.github.io/drei/loaders/gltf-use-gltf) #### Fbx / useFBX [Documentation has moved here](https://pmndrs.github.io/drei/loaders/fbx-use-fbx) #### Texture / useTexture [Documentation has moved here](https://pmndrs.github.io/drei/loaders/texture-use-texture) #### Ktx2 / useKTX2 [Documentation has moved here](https://pmndrs.github.io/drei/loaders/ktx2-use-ktx2) #### CubeTexture / useCubeTexture [Documentation has moved here](https://pmndrs.github.io/drei/loaders/cube-texture-use-cube-texture) #### VideoTexture / useVideoTexture [Documentation has moved here](https://pmndrs.github.io/drei/loaders/video-texture-use-video-texture) #### TrailTexture / useTrailTexture [Documentation has moved here](https://pmndrs.github.io/drei/loaders/trail-texture-use-trail-texture) #### useFont [Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-font) #### useSpriteLoader [Documentation has moved here](https://pmndrs.github.io/drei/loaders/use-sprite-loader) ### Performance #### Instances [Documentation has moved here](https://pmndrs.github.io/drei/performances/instances) #### Merged [Documentation has moved here](https://pmndrs.github.io/drei/performances/merged) #### Points [Documentation has moved here](https://pmndrs.github.io/drei/performances/points) #### Segments [Documentation has moved here](https://pmndrs.github.io/drei/performances/segments) #### Detailed [Documentation has moved here](https://pmndrs.github.io/drei/performances/detailed) #### Preload [Documentation has moved here](https://pmndrs.github.io/drei/performances/preload) #### BakeShadows [Documentation has moved here](https://pmndrs.github.io/drei/performances/bake-shadows) #### meshBounds [Documentation has moved here](https://pmndrs.github.io/drei/performances/mesh-bounds) #### AdaptiveDpr [Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-dpr) #### AdaptiveEvents [Documentation has moved here](https://pmndrs.github.io/drei/performances/adaptive-events) #### Bvh [Documentation has moved here](https://pmndrs.github.io/drei/performances/bvh) #### PerformanceMonitor [Documentation has moved here](https://pmndrs.github.io/drei/performances/performance-monitor) ### Portals #### Hud [Documentation has moved here](https://pmndrs.github.io/drei/portals/hud) #### View [Documentation has moved here](https://pmndrs.github.io/drei/portals/view) #### RenderTexture [Documentation has moved here](https://pmndrs.github.io/drei/portals/render-texture) #### RenderCubeTexture [Documentation has moved here](https://pmndrs.github.io/drei/portals/render-cube-texture) #### Fisheye [Documentation has moved here](https://pmndrs.github.io/drei/portals/fisheye) #### Mask [Documentation has moved here](https://pmndrs.github.io/drei/portals/mask) #### MeshPortalMaterial [Documentation has moved here](https://pmndrs.github.io/drei/portals/mesh-portal-material) ### Staging #### Center [Documentation has moved here](https://pmndrs.github.io/drei/staging/center) #### Resize [Documentation has moved here](https://pmndrs.github.io/drei/staging/resize) #### BBAnchor [Documentation has moved here](https://pmndrs.github.io/drei/staging/bb-anchor) #### Bounds [Documentation has moved here](https://pmndrs.github.io/drei/staging/bounds) #### CameraShake [Documentation has moved here](https://pmndrs.github.io/drei/staging/camera-shake) #### Float [Documentation has moved here](https://pmndrs.github.io/drei/staging/float) #### Stage [Documentation has moved here](https://pmndrs.github.io/drei/staging/stage) #### Backdrop [Documentation has moved here](https://pmndrs.github.io/drei/staging/backdrop) #### Shadow [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow) #### Caustics [Documentation has moved here](https://pmndrs.github.io/drei/staging/caustics) #### ContactShadows [Documentation has moved here](https://pmndrs.github.io/drei/staging/contact-shadows) #### RandomizedLight [Documentation has moved here](https://pmndrs.github.io/drei/staging/randomized-light) #### AccumulativeShadows [Documentation has moved here](https://pmndrs.github.io/drei/staging/accumulative-shadows) #### SpotLight [Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light) #### SpotLightShadow [Documentation has moved here](https://pmndrs.github.io/drei/staging/spot-light-shadow) #### Environment [Documentation has moved here](https://pmndrs.github.io/drei/staging/environment) #### Lightformer [Documentation has moved here](https://pmndrs.github.io/drei/staging/lightformer) #### Sky [Documentation has moved here](https://pmndrs.github.io/drei/staging/sky) #### Stars [Documentation has moved here](https://pmndrs.github.io/drei/staging/stars) #### Sparkles [Documentation has moved here](https://pmndrs.github.io/drei/staging/sparkles) #### Cloud [Documentation has moved here](https://pmndrs.github.io/drei/staging/cloud) #### useEnvironment [Documentation has moved here](https://pmndrs.github.io/drei/staging/use-environment) #### MatcapTexture / useMatcapTexture [Documentation has moved here](https://pmndrs.github.io/drei/staging/matcap-texture-use-matcap-texture) #### NormalTexture / useNormalTexture [Documentation has moved here](https://pmndrs.github.io/drei/staging/normal-texture-use-normal-texture) #### ShadowAlpha [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha) </details> ## Dev ### INSTALL ```sh $ corepack enable $ yarn install ``` ### Test #### Local Pre-requisites: - ```sh $ npx playwright install ``` To run visual tests locally: ```sh $ yarn build $ yarn test ``` To update a snapshot: ```sh $ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test ``` #### Docker > [!IMPORTANT] > Snapshots are system-dependent, so to run playwright in the same environment as the CI: ```sh $ 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: ```sh $ 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" ``` ", Assign "at most 3 tags" to the expected json: {"id":"1997","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"