{"_id":"@deltadevs/drei","_rev":"3-78faac96a1759187625d0c20f89f3883","name":"@deltadevs/drei","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@deltadevs/drei","version":"0.0.1","private":false,"description":"useful add-ons for react-three-fiber","keywords":["react","three","threejs","react-three-fiber"],"repository":{"type":"git","url":"git+https://github.com/deltadevsde/drei.git"},"license":"MIT","bugs":{"url":"https://github.com/pmndrs/deltadevsde/issues"},"homepage":"https://github.com/deltadevsde/drei","maintainers":[{"name":"ryqford","email":"ryan@deltadevs.xyz"}],"main":"index.cjs.js","module":"index.js","types":"index.d.ts","sideEffects":false,"commitlint":{"extends":["@commitlint/config-conventional"],"rules":{"body-max-line-length":[0]}},"dependencies":{"@babel/runtime":"^7.11.2","@react-spring/three":"^9.3.1","@use-gesture/react":"^10.2.0","detect-gpu":"^3.1.28","glsl-noise":"^0.0.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-composer":"^5.0.2","react-merge-refs":"^1.1.0","stats.js":"^0.17.0","three-mesh-bvh":"^0.5.2","@deltadevs/three-stdlib":"0.0.1","troika-three-text":"^0.44.0","use-asset":"^1.0.4","utility-types":"^3.10.0","zustand":"^3.5.13"},"peerDependencies":{"@react-three/fiber":">=6.0","react":">=17.0","react-dom":">=17.0","three":">=0.134"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"licenseText":"MIT License\n\nCopyright (c) 2020 react-spring\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@deltadevs/drei@0.0.1","dist":{"shasum":"89752beccdab454e21712e33c9338bd9bc0c4454","integrity":"sha512-fzyZDTULoFdwmoGX7kur4fi1ShJVureEnUL+L0+GLXenjcPY+5VmOmM0gPBXYOFLzRWfqqYOHKKMPoWMDfAbxA==","tarball":"https://registry.npmjs.org/@deltadevs/drei/-/drei-0.0.1.tgz","fileCount":299,"unpackedSize":697174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7YNxCRA9TVsSAnZWagAAt/EQAIRj9bPvuQ9tWok0WrYR\niQvJEH05BGOPoV+6gMpRd31851Bz1Oty+oKF7jB6oD21aNT4v6hrEOM0FvuJ\nuXZ7cmo2ryTo7ZeoaJkuFO9nF7hsWbV8nGQNYrR2L8Nn2G4r2TbA4hNIb/yo\n50IjUbqNgGzSDyttUp84AUwvpqAMN5c0XXbZS2qC6MhXAJTg+igKnbCVS06r\nXPsWjfgrNdwqsI5XFupY73icrbXmZOcul8bGayXWyF3kl5xsmMPsQWDBFBMI\nL9AHgAQuM5QG7x4MfSsK/wH94nz/3gofyeK5VlEhvYI7XmDZCbEeTZMbmyZn\nBwxVPkisDSc7Sr3sgv9VqSlhNmI1P/DAUvVkFMobqEv5bCxzzXFz9Lq0M1TW\nGYtXnltV98waBP6A6QO3SHGL6mfFdFYH2yk+CCwwaukFEZFFCVWvc4CTDldV\nMyiCONF0KDPjwSQbHbKEgfsE2POauvhZAH+IF5Y6k/MqcyfriAtFkrjRVGPQ\nyvhrmZULf5nfYFmkYicnXGlWfO5eisV4YfQXpGH2vLn2bowFwiq12BtLF+3f\n3dfJvKh7+UOyAJWtS8lim9B6bKd0dk5DhbWxW5/57movHWyAwzOQzB4sMxeT\n7+Fd3Rja+BoBaNBtS5uEmivfndGQe4YOcuU9BnSyv0tE58zb61IQMW0OzjXR\nuS5+\r\n=uLt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENF6dD0P4hhWPigp97qQ1x2oMcoXKwidfYBgGQNqT/hAiEA2ZmHxbDg/vvt101A/X3yF1rZ/RY1H59Nov4wPWUKu38="}]},"_npmUser":{"name":"ryqford","email":"ryan@deltadevs.xyz"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drei_0.0.1_1642955632823_0.5218923008771605"},"_hasShrinkwrap":false},"0.0.2":{"name":"@deltadevs/drei","version":"0.0.2","private":false,"description":"useful add-ons for react-three-fiber","keywords":["react","three","threejs","react-three-fiber"],"repository":{"type":"git","url":"git+https://github.com/deltadevsde/drei.git"},"license":"MIT","bugs":{"url":"https://github.com/pmndrs/deltadevsde/issues"},"homepage":"https://github.com/deltadevsde/drei","maintainers":[{"name":"ryqford","email":"ryan@deltadevs.xyz"}],"main":"index.cjs.js","module":"index.js","types":"index.d.ts","sideEffects":false,"commitlint":{"extends":["@commitlint/config-conventional"],"rules":{"body-max-line-length":[0]}},"dependencies":{"@babel/runtime":"^7.11.2","@react-spring/three":"^9.3.1","@use-gesture/react":"^10.2.0","detect-gpu":"^3.1.28","glsl-noise":"^0.0.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-composer":"^5.0.2","react-merge-refs":"^1.1.0","stats.js":"^0.17.0","three-mesh-bvh":"^0.5.2","@deltadevs/three-stdlib":"0.0.2","troika-three-text":"^0.44.0","use-asset":"^1.0.4","utility-types":"^3.10.0","zustand":"^3.5.13"},"peerDependencies":{"@react-three/fiber":">=6.0","react":">=17.0","react-dom":">=17.0","three":">=0.134"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"licenseText":"MIT License\n\nCopyright (c) 2020 react-spring\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@deltadevs/drei@0.0.2","dist":{"shasum":"398c0bcd59dddf1cc83e317b4201c73e294284eb","integrity":"sha512-aTL6ixMml6nJ2FMU15Mu8D7ni5rKp+UoryIrcGgEF+JeN4kgaT0Rwm9OnW71J8oyH5tO6imLku0+Y0cao3G3Sw==","tarball":"https://registry.npmjs.org/@deltadevs/drei/-/drei-0.0.2.tgz","fileCount":299,"unpackedSize":697174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7ZAoCRA9TVsSAnZWagAAo9UP/j9vKYdS4k/ItLsGcZ62\nNuI9K4VcZ5olGAbxY9GhB0AFLfsUguHNG0k96XNtyOxy6fLniekwcy9zS73f\nKSE6z4IV7UMS2yUR7y7Xg5uqjcMTK5A9eMU4lmQKzAxWZQ+bGEiehZVBjEni\n+pfQnpRpChm7qiyNtgBkBBndxqVzxvMHdd/Z5rDEm/dEkVDxg4SmzLFFuGPZ\n7J+f9BwVhRotxwuRU+3PfxXbzoP/bbkiOHfbruO2y72sq/D7CYNQogMzbV7u\nd6EFAYdbExA1iDLii6SC9xvUqiI2fmaco/BPWf4vbJ14e+A82usir1XIpDo0\nAUC5EodMtQsgKe532Wlfoq6ObnsVrzg6p3TETZmvzsK+o3SYSxAUa9uu08TL\nJQqqr4Rg2Qg/fGRQxHy15nHmCFMLE912K2Bl129tHhH/6RxnOaQxDEiHH5IU\nNiQS3hSbNtXTmlfyY/tp7jql4OTptwWp5T5bKIFdLQvivptNRyJ0T2NcX85N\nAnxZqu1oesmwpBUXYl97gGyBtCMLJ/EK4JUP0HD2rHuwG9ml8fp+vZBDmzY/\nNHhF20ZDN95ymEITPG5HkZsi8GQKf/ix5wXLyBMYRk1D6UdYAVWervJv5Izn\n1A54lDqOmw6rfppJ0+7P/3DdrwISIgeTU8beeIRXpHWBSOHGXkEBxK+KmIvI\nkLZQ\r\n=2XPq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCp78jgk865hXHfvIxdexzvWN7SBAf3H/hMfURPjMnvwIgckselVg5mR8VphNVvDz6eEaXX3NIf6dh3ckd+uzC0+s="}]},"_npmUser":{"name":"ryqford","email":"ryan@deltadevs.xyz"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drei_0.0.2_1642958888215_0.910563247857193"},"_hasShrinkwrap":false},"0.0.3":{"name":"@deltadevs/drei","version":"0.0.3","private":false,"description":"useful add-ons for react-three-fiber","keywords":["react","three","threejs","react-three-fiber"],"repository":{"type":"git","url":"git+https://github.com/deltadevsde/drei.git"},"license":"MIT","bugs":{"url":"https://github.com/pmndrs/deltadevsde/issues"},"homepage":"https://github.com/deltadevsde/drei","maintainers":[{"name":"ryqford","email":"ryan@deltadevs.xyz"}],"main":"index.cjs.js","module":"index.js","types":"index.d.ts","sideEffects":false,"commitlint":{"extends":["@commitlint/config-conventional"],"rules":{"body-max-line-length":[0]}},"dependencies":{"@babel/runtime":"^7.11.2","@react-spring/three":"^9.3.1","@use-gesture/react":"^10.2.0","detect-gpu":"^3.1.28","glsl-noise":"^0.0.0","lodash.omit":"^4.5.0","lodash.pick":"^4.4.0","react-composer":"^5.0.2","react-merge-refs":"^1.1.0","stats.js":"^0.17.0","three-mesh-bvh":"^0.5.2","@deltadevs/three-stdlib":"0.0.3","troika-three-text":"^0.44.0","use-asset":"^1.0.4","utility-types":"^3.10.0","zustand":"^3.5.13"},"peerDependencies":{"@react-three/fiber":">=6.0","react":">=17.0","react-dom":">=17.0","three":">=0.134"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"licenseText":"MIT License\n\nCopyright (c) 2020 react-spring\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@deltadevs/drei@0.0.3","dist":{"shasum":"e3a4e96089a56ae3e9838b57a14400b32f2da8f0","integrity":"sha512-v5rideBUjhPSXBo7urLGjJDEmLSCLGm+QhyYaVt2oRkPEZDP9xsPXW9c3LtssQev3rMrJ28+zB1wHrKZHw9U/Q==","tarball":"https://registry.npmjs.org/@deltadevs/drei/-/drei-0.0.3.tgz","fileCount":299,"unpackedSize":697174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7aLzCRA9TVsSAnZWagAAnDMP/ivpX10DvhtWRa8p0la7\nOzOa9sVWnFdLLfEL1jQET4R3vbQgMx/868BudYIGkTqnxsaN/JgP6B3mE/gJ\nX40/I7fkAoq16zhwkJpenZYQfbZ7vJjOpqC4841Ecxj9VSFldiQ8m/91d2nY\nJsDP51aWS0klZyNTHaAYcWqCR7VNOTCZ8sYKDbSk3eDiVfn5xIfWhZe7TdjP\nB3q7FPHOWWCbxdEL7mATClG4wHGxBKARoGYkgqRp+OAOaDyUpkAer4SPX2Wq\nSvQAAHzzcp1ZrpU+P+k0NaB1VHm6hcUo1HActsqJOgssCPosSoathVnS9hDy\nBvWvcz1kHdHKkFZDP3hPSZd9fi7axgyveIRHOox0/YonsXwhuuyYhwuvS5wm\nClzy+PgE3iJgS8ETTl+cbdiXbxMTeyqv0r+4H8uVhx3E4Y0LdAgL1qofEEgV\n+N41BRVFqql+l6HrYCMT6SwX8tDI8C8GD9rx4bLm2fqFZIkw9UyYz0ii9B7B\n2ULVtRnciAbL/eSAYMMbwR5cEdAKs+Bkv8rVSuFtSOVx/SnhM/Bp9SvUqorH\nHyW6sMbZ59KJTMhR/CX9KNE5OSlSm13sphyLmt8KImPqXGzWIHItSHP497nt\nMrJHwSOSxdjj8ege+7bOfTIvD9N80Tico0mEFPeJ5CsESx6/ccuOQT1+Z/Hx\nn9HL\r\n=gPgw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBA97hkQQV9hjNZoF5iO/sTTi5NbbbvxSYLrX3BCDAXXAiBERByQuhXmv0eeItNtQwzxEtvNj7RWNjFnfyPBvfETfQ=="}]},"_npmUser":{"name":"ryqford","email":"ryan@deltadevs.xyz"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drei_0.0.3_1642963699580_0.09129893314962811"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-23T16:33:52.750Z","0.0.1":"2022-01-23T16:33:53.051Z","modified":"2022-04-05T03:42:48.516Z","0.0.2":"2022-01-23T17:28:08.362Z","0.0.3":"2022-01-23T18:48:19.814Z"},"maintainers":[{"name":"ryqford","email":"ryan@deltadevs.xyz"}],"description":"useful add-ons for react-three-fiber","homepage":"https://github.com/deltadevsde/drei","keywords":["react","three","threejs","react-three-fiber"],"repository":{"type":"git","url":"git+https://github.com/deltadevsde/drei.git"},"bugs":{"url":"https://github.com/pmndrs/deltadevsde/issues"},"license":"MIT","readme":"![logo](logo.jpg)\n\n[![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)\n[![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)\n\nA 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!\n\n```bash\nnpm install @react-three/drei\n```\n\n: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/dev/examples/jsm). :point_left:\n\n### Basic usage:\n\n```jsx\nimport { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'\n```\n\n### React-native:\n\n```jsx\nimport { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'\n```\n\nThe `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`.\n\n### Index\n\n<table>\n  <tr>\n    <td valign=\"top\">\n      <ul>\n        <li><a href=\"#cameras\">Cameras</a></li>\n        <ul>\n          <li><a href=\"#perspectivecamera\">PerspectiveCamera</a></li>\n          <li><a href=\"#orthographiccamera\">OrthographicCamera</a></li>\n          <li><a href=\"#cubecamera\">CubeCamera</a></li>\n        </ul>\n        <li><a href=\"#controls\">Controls</a></li>\n        <ul>\n          <li><a href=\"#controls\">Controls</a></li>\n          <li><a href=\"#controls\">FlyControls</a></li>\n          <li><a href=\"#controls\">MapControls</a></li>\n          <li><a href=\"#controls\">DeviceOrientationControls</a></li>\n          <li><a href=\"#controls\">TrackballControls</a></li>\n          <li><a href=\"#controls\">ArcballControls</a></li>\n          <li><a href=\"#controls\">PointerLockControls</a></li>\n          <li><a href=\"#controls\">FirstPersonControls</a></li>\n          <li><a href=\"#transformcontrols\">TransformControls</a></li>\n          <li><a href=\"#scrollcontrols\">ScrollControls</a></li>\n          <li><a href=\"#presentationcontrols\">PresentationControls</a></li>\n        </ul>\n        <li><a href=\"#abstractions\">Abstractions</a></li>\n        <ul>\n          <li><a href=\"#image\">Image</a></li>\n          <li><a href=\"#text\">Text</a></li>\n          <li><a href=\"#line\">Line</a></li>\n          <li><a href=\"#quadraticbezierline\">QuadraticBezierLine</a></li>\n          <li><a href=\"#cubicbezierline\">CubicBezierLine</a></li>\n          <li><a href=\"#positionalaudio\">PositionalAudio</a></li>\n          <li><a href=\"#billboard\">Billboard</a></li>\n          <li><a href=\"#gizmohelper\">GizmoHelper</a></li>\n          <li><a href=\"#effects\">Effects</a></li>\n          <li><a href=\"#gradienttexture\">GradientTexture</a></li>\n          <li><a href=\"#edges\">Edges</a></li>\n          <li><a href=\"#useanimations\">useAnimations</a></li>\n        </ul>\n        <li><a href=\"#shaders\">Shaders</a></li>\n        <ul>\n          <li><a href=\"#meshreflectormaterial\">MeshReflectorMaterial</a></li>\n          <li><a href=\"#meshwobblematerial\">MeshWobbleMaterial</a></li>\n          <li><a href=\"#meshdistortmaterial\">MeshDistortMaterial</a></li>\n          <li><a href=\"#pointmaterial\">PointMaterial</a></li>\n          <li><a href=\"#softshadows\">softShadows</a></li>\n          <li><a href=\"#shadermaterial\">shaderMaterial</a></li>\n        </ul>\n        <li><a href=\"#modifiers\">Modifiers</a></li>\n        <ul>\n          <li><a href=\"#curvemodifier\">CurveModifier</a></li>\n        </ul>\n      </ul>\n    </td>\n    <td valign=\"top\">\n      <ul>\n        <li><a href=\"#misc\">Misc</a></li>\n        <ul>\n          <li><a href=\"#html\">Html</a></li>\n          <li><a href=\"#cycleraycast\">CycleRaycast</a></li>\n          <li><a href=\"#select\">Select</a></li>\n          <li><a href=\"#stats\">Stats</a></li>\n          <li><a href=\"#usedepthbuffer\">useDepthBuffer</a></li>\n          <li><a href=\"#usecontextbridge\">useContextBridge</a></li>\n          <li><a href=\"#usefbo\">useFBO</a></li>\n          <li><a href=\"#usecamera\">useCamera</a></li>\n          <li><a href=\"#usedetectgpu\">useDetectGPU</a></li>\n          <li><a href=\"#usehelper\">useHelper</a></li>\n          <li><a href=\"#useaspect\">useAspect</a></li>\n          <li><a href=\"#usecursor\">useCursor</a></li>\n          <li><a href=\"#useintersect\">useIntersect</a></li>\n        </ul>\n        <li><a href=\"#loading\">Loaders</a></li>\n        <ul>\n          <li><a href=\"#loader\">Loader</a></li>\n          <li><a href=\"#useprogress\">useProgress</a></li>\n          <li><a href=\"#usegltf\">useGLTF</a></li>\n          <li><a href=\"#usefbx\">useFBX</a></li>\n          <li><a href=\"#usetexture\">useTexture</a></li>\n          <li><a href=\"#usektx2\">useKTX2</a></li>\n          <li><a href=\"#usecubetexture\">useCubeTexture</a></li>\n        </ul>\n        <li><a href=\"#performance\">Performance</a></li>\n        <ul>\n          <li><a href=\"#instances\">Instances</a></li>\n          <li><a href=\"#merged\">Merged</a></li>\n          <li><a href=\"#points\">Points</a></li>\n          <li><a href=\"#segments\">Segments</a></li>\n          <li><a href=\"#detailed\">Detailed</a></li>\n          <li><a href=\"#preload\">Preload</a></li>\n          <li><a href=\"#bakeshadows\">BakeShadows</a></li>\n          <li><a href=\"#meshbounds\">meshBounds</a></li>\n          <li><a href=\"#adaptivedpr\">AdaptiveDpr</a></li>\n          <li><a href=\"#adaptiveevents\">AdaptiveEvents</a></li>\n          <li><a href=\"#usebvh\">useBVH</a></li>\n        </ul>\n      </ul>\n    </td>\n    <td valign=\"top\">\n      <ul>\n        <li><a href=\"#shapes\">Shapes</a></li>\n        <ul>\n          <li><a href=\"#shapes\">Plane</a></li>\n          <li><a href=\"#shapes\">Box</a></li>\n          <li><a href=\"#shapes\">Sphere</a></li>\n          <li><a href=\"#shapes\">Circle</a></li>\n          <li><a href=\"#shapes\">Cone</a></li>\n          <li><a href=\"#shapes\">Cylinder</a></li>\n          <li><a href=\"#shapes\">Tube</a></li>\n          <li><a href=\"#shapes\">Torus</a></li>\n          <li><a href=\"#shapes\">TorusKnot</a></li>\n          <li><a href=\"#shapes\">Ring</a></li>\n          <li><a href=\"#shapes\">Tetrahedron</a></li>\n          <li><a href=\"#shapes\">Polyhedron</a></li>\n          <li><a href=\"#shapes\">Icosahedron</a></li>\n          <li><a href=\"#shapes\">Octahedron</a></li>\n          <li><a href=\"#shapes\">Dodecahedron</a></li>\n          <li><a href=\"#shapes\">Extrude</a></li>\n          <li><a href=\"#shapes\">Lathe</a></li>\n          <li><a href=\"#roundedbox\">RoundedBox</a></li>\n          <li><a href=\"#screenquad\">Screenquad</a></li>\n        </ul>\n        <li><a href=\"#staging\">Staging</a></li>\n        <ul>\n          <li><a href=\"#center\">Center</a></li>\n          <li><a href=\"#bounds\">Bounds</a></li>\n          <li><a href=\"#camerashake\">CameraShake</a></li>\n          <li><a href=\"#float\">Float</a></li>\n          <li><a href=\"#stage\">Stage</a></li>\n          <li><a href=\"#backdrop\">Backdrop</a></li>\n          <li><a href=\"#environment\">Environment</a></li>\n          <li><a href=\"#spotlight\">SpotLight</a></li>\n          <li><a href=\"#shadow\">Shadow</a></li>\n          <li><a href=\"#contactshadows\">ContactShadows</a></li>\n          <li><a href=\"#sky\">Sky</a></li>\n          <li><a href=\"#stars\">Stars</a></li>\n          <li><a href=\"#cloud\">Cloud</a></li>\n          <li><a href=\"#usematcaptexture\">useMatcapTexture</a></li>\n          <li><a href=\"#usenormaltexture\">useNormalTexture</a></li>\n        </ul>\n      </ul>\n    </td>\n  </tr>\n</table>\n\n# Cameras\n\n#### PerspectiveCamera\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-perspectivecamera--perspective-camera-scene-st)\n\nA responsive [THREE.PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) that can set itself as the default.\n\n```jsx\n<PerspectiveCamera makeDefault {...props} />\n<mesh />\n```\n\nYou can also give it children, which will now occupy the same position as the camera and follow along as it moves.\n\n```jsx\n<PerspectiveCamera makeDefault {...props}>\n  <mesh />\n</PerspectiveCamera>\n```\n\nYou can also drive it manually, it won't be responsive and you have to calculate aspect ration yourself.\n\n```jsx\n<PerspectiveCamera manual aspect={...} onUpdate={(c) => c.updateProjectionMatrix()}>\n```\n\n#### OrthographicCamera\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-orthographiccamera--orthographic-camera-scene-st)\n\nA responsive [THREE.OrthographicCamera](https://threejs.org/docs/index.html#api/en/cameras/OrthographicCamera) that can set itself as the default.\n\n```jsx\n<OrthographicCamera makeDefault {...props}>\n  <mesh />\n</OrthographicCamera>\n```\n\n#### CubeCamera\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/camera-cubecamera--default-story)\n\nA [THREE.CubeCamera](https://threejs.org/docs/index.html#api/en/cameras/CubeCamera) that returns its texture as a render-prop. It makes children invisible while rendering to the internal buffer so that they are not included in the reflection.\n\nUsing the `frames` prop you can control if this camera renders indefinitively or statically (a given number of times).\nIf you have two static objects in the scene, make it `frames={2}` for instance, so that both objects get to \"see\" one another in the reflections, which takes multiple renders.\nIf you have moving objects, unset the prop and use a smaller `resolution` instead.\n\n```jsx\n<CubeCamera resolution={256} frames={Infinity} fog={customFog} near={1} far={1000}>\n  {(texture) => (\n    <mesh>\n      <sphereGeometry />\n      <meshStandardMaterial envMap={texture} />\n    </mesh>\n  )}\n</CubeCamera>\n```\n\n# Controls\n\nIf available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls).\n\nSome controls allow you to set `makeDefault`, similar to, for instance, PerspectiveCamera. This will set react-three-fiber's `controls` field in the root store. This can make it easier in situations where you want controls to be known and other parts of the app could respond to it. Some drei controls already take it into account, like CameraShake, Gizmo and TransformControls.\n\nDrei currently exports OrbitControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-orbitcontrols--orbit-controls-story), MapControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-mapcontrols--map-controls-scene-st), TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-pointerlockcontrols--pointer-lock-controls-scene-st), FirstPersonControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-firstpersoncontrols--first-person-controls-story)\n\nAll controls react to the default camera. If you have a `<PerspectiveCamera makeDefault />` in your scene, they will control it. If you need to inject an imperative camera or one that isn't the default, use the `camera` prop: `<OrbitControls camera={MyCamera} />`.\n\nPointerLockControls additionally supports a `selector` prop, which enables the binding of `click` event handlers for control activation to other elements than `document` (e.g. a 'Click here to play' button). All elements matching the `selector` prop will activate the controls.\n\n# TransformControls\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-transformcontrols--transform-controls-story)\n\nAn abstraction around [THREE.TransformControls](https://threejs.org/docs/index.html?q=transfor#examples/en/controls/TransformControls).\n\nYou can wrap objects which then receive a transform gizmo.\n\n```jsx\n<TransformControls mode=\"translate\">\n  <mesh />\n</TransformControls>\n```\n\nYou could also reference the object which might make it easier to exchange the target. Now the object does not have to be part of the same sub-graph. References can be plain objects or React.MutableRefObjects.\n\n```jsx\n<TransformControls object={mesh} mode=\"translate\">\n<mesh ref={mesh} />\n```\n\nIf you are using other controls (Orbit, Trackball, etc), you will notice how they interfere, dragging one will affect the other. Default-controls will temporarily be disabled automatically when the user is pulling on the transform gizmo.\n\n```jsx\n<TransformControls mode=\"translate\" />\n<OrbitControls makeDefault />\n```\n\n# ScrollControls\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n<p align=\"center\">\n  <a href=\"https://codesandbox.io/s/l4klb\"><img width=\"16%\" src=\"https://codesandbox.io/api/v1/sandboxes/l4klb/screenshot.png\" alt=\"Horizontal tiles\"/></a>\n  <a href=\"https://codesandbox.io/s/4m0d0\"><img width=\"16%\" src=\"https://codesandbox.io/api/v1/sandboxes/4m0d0/screenshot.png\" alt=\"M1 scroll\"/></a>\n  <a href=\"https://codesandbox.io/s/gsm1y\"><img width=\"16%\" src=\"https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png\" alt=\"useIntersect\"/></a>\n  <a href=\"https://codesandbox.io/s/x8gvs\"><img width=\"16%\" src=\"https://codesandbox.io/api/v1/sandboxes/x8gvs/screenshot.png\" alt=\"Infinite scroll\"/></a>\n  <a href=\"https://codesandbox.io/s/yjhzv\"><img width=\"16%\" src=\"https://codesandbox.io/api/v1/sandboxes/yjhzv/screenshot.png\" alt=\"Vertical scroll\"/></a>\n  <a href=\"https://codesandbox.io/s/4jr4p\"><img width=\"16%\" src=\"https://codesandbox.io/api/v1/sandboxes/4jr4p/screenshot.png\" alt=\"GLTF and useScroll\"/></a>\n</p>\n\nScroll controls create a HTML scroll container in front of the canvas. Everything you drop into the `<Scroll>` component will be affected.\n\nYou can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.\n\n```jsx\n<ScrollControls\n  pages={3} // Each page takes 100% of the height of the canvas\n  distance={1} // A factor that increases scroll bar travel (default: 1)\n  damping={4} // Friction, higher is faster (default: 4)\n  horizontal={false} // Can also scroll horizontally (default: false)\n  infinite={false} // Can also scroll infinitely (default: false)\n>\n  {/* You can have components in here, they are not scrolled, but they can still\n      react to scroll by using useScroll! */}\n  <Scroll>\n    <Foo position={[0, 0, 0]} />\n    <Foo position={[0, viewport.height, 0]} />\n    <Foo position={[0, viewport.height * 1, 0]} />\n  </Scroll>\n  <Scroll html>\n    <h1>html in here (optional)</h1>\n    <h1 style={{ top: '100vh' }}>second page</h1>\n    <h1 style={{ top: '200vh' }}>third page</h1>\n  </Scroll>\n</ScrollControls>\n\nfunction Foo(props) {\n  const ref = useRef()\n  const data = useScroll()\n  useFrame(() => {\n    // data.offset = current scroll position, between 0 and 1, dampened\n    // data.delta = current delta, between 0 and 1, dampened\n\n    // Will be 0 when the scrollbar is at the starting position,\n    // then increase to 1 until 1 / 3 of the scroll distance is reached\n    const a = data.range(0, 1 / 3)\n    // Will start increasing when 1 / 3 of the scroll distance is reached,\n    // and reach 1 when it reaches 2 / 3rds.\n    const b = data.range(1 / 3, 1 / 3)\n        // Same as above but with a margin of 0.1 on both ends\n    const c = data.range(1 / 3, 1 / 3, 0.1)\n    // Will move between 0-1-0 for the selected range\n    const d = data.curve(1 / 3, 1 / 3)\n    // Same as above, but with a margin of 0.1 on both ends\n    const d = data.curve(1 / 3, 1 / 3, 0.1)\n    // Returns true if the offset is in range and false if it isn't\n    const e = data.visible(2 / 3, 1 / 3)\n    // The visible function can also receive a margin\n    const f = data.visible(2 / 3, 1 / 3, 0.1)\n  })\n  return <mesh ref={ref} {...props} />\n```\n\n# PresentationControls\n\n![](https://img.shields.io/badge/-Dom only-red)\n\nSemi-OrbitControls with spring-physics, polar zoom and snap-back, for presentational purposes. These controls do not turn the camera but will spin their contents. They will not suddenly come to rest when they reach limits like OrbitControls do, but rather smoothly anticipate stopping position.\n\n```jsx\n<PresentationControls\n  global={false} // Spin globally or by dragging the model\n  cursor={true} // Whether to toggle cursor style on drag\n  snap={false} // Snap-back to center (can also be a spring config)\n  speed={1} // Speed factor\n  zoom={1} // Zoom factor when half the polar-max is reached\n  rotation={[0, 0, 0]} // Default rotation\n  polar={[0, Math.PI / 2]} // Vertical limits\n  azimuth={[-Infinity, Infinity]} // Horizontal limits\n  config = { mass: 1, tension: 170, friction: 26 } // Spring config\n>\n  <mesh />\n</PresentationControls>\n```\n\n# Shapes\n\n[Buffer-geometry](https://threejs.org/docs/index.html#api/en/core/BufferGeometry) short-cuts for Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe.\n\n```jsx\n<Plane args={[2, 2]} />\n<Sphere>\n  <meshBasicMaterial attach=\"material\" color=\"hotpink\" />\n</Sphere>\n```\n\n#### RoundedBox\n\nA box buffer geometry with rounded corners, done with extrusion.\n\n```jsx\n<RoundedBox args={[1, 1, 1]} radius={0.05} smoothness={4} {...meshProps}>\n  <meshPhongMaterial attach=\"material\" color=\"#f3f3f3\" wireframe />\n</RoundedBox>\n```\n\n#### ScreenQuad\n\n```jsx\n<ScreenQuad>\n  <myMaterial />\n</ScreenQuad>\n```\n\nA triangle that fills the screen, ideal for full-screen fragment shader work (raymarching, postprocessing).\n👉 [Why a triangle?](https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html)\n👉 [Use as a post processing mesh](https://medium.com/@luruke/simple-postprocessing-in-three-js-91936ecadfb7)\n\n# Abstractions\n\n#### Image\n\nA shader-based image component with auto-cover (similar to css/background: cover).\n\n```jsx\nfunction Foo() {\n  const ref = useRef()\n  useFrame(() => {\n    ref.current.material.zoom = ... // 1 and higher\n    ref.current.material.grayscale = ... // between 0 and 1\n    ref.current.material.color.set(...) // mix-in color\n  })\n  return <Image ref={ref} url=\"/file.jpg\" />\n```\n\n#### Text\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st)\n\nHi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using [troika-3d-text](https://github.com/protectwise/troika/tree/master/packages/troika-3d-text). All of troikas props are valid!\n\n```jsx\n<Text color=\"black\" anchorX=\"center\" anchorY=\"middle\">\n  hello world!\n</Text>\n```\n\n#### Line\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--basic-line)\n\nRenders a THREE.Line2.\n\n```jsx\n<Line\n  points={[[0, 0, 0], ...]}       // Array of points\n  color=\"black\"                   // Default\n  lineWidth={1}                   // In pixels (default)\n  dashed={false}                  // Default\n  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point\n  {...lineProps}                  // All THREE.Line2 props are valid\n  {...materialProps}              // All THREE.LineMaterial props are valid\n/>\n```\n\n#### QuadraticBezierLine\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--quadratic-bezier)\n\nRenders a THREE.Line2 using THREE.QuadraticBezierCurve3 for interpolation.\n\n```jsx\n<QuadraticBezierLine\n  start={[0, 0, 0]}               // Starting point, can be an array or a vec3\n  end={[10, 0, 10]}               // Ending point, can be an array or a vec3\n  mid={[5, 0, 5]}                 // Optional control point, can be an array or a vec3\n  color=\"black\"                   // Default\n  lineWidth={1}                   // In pixels (default)\n  dashed={false}                  // Default\n  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point\n  {...lineProps}                  // All THREE.Line2 props are valid\n  {...materialProps}              // All THREE.LineMaterial props are valid\n/>\n```\n\nYou can also update the line runtime.\n\n```jsx\nconst ref = useRef()\nuseFrame((state) => {\n  ref.current.setPoints(\n    [0, 0, 0],\n    [10, 0, 0],\n    // [5, 0, 0] // Optional: mid-point\n  )\n}, [])\nreturn <QuadraticBezierLine ref={ref} />\n}\n```\n\n#### CubicBezierLine\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--cubic-bezier)\n\nRenders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.\n\n```jsx\n<CubicBezierLine\n  start={[0, 0, 0]}               // Starting point\n  end={[10, 0, 10]}               // Ending point\n  midA={[5, 0, 0]}                // First control point\n  midB={[0, 0, 5]}                // Second control point\n  color=\"black\"                   // Default\n  lineWidth={1}                   // In pixels (default)\n  dashed={false}                  // Default\n  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point\n  {...lineProps}                  // All THREE.Line2 props are valid\n  {...materialProps}              // All THREE.LineMaterial props are valid\n/>\n```\n\n#### PositionalAudio\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-positionalaudio--positional-audio-scene-st) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\nA wrapper around [THREE.PositionalAudio](https://threejs.org/docs/index.html#api/en/audio/PositionalAudio). Add this to groups or meshes to tie them to a sound that plays when the camera comes near.\n\n```jsx\n<PositionalAudio\n  url=\"/sound.mp3\"\n  distance={1}\n  loop\n  {...props} // All THREE.PositionalAudio props are valid\n/>\n```\n\n#### Billboard\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-billboard--billboard-st)\n\nAdds a `<group />` that always faces the camera.\n\n```jsx\n<Billboard\n  follow={true}\n  lockX={false}\n  lockY={false}\n  lockZ={false} // Lock the rotation on the z axis (default=false)\n>\n  <Text fontSize={1}>I'm a billboard</Text>\n</Billboard>\n```\n\n#### GizmoHelper\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/gizmos-gizmohelper--default-story)\n\nUsed by widgets that visualize and control camera position.\n\nTwo example gizmos are included: GizmoViewport and GizmoViewcube, and `useGizmoContext` makes it easy to create your own.\n\nMake sure to set the `makeDefault` prop on your controls, in that case you do not have to define the onTarget and onUpdate props.\n\n```jsx\n<GizmoHelper\n  alignment=\"bottom-right\" // widget alignment within scene\n  margin={[80, 80]} // widget margins (X, Y)\n  onUpdate={/* called during camera animation  */}\n  onTarget={/* return current camera target (e.g. from orbit controls) to center animation */}\n  renderPriority={/* use renderPriority to prevent the helper from disappearing if there is another useFrame(..., 1)*/}\n>\n  <GizmoViewport axisColors={['red', 'green', 'blue']} labelColor=\"black\" />\n  {/* alternative: <GizmoViewcube /> */}\n</GizmoHelper>\n```\n\n#### Effects\n\nAbstraction around threes own [EffectComposer](https://threejs.org/docs/index.html#examples/en/postprocessing/EffectComposer).\n\n```jsx\n<Effects multisamping={8} renderIndex={1} disableGamma={false} disableRenderPass={false}>\n  <lUTPass attachArray=\"passes\" lut={texture3D} />\n</Effects>\n```\n\n#### GradientTexture\n\nA declarative THREE.Texture which attaches to \"map\" by default. You can use this to create gradient backgrounds.\n\n```jsx\n<mesh>\n  <planeGeometry />\n  <meshBasicMaterial depthWrite={false}>\n    <GradientTexture\n      stops={[0, 1]} // As many stops as you want\n      colors={['aquamarine', 'hotpink']} // Colors need to match the number of stops\n      size={1024} // Size is optional, default = 1024\n    />\n  </meshBasicMaterial>\n</mesh>\n```\n\n#### Edges\n\nAbstracts [THREE.EdgesGeometry](https://threejs.org/docs/index.html?q=EdgesGeometry#api/en/geometries/EdgesGeometry). It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a `geometry` prop. You can give it children, for instance a custom material.\n\n```jsx\n<mesh>\n  <boxGeometry />\n  <meshBasicMaterial />\n  <Edges\n    scale={1.1}\n    threshold={15} // Display edges only when the angle between two faces exceeds this value (default=15 degrees)\n    color=\"white\"\n  />\n</mesh>\n```\n\n#### useAnimations\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)\n\nA hook that abstracts [AnimationMixer](https://threejs.org/docs/index.html#api/en/animation/AnimationMixer).\n\n```jsx\nconst { nodes, materials, animations } = useGLTF(url)\nconst { ref, mixer, names, actions, clips } = useAnimations(animations)\nuseEffect(() => {\n  actions?.jump.play()\n})\nreturn (\n  <mesh ref={ref} />\n```\n\nThe hook can also take a pre-existing root (which can be a plain object3d or a reference to one):\n\n```jsx\nconst { scene, animations } = useGLTF(url)\nconst { actions } = useAnimations(animations, scene)\nreturn <primitive object={scene} />\n```\n\n# Shaders\n\n#### MeshReflectorMaterial\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-meshreflectormaterial--reflector-st)\n\nEasily add reflections and/or blur to any mesh. It takes surface roughness into account for a more realistic effect. This material extends from [THREE.MeshStandardMaterial](https://threejs.org/docs/index.html?q=meshsta#api/en/materials/MeshStandardMaterial) and accepts all its props.\n\n```jsx\n<mesh>\n  <planeGeometry />\n  <MeshReflectorMaterial\n    blur={[0, 0]} // Blur ground reflections (width, heigt), 0 skips blur\n    mixBlur={0} // How much blur mixes with surface roughness (default = 1)\n    mixStrength={1} // Strength of the reflections\n    mixContrast={1} // Contrast of the reflections\n    resolution={256} // Off-buffer resolution, lower=faster, higher=better quality, slower\n    mirror={0} // Mirror environment, 0 = texture colors, 1 = pick up env colors\n    depthScale={0} // Scale the depth factor (0 = no depth, default = 0)\n    minDepthThreshold={0.9} // Lower edge for the depthTexture interpolation (default = 0)\n    maxDepthThreshold={1} // Upper edge for the depthTexture interpolation (default = 0)\n    depthToBlurRatioBias={0.25} // Adds a bias factor to the depthTexture before calculating the blur amount [blurFactor = blurTexture * (depthTexture + bias)]. It accepts values between 0 and 1, default is 0.25. An amount > 0 of bias makes sure that the blurTexture is not too sharp because of the multiplication with the depthTexture\n    distortion={1} // Amount of distortion based on the distortionMap texture\n    distortionMap={distortionTexture} // The red channel of this texture is used as the distortion map. Default is null\n    debug={0} /* Depending on the assigned value, one of the following channels is shown:\n      0 = no debug\n      1 = depth channel\n      2 = base channel\n      3 = distortion channel\n      4 = lod channel (based on the roughness)\n    */\n  >\n</mesh>\n```\n\n#### MeshWobbleMaterial\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-meshwobblematerial--mesh-wobble-material-st)\n\nThis material makes your geometry wobble and wave around. It was taken from the [threejs-examples](https://threejs.org/examples/#webgl_materials_modified) and adapted into a self-contained material.\n\n```jsx\n<mesh>\n  <boxBufferGeometry attach=\"geometry\" />\n  <MeshWobbleMaterial attach=\"material\" factor={1} speed={10} />\n</mesh>\n```\n\n#### MeshDistortMaterial\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-meshdistortmaterial--mesh-distort-material-st)\n\nThis material makes your geometry distort following simplex noise.\n\n```jsx\n<mesh>\n  <boxBufferGeometry attach=\"geometry\" />\n  <MeshDistortMaterial attach=\"material\" distort={1} speed={10} />\n</mesh>\n```\n\n#### PointMaterial\n\nAn antialiased round dot that always keeps the same size.\n\n```jsx\n<points>\n  <PointMaterial scale={20} />\n</points>\n```\n\n#### softShadows\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-softshadows--soft-shadows-st)\n\nInjects [percent closer soft shadows (pcss)](https://threejs.org/examples/?q=pcss#webgl_shadowmap_pcss) into threes shader chunk.\n\n```jsx\nsoftShadows({\n  frustum: 3.75,\n  size: 0.005,\n  near: 9.5,\n  samples: 17,\n  rings: 11, // Rings (default: 11) must be a int\n})\n```\n\n#### shaderMaterial\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-shadermaterial--shader-material-story)\n\nCreates a THREE.ShaderMaterial for you with easier handling of uniforms, which are also automatically declared as setter/getters on the object.\n\n```jsx\nimport { extend } from 'react-three-fiber'\nimport glsl from 'babel-plugin-glsl/macro'\n\nconst ColorShiftMaterial = shaderMaterial(\n  { time: 0, color: new THREE.Color(0.2, 0.0, 0.1) },\n  // vertex shader\n  glsl`\n    varying vec2 vUv;\n    void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  // fragment shader\n  glsl`\n    uniform float time;\n    uniform vec3 color;\n    varying vec2 vUv;\n    void main() {\n      gl_FragColor.rgba = vec4(0.5 + 0.3 * sin(vUv.yxx + time) + color, 1.0);\n    }\n  `\n)\n\nextend({ ColorShiftMaterial })\n\n// in your component\n<mesh>\n  <colorShiftMaterial attach=\"material\" color=\"hotpink\" time={1} />\n</mesh>\n```\n\n# Modifiers\n\n#### CurveModifier\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/modifiers-curvemodifier)\n\nGiven a curve will replace the children of this component with a mesh that move along said curve calling the property `moveAlongCurve` on the passed ref. Uses [three's Curve Modifier](https://threejs.org/examples/?q=curve#webgl_modifier_curve)\n\n```jsx\nconst curveRef = useRef()\n\nconst curve = React.useMemo(() => new THREE.CatmullRomCurve3([...handlePos], true, 'centripetal'), [handlePos])\n\nreturn (\n  <CurveModifier ref={curveRef} curve={curve}>\n    <mesh>\n      <boxBufferGeometry args={[10, 10]} />\n    </mesh>\n  </CurveModifier>\n)\n```\n\n# Misc\n\n#### useContextBridge\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-usecontextbridge--use-context-bridge-st)\n\nAllows you to forward contexts provided above the `<Canvas />` to be consumed from within the `<Canvas />` normally\n\n```jsx\nfunction SceneWrapper() {\n  // bridge any number of contexts\n  // Note: These contexts must be provided by something above this SceneWrapper component\n  //       You cannot render the providers for these contexts inside this component\n  const ContextBridge = useContextBridge(ThemeContext, GreetingContext)\n  return (\n    <Canvas>\n      <ContextBridge>\n        <Scene />\n      </ContextBridge>\n    </Canvas>\n  )\n}\n\nfunction Scene() {\n  // we can now consume a context within the Canvas\n  const theme = React.useContext(ThemeContext)\n  const greeting = React.useContext(GreetingContext)\n  return (\n    //...\n  )\n}\n```\n\n#### Html\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-html--html-st) ![](https://img.shields.io/badge/-Dom only-red)\n\nAllows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically.\n\n```jsx\n<Html\n  as='div' // Wrapping element (default: 'div')\n  wrapperClass // The className of the wrapping element (default: undefined)\n  prepend // Project content behind the canvas (default: false)\n  center // Adds a -50%/-50% css transform (default: false) [ignored in transform mode]\n  fullscreen // Aligns to the upper-left corner, fills the screen (default:false) [ignored in transform mode]\n  distanceFactor={10} // If set (default: undefined), children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by a OrthographicCamera.\n  zIndexRange={[100, 0]} // Z-order range (default=[16777271, 0])\n  portal={domnodeRef} // Reference to target container (default=undefined)\n  transform // If true, applies matrix3d transformations (default=false)\n  sprite // Renders as sprite, but only in transform mode (default=false)\n  calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]\n  occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined)\n  onOcclude={(visible) => null} // Callback when the visibility changes (default: undefined)\n  {...groupProps} // All THREE.Group props are valid\n  {...divProps} // All HTMLDivElement props are valid\n>\n  <h1>hello</h1>\n  <p>world</p>\n</Html>\n```\n\nHtml can hide behind geometry using the `occlude` prop.\n\n```jsx\n// Raytrace the entire scene\n<Html occlude />\n// Raytrace only specific elements\n<Html occlude={[ref1, ref2]} />\n```\n\nWhen the Html object hides it sets the opacity prop on the innermost div. If you want to animate or control the transition yourself then you can use `onOcclude`.\n\n```jsx\nconst [hidden, set] = useState()\n\n<Html\n  occlude\n  onOcclude={set}\n  style={{\n    transition: 'all 0.5s',\n    opacity: hidden ? 0 : 1,\n    transform: `scale(${hidden ? 0.5 : 1})`\n  }} />\n```\n\n#### CycleRaycast\n\n![](https://img.shields.io/badge/-Dom only-red)\n\nThis component allows you to cycle through all objects underneath the cursor with optional visual feedback. This can be useful for non-trivial selection, CAD data, housing, everything that has layers. It does this by changing the raycasters filter function and then refreshing the raycaster.\n\nFor this to work properly your event handler have to call `event.stopPropagation()`, for instance in `onPointerOver` or `onClick`, only one element can be selective for cycling to make sense.\n\n```jsx\n<CycleRaycast\n  preventDefault={true} // Call event.preventDefault() (default: true)\n  scroll={true} // Wheel events (default: true)\n  keyCode={9} // Keyboard events (default: 9 [Tab])\n  onChanged={(objects, cycle) => console.log(objects, cycle)} // Optional onChanged event\n/>\n```\n\n#### Select\n\n![](https://img.shields.io/badge/-Dom only-red)\n\nThis component allows you to select/unselect objects by clicking on them. It keeps track of the currently selected objects and can select multiple objects (with the shift key). Nested components can request the current selection (which is always an array) with the `useSelect` hook. With the `box` prop it will let you shift-box-select objects by holding and draging the cursor over multiple objects. Optionally you can filter the selected items as well as define in which shape they are stored by defining the `filter` prop.\n\n```jsx\n<Select box multiple onChange={console.log} filter={items => items}>\n  <Foo />\n  <Bar />\n</Select>\n\nfunction Foo() {\n  const selected = useSelect()\n```\n\n#### Stats\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-stats--default-story)\n\nAdds [stats](https://github.com/mrdoob/stats.js/) to document.body. It takes over the render-loop!\n\n```jsx\n<Stats showPanel={0} className=\"stats\" {...props} />\n```\n\nYou can choose to mount Stats to a different DOM Element - for example, for custom styling:\n\n```jsx\nconst node = useRef(document.createElement('div'))\n\nuseEffect(() => {\n  node.current.id = 'test'\n  document.body.appendChild(node.current)\n\n  return () => document.body.removeChild(node.current)\n}, [])\n\nreturn <Stats parent={parent} />\n```\n\n#### useDepthBuffer\n\nRenders the scene into a depth-buffer. Often effects depend on it and this allows you to render a single buffer and share it, which minimizes the performance impact. It returns the buffer's `depthTexture`.\n\nSince this is a rather expensive effect you can limit the amount of frames it renders when your objects are static. For instance making it render only once by setting `frames: 1`.\n\n```jsx\nconst depthBuffer = useDepthBuffer({\n  size: 256, // Size of the FBO, 256 by default\n  frames: Infinity, // How many frames it renders, Infinity by default\n})\nreturn <SomethingThatNeedsADepthBuffer depthBuffer={depthBuffer} />\n```\n\n#### useFBO\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usefbo--use-fbo-st)\n\nCreates a `THREE.WebGLRenderTarget` or `THREE.WebGLMultisampleRenderTarget`.\n\n```jsx\nconst target = useFBO({\n  multisample: true,\n  stencilBuffer: false,\n})\n```\n\nThe rendertarget is automatically disposed when unmounted.\n\n#### useCamera\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usecamera--use-camera-st)\n\nA hook for the rare case when you are using non-default cameras for heads-up-displays or portals, and you need events/raytracing to function properly (raycasting uses the default camera otherwise).\n\n```jsx\n<mesh raycast={useCamera(customCamera)} />\n```\n\n#### useHelper\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usehelper--default-story)\n\nA hook for a quick way to add helpers to existing nodes in the scene. It handles removal of the helper on unmount and auto-updates it by default.\n\n```jsx\nconst mesh = useRef()\nuseHelper(mesh, BoxHelper, 'cyan')\n\n<mesh ref={mesh} ... />\n```\n\n#### useDetectGPU\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-usedetectgpu)\n\nThis hook uses [DetectGPU by @TimvanScherpenzeel](https://github.com/TimvanScherpenzeel/detect-gpu), wrapped into suspense, to determine what tier should be assigned to the user's GPU.\n\n👉 This hook CAN be used outside the react-three-fiber `Canvas`.\n\n```jsx\nfunction App() {\n  const GPUTier = useDetectGPU()\n  // show a fallback for mobile or lowest tier GPUs\n  return (\n    {(GPUTier.tier === \"0\" || GPUTier.isMobile) ? <Fallback /> : <Canvas>...</Canvas>\n\n<Suspense fallback={null}>\n  <App />\n```\n\n#### useAspect\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-useaspect--default-story)\n\nThis hook calculates aspect ratios (for now only what in css would be `image-size: cover` is supported). You can use it to make an image fill the screen. It is responsive and adapts to viewport resize. Just give the hook the image bounds in pixels. It returns an array: `[width, height, 1]`.\n\n```jsx\nconst scale = useAspect(\n  1024,                     // Pixel-width\n  512,                      // Pixel-height\n  1                         // Optional scaling factor\n)\nreturn (\n  <mesh scale={scale}>\n    <planeBufferGeometry />\n    <meshBasicMaterial map={imageTexture} />\n```\n\n#### useCursor\n\n![](https://img.shields.io/badge/-Dom only-red)\n\nA small hook that sets the css body cursor according to the hover state of a mesh, so that you can give the use visual feedback when the mouse enters a shape. Arguments 1 and 2 determine the style, the defaults are: onPointerOver = 'pointer', onPointerOut = 'auto'.\n\n```jsx\nconst [hovered, set] = useState()\nuseCursor(hovered, /*'pointer', 'auto'*/)\nreturn (\n  <mesh onPointerOver={() => set(true)} onPointerOut={() => set(false)}>\n```\n\n#### useIntersect\n\nA very cheap frustum check that gives you a reference you can observe in order to know if the object has entered the view or is outside of it. This relies on [THREE.Object3D.onBeforeRender](https://threejs.org/docs/index.html?q=obj#api/en/core/Object3D.onBeforeRender) so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on groups, object3d's, bones, etc.\n\n```jsx\nconst ref = useIntersect((visible) => console.log('object is visible', visible))\nreturn <mesh ref={ref} />\n```\n\n# Loading\n\n#### Loader\n\n![](https://img.shields.io/badge/-Dom only-red)\n\nA quick and easy loading overlay component that you can drop on top of your canvas. It's intended to \"hide\" the whole app, so if you have multiple suspense wrappers in your application, you should use multiple loaders. It will show an animated loadingbar and a percentage.\n\n```jsx\n<Canvas>\n  <Suspense fallback={null}>\n    <AsyncModels />\n  </Suspense>\n</Canvas>\n<Loader />\n```\n\nYou can override styles, too.\n\n```jsx\n<Loader\n  containerStyles={...container} // Flex layout styles\n  innerStyles={...inner} // Inner container styles\n  barStyles={...bar} // Loading-bar styles\n  dataStyles={...data} // Text styles\n  dataInterpolation={(p) => `Loading ${p.toFixed(2)}%`} // Text\n  initialState={(active) => active} // Initial black out state\n>\n```\n\n#### useProgress\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-useprogress--use-progress-scene-st)\n\nA convenience hook that wraps `THREE.DefaultLoadingManager`'s progress status.\n\n```jsx\nfunction Loader() {\n  const { active, progress, errors, item, loaded, total } = useProgress()\n  return <Html center>{progress} % loaded</Html>\n}\n\nreturn (\n  <Suspense fallback={<Loader />}>\n    <AsyncModels />\n  </Suspense>\n)\n```\n\nIf you don't want your progress component to re-render on all changes you can be specific as to what you need, for instance if the component is supposed to collect errors only. Look into [zustand](https://github.com/react-spring/zustand) for more info about selectors.\n\n```jsx\nconst errors = useProgress((state) => state.errors)\n```\n\n👉 Note that your loading component does not have to be a suspense fallback. You can use it anywhere, even in your dom tree, for instance for overlays.\n\n#### useGLTF\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-gltf)\n\nA convenience hook that uses `useLoader` and `GLTFLoader`, it defaults to CDN loaded draco binaries (`https://www.gstatic.com/draco/v1/decoders/`) which are only loaded for compressed models.\n\n```jsx\nuseGLTF(url)\n\nuseGLTF(url, '/draco-gltf')\n\nuseGLTF.preload(url)\n```\n\n#### useFBX\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-fbx)\n\nA convenience hook that uses `useLoader` and `FBXLoader`:\n\n```jsx\nuseFBX(url)\n\nfunction SuzanneFBX() {\n  let fbx = useFBX('suzanne/suzanne.fbx')\n  return <primitive object={fbx} dispose={null} />\n}\n```\n\n#### useTexture\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-texture)\n\nA convenience hook that uses `useLoader` and `TextureLoader`\n\n```jsx\nconst texture = useTexture(url)\nconst [texture1, texture2] = useTexture([texture1, texture2])\n```\n\nYou can also use key: url objects:\n\n```jsx\nconst props = useTexture({\n  metalnessMap: url1,\n  map: url2,\n})\nreturn <meshStandardMaterial {...props} />\n```\n\n#### useKTX2\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-ktx2--use-ktx-2-scene-st)\n\nA convenience hook that uses `useLoader` and `KTX2Loader`\n\n```jsx\nconst texture = useKTX2(url)\nconst [texture1, texture2] = useKTX2([texture1, texture2])\n\nreturn <meshStandardMaterial map={texture} />\n```\n\n#### useCubeTexture\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-cubetexture)\n\nA convenience hook that uses `useLoader` and `CubeTextureLoader`\n\n```jsx\nconst envMap = useCubeTexture(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'], { path: 'cube/' })\n```\n\n# Performance\n\n#### Instances\n\nA wrapper around [THREE.InstancedMesh](https://threejs.org/docs/index.html?q=instan#api/en/objects/InstancedMesh). This allows you to define hundreds of thousands of objects in a single draw call, but declaratively!\n\n```jsx\n<Instances\n  limit={1000} // Optional: max amount of items (for calculating buffer size)\n  range={1000} // Optional: draw-range\n>\n  <boxGeometry />\n  <meshStandardMaterial />\n  <Instance\n    color=\"red\"\n    scale={2}\n    position={[1, 2, 3]}\n    rotation={[Math.PI / 3, 0, 0]}\n    onClick={onClick} ... />\n  // As many as you want, make them conditional, mount/unmount them, lazy load them, etc ...\n</Instances>\n```\n\nYou can nest Instances and use relative coordinates!\n\n```jsx\n<group position={[1, 2, 3]} rotation={[Math.PI / 2, 0, 0]}>\n  <Instance />\n</group>\n```\n\nInstances can also receive non-instanced objects, for instance annotations!\n\n```jsx\n<Instance>\n  <Html>hello from the dom</Html>\n</Instance>\n```\n\nYou can define events on them!\n\n```jsx\n<Instance onClick={...} onPointerOver={...} />\n```\n\n#### Merged\n\nThis creates instances for existing meshes and allows you to use them cheaply in the same scene graph. Each type will cost you exactly one draw call, no matter how many you use. `meshes` has to be a collection of pre-existing THREE.Mesh objects.\n\n```jsx\n<Merged meshes={[box, sphere]}>\n  {(Box, Sphere) => (\n    <>\n      <Box position={[-2, -2, 0]} color=\"red\" />\n      <Box position={[-3, -3, 0]} color=\"tomato\" />\n      <Sphere scale={0.7} position={[2, 1, 0]} color=\"green\" />\n      <Sphere scale={0.7} position={[3, 2, 0]} color=\"teal\" />\n    </>\n  )}\n</Merged>\n```\n\nYou may also use object notation, which is good for loaded models.\n\n```jsx\nfunction Model({ url }) {\n  const { nodes } = useGLTF(url)\n  return (\n    <Merged meshes={nodes}>\n      {({ Screw, Filter, Pipe }) => (\n        <>\n          <Screw />\n          <Filter position={[1, 2, 3]} />\n          <Pipe position={[4, 5, 6]} />\n        </>\n      )}\n    </Merged>\n  )\n}\n```\n\n#### Points\n\nA wrapper around [THREE.Points](https://threejs.org/docs/index.html?q=points#api/en/objects/Points). It has the same api and properties as Instances.\n\n```jsx\n<Points\n  limit={1000} // Optional: max amount of items (for calculating buffer size)\n  range={1000} // Optional: draw-range\n>\n  <pointsMaterial />\n  <Point position={[1, 2, 3]} color=\"red\" onClick={onClick} onPointerOver={onPointerOver} ... />\n  // As many as you want, make them conditional, mount/unmount them, lazy load them, etc ...\n</Points>\n```\n\nIf you have a material that supports vertex colors (like drei/PointMaterial) you can have individual colors!\n\n```jsx\n<Points>\n  <PointMaterial />\n  <Point color=\"hotpink\" />\n```\n\nOtherwise use any material you like:\n\n```jsx\n<Points>\n  <pointsMaterial vertexColors size={10} />\n```\n\nIf you just want to use buffers for position, color and size, you can use the alternative API:\n\n```jsx\n<Points positions={positionsBuffer} colors={colorsBuffer} sizes={sizesBuffer}>\n  <pointsMaterial />\n</Points>\n```\n\n#### Segments\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/performance-segments--many-segments)\n\nA wrapper around [THREE.LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments). This allows you to use thousands of segments under the same geometry.\n\n##### Prop based:\n\n```jsx\n<Segments limit={1000} lineWidth={1.0}>\n  <Segment start={[0, 0, 0]} end={[0, 10, 0]} color=\"red\" />\n  <Segment start={[0, 0, 0]} end={[0, 10, 10]} color={[1, 0, 1]} />\n</Segments>\n```\n\n##### Ref based (for fast updates):\n\n```jsx\nconst ref = useRef()\n\n// E.g. to change segment position each frame.\nuseFrame(() => {\n  ref.current.start.set(0,0,0)\n  ref.current.end.set(10,10,0)\n  ref.current.color.setRGB(0,0,0)\n})\n// ...\n<Segments\n  limit={1000}\n  lineWidth={1.0}\n>\n  <Segment ref={ref} />\n</Segments>\n```\n\n#### Detailed\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-detailed--detailed-st)\n\nA wrapper around [THREE.LOD](https://threejs.org/docs/index.html#api/en/objects/LOD) (Level of detail).\n\n```jsx\n<Detailed distances={[0, 10, 20]} {...props}>\n  <mesh geometry={highDetail} />\n  <mesh geometry={mediumDetail} />\n  <mesh geometry={lowDetail} />\n</Detailed>\n```\n\n#### Preload\n\nThe WebGLRenderer will compile materials only when they hit the frustrum, which can cause jank. This component precompiles the scene using [gl.compile](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.compile) which makes sure that your app is responsive from the get go.\n\nBy default gl.compile will only preload visible objects, if you supply the `all` prop, it will circumvent that. With the `scene` and `camera` props you could also use it in portals.\n\n```jsx\n<Canvas>\n  <Suspense fallback={null}>\n    <Model />\n    <Preload all />\n```\n\n#### BakeShadows\n\nSets `gl.shadowMap.autoUpdate` to `false` while mounted and requests a single `gl.shadowMap.needsUpdate = true` afterwards. This freezes all shadow maps the moment this component comes in, which makes shadows performant again (with the downside that they are now static). Mount this component in lock-step with your models, for instance by dropping it into the same suspense boundary of a model that loads.\n\n```jsx\n<Canvas>\n  <Suspense fallback={null}>\n    <Model />\n    <BakeShadows />\n```\n\n#### meshBounds\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-meshbounds--mesh-bounds-st)\n\nA very fast, but often good-enough bounds-only raycast for meshes. You can use this if performance has precedence over pointer precision.\n\n```jsx\n<mesh raycast={meshBounds} />\n```\n\n#### AdaptiveDpr\n\nDrop this component into your scene and it will cut the pixel-ratio on [regress](#) according to the canvases perrformance min/max settings. This allows you to temporarily reduce visuals for more performance, for instance when the camera moves (look into drei's controls `regress` flag). Optionally you can set the canvas to a pixelated filter, which would be even faster.\n\n```jsx\n<AdaptiveDpr pixelated />\n```\n\n#### AdaptiveEvents\n\nDrop this component into your scene and it will switch off the raycaster while the system is in regress.\n\n```jsx\n<AdaptiveEvents />\n```\n\n#### useBVH\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/performance-usebvh--default-story)\n\nA hook to speed up the default raycasting by using the [BVH Implementation by @gkjohnnson](https://github.com/gkjohnson/three-mesh-bvh).\n\n```jsx\nconst mesh = useRef()\nuseBVH(mesh)\n\n<mesh ref={mesh} ... />\n```\n\n# Staging\n\n#### Center\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-center--default-story)\n\nCalculates a boundary box and centers its children accordingly. `alignTop` makes adjusts it so that it's sits flush on y=0.\n\n```jsx\n<Center alignTop>\n  <mesh />\n</Center>\n```\n\n#### Bounds\n\nCalculates a boundary box and centers the camera accordingly. If you are using controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes.\n\n```jsx\n<Bounds fit clip damping={6} margin={1.2}>\n  <mesh />\n</Bounds>\n```\n\nThe Bounds component also acts as a context provider, use the `useBounds` hook to refresh the bounds, fit the camera, clip near/far planes or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `clip` sets the cameras near/far planes. `fit` zooms and centers the view.\n\n```jsx\nfunction Foo() {\n  const bounds = useBounds()\n  useEffect(() => {\n    // Calculate scene bounds\n    bounds.refresh().clip().fit()\n    // Or, focus a specific object or box3\n    // bounds.refresh(ref.current).clip().fit()\n    // bounds.refresh(new THREE.Box3()).clip().fit()\n\n<Bounds>\n  <Foo />\n```\n\n#### CameraShake\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-camerashake--camera-shake-st)\n\nA component for applying a configurable camera shake effect. Currently only supports rotational camera shake. Pass a ref to recieve the `ShakeController` API.\n\nIf you use shake in combination with controls make sure to set the `makeDefault` prop on your controls, in that case you do not have to pass them via the `controls` prop.\n\n```js\nconst config = {\n  maxYaw: 0.1, // Max amount camera can yaw in either direction\n  maxPitch: 0.1, // Max amount camera can pitch in either direction\n  maxRoll: 0.1, // Max amount camera can roll in either direction\n  yawFrequency: 0.1, // Frequency of the the yaw rotation\n  pitchFrequency: 0.1, // Frequency of the pitch rotation\n  rollFrequency: 0.1, // Frequency of the roll rotation\n  intensity: 1, // initial intensity of the shake\n  decay: false, // should the intensity decay over time\n  decayRate: 0.65, // if decay = true this is the rate at which intensity will reduce at\n  controls: undefined, // if using orbit controls, pass a ref here so we can update the rotation\n}\n\n;<CameraShake {...config} />\n```\n\n```ts\ninterface ShakeController {\n  getIntensity: () => number\n  setIntensity: (val: number) => void\n}\n```\n\n#### Float\n\nThis component makes its contents float or hover.\n\n```js\n<Float\n  speed={1} // Animation speed, defaults to 1\n  rotationIntensity={1} // XYZ rotation intensity, defaults to 1\n  floatIntensity={1} // Up/down float intensity, defaults to 1\n>\n  <mesh />\n</Float>\n```\n\n#### Stage\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/prototyping-stage--stage-st)\n\nCreates a \"stage\" with proper studio lighting, content centered and planar, shadows and ground-contact shadows.\n\nMake sure to set the `makeDefault` prop on your controls, in that case you do not need to provide `controls` via prop.\n\n```jsx\n<Stage contactShadow shadows adjustCamera intensity={1} environment=\"city\" preset=\"rembrandt\" controls={controlsRef}>\n  <mesh />\n</Stage>\n```\n\n#### Backdrop\n\nA curved plane, like a studio backdrop. This is for presentational purposes, to break up light and shadows more interestingly.\n\n```jsx\n<Backdrop\n  floor={0.25} // Stretches the floor segment, 0.25 by default\n  segments={20} // Mesh-resolution, 20 by default\n>\n  <meshStandardMaterial color=\"#353540\" />\n</Backdrop>\n```\n\n#### Shadow\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-shadow--shadow-st)\n\nA cheap canvas-texture-based circular gradient.\n\n```jsx\n<Shadow\n  color=\"black\"\n  colorStop={0}\n  opacity={0.5}\n  fog={false} // Reacts to fog (default=false)\n/>\n```\n\n#### ContactShadows\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-contactshadows--contact-shadow-st)\n\nA [contact shadow](https://threejs.org/examples/?q=con#webgl_shadow_contact) implementation, facing upwards (positive Y) by default. `scale` can be a positive number or a 2D array `[x: number, y: number]`.\n\n```jsx\n<ContactShadows opacity={1} scale={10} blur={1} far={10} resolution={256} />\n```\n\nSince this is a rather expensive effect you can limit the amount of frames it renders when your objects are static. For instance making it render only once:\n\n```jsx\n<ContactShadows frames={1} />\n```\n\n#### SpotLight\n\nA Volumetric spotlight.\n\n```jsx\n<SpotLight\n  distance={5}\n  angle={0.15}\n  attenuation={5}\n  anglePower={5} // Diffuse-cone anglePower (default: 5)\n/>\n```\n\nOptionally you can provide a depth-buffer which converts the spotlight into a soft particle.\n\n```jsx\nfunction Foo() {\n  const depthBuffer = useDepthBuffer()\n  return <SpotLight depthBuffer={depthBuffer} />\n```\n\n#### Environment\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-environment--environment-st)\n\nSets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, unless a custom scene has been passed. A selection of [presets](src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience. If you pass an array of files it will use THREE.CubeTextureLoader.\n\n```jsx\n<Environment\n  background={false}\n  files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}\n  path=\"/\"\n  preset={null}\n  scene={undefined} // adds the ability to pass a custom THREE.Scene\n/>\n```\n\nIf you provide a single string it will use THREE.RGBELoader.\n\n```jsx\n<Environment files=\"file.hdr\" />\n```\n\n#### Sky\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-sky--sky-st)\n\nAdds a [sky](https://threejs.org/examples/webgl_shaders_sky.html) to your scene.\n\n```jsx\n<Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} {...props} />\n```\n\n#### Stars\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-stars--stars-st)\n\nAdds a blinking shader-based starfield to your scene.\n\n```jsx\n<Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade />\n```\n\n#### Cloud\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-cloud--cloud-st) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\nParticle based cloud.\n\n```jsx\n<Cloud\n  opacity={0.5}\n  speed={0.4} // Rotation speed\n  width={10} // Width of the full cloud\n  depth={1.5} // Z-dir depth\n  segments={20} // Number of particles\n/>\n```\n\n#### useMatcapTexture\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/prototyping-usematcaptexture) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\nLoads matcap textures from this repository: https://github.com/emmelleppi/matcaps\n\n(It is a fork of this repository: https://github.com/nidorx/matcaps)\n\n```jsx\nconst [matcap, url] = useMatcapTexture(\n 0, // index of the matcap texture https://github.com/emmelleppi/matcaps/blob/master/matcap-list.json\n 1024 // size of the texture ( 64, 128, 256, 512, 1024 )\n)\n\nreturn (\n ...\n <meshMatcapMaterial matcap={matcap} />\n ...\n)\n```\n\n👉 You can also use the exact name of the matcap texture, like so:\n\n```jsx\nconst [matcap] = useMatcapTexture('3E2335_D36A1B_8E4A2E_2842A5')\n```\n\n👉 Use the `url` to download the texture when you are ready for production!\n\n#### useNormalTexture\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/prototyping-usenormaltexture) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\nLoads normal textures from this repository: https://github.com/emmelleppi/normal-maps\n\n```jsx\nconst [normalMap, url] = useNormalTexture(\n  1, // index of the normal texture - https://github.com/emmelleppi/normal-maps/blob/master/normals.json\n  // second argument is texture attributes\n  {\n    offset: [0, 0],\n    repeat: [normRepeat, normRepeat],\n    anisotropy: 8\n  }\n)\n\nreturn (\n  ...\n  <meshStandardMaterial normalMap={normalMap} />\n  ...\n)\n```\n","readmeFilename":"README.md"}