202311

 [](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) 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 making it available here through a PR! ```bash npm install @react-three/drei ``` :point_right: 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). :point_left: ### 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`. ### Index <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> </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="#transformcontrols">TransformControls</a></li> <li><a href="#grid">Grid</a></li> <li><a href="#usehelper">useHelper</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="#effects">Effects</a></li> <li><a href="#gradienttexture">GradientTexture</a></li> <li><a href="#edges">Edges</a></li> <li><a href="#trail">Trail</a></li> <li><a href="#sampler">Sampler</a></li> <li><a href="#computedattribute">Computed Attribute</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> </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="#html">Html</a></li> <li><a href="#cycleraycast">CycleRaycast</a></li> <li><a href="#select">Select</a></li> <li><a href="#stats">Stats</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="#usefbo">useFBO</a></li> <li><a href="#usecamera">useCamera</a></li> <li><a href="#usecubecamera">useCubeCamera</a></li> <li><a href="#usedetectgpu">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="#useTrail">useTrail</a></li> <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li> </ul> <li><a href="#loading">Loaders</a></li> <ul> <li><a href="#loader">Loader</a></li> <li><a href="#useprogress">useProgress</a></li> <li><a href="#usegltf">useGLTF</a></li> <li><a href="#usefbx">useFBX</a></li> <li><a href="#usetexture">useTexture</a></li> <li><a href="#usektx2">useKTX2</a></li> <li><a href="#usecubetexture">useCubeTexture</a></li> <li><a href="#usevideotexture">useVideoTexture</a></li> <li><a href="#usetrailtexture">useTrailTexture</a></li> <li><a href="#usefont">useFont</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="#mask">Mask</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="#shape