Awesome
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 ofthree/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
<!-- <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> -->[!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.