{"id":15146630,"url":"https://github.com/bigmistqke/solid-drei","last_synced_at":"2025-10-15T02:59:37.092Z","repository":{"id":188723173,"uuid":"668397177","full_name":"bigmistqke/solid-drei","owner":"bigmistqke","description":"🥉 useful helpers for solid-three","archived":false,"fork":false,"pushed_at":"2025-09-16T09:57:49.000Z","size":26623,"stargazers_count":13,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"solid-drei","last_synced_at":"2025-09-29T15:42:12.496Z","etag":null,"topics":["drei","react-three-fiber","solid","solid-js","three","three-js","webgl","webxr"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"pmndrs/drei","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigmistqke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-19T17:54:15.000Z","updated_at":"2025-08-29T06:54:40.000Z","dependencies_parsed_at":"2023-08-18T01:01:28.074Z","dependency_job_id":"fa1ac5e5-d35a-4135-923e-4002dd4a7d9d","html_url":"https://github.com/bigmistqke/solid-drei","commit_stats":null,"previous_names":["bigmistqke/drei","bigmistqke/solid-drei"],"tags_count":784,"template":false,"template_full_name":null,"purl":"pkg:github/bigmistqke/solid-drei","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsolid-drei","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsolid-drei/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsolid-drei/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsolid-drei/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigmistqke","download_url":"https://codeload.github.com/bigmistqke/solid-drei/tar.gz/refs/heads/solid-drei","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigmistqke%2Fsolid-drei/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279040472,"owners_count":26090824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drei","react-three-fiber","solid","solid-js","three","three-js","webgl","webxr"],"created_at":"2024-09-26T12:03:23.674Z","updated_at":"2025-10-15T02:59:37.056Z","avatar_url":"https://github.com/bigmistqke.png","language":"JavaScript","readme":"\u003c!-- prettier-ignore --\u003e\n\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-drei\u0026background=tiles\u0026project=%20\" alt=\"solid-drei\"\u003e\n\u003c/p\u003e\n\n[![Version](https://img.shields.io/npm/v/solid-drei?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/solid-drei)\n[![Downloads](https://img.shields.io/npm/dt/solid-drei.svg?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/solid-drei)\n[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=discord\u0026logo=discord\u0026logoColor=ffffff)](https://discord.com/channels/740090768164651008/741751532592038022)\n[![Open in GitHub Codespaces](https://img.shields.io/static/v1?\u0026message=Open%20in%20%20Codespaces\u0026style=flat\u0026colorA=000000\u0026colorB=000000\u0026label=GitHub\u0026logo=github\u0026logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei)\n\n\u003e `solid-drei`: This is a WIP port of [drei](https://github.com/pmndrs/drei). Not published yet.\n\nA growing collection of useful helpers and fully functional, ready-made abstractions for [solid-three](https://github.com/solidjs-community/solid-three). If you make a component that is generic enough to be useful to others, think about [CONTRIBUTING](CONTRIBUTING.md)!\n\n```bash\nnpm install solid-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/master/examples/jsm). :point_left:\n\n### Basic usage:\n\n```jsx\nimport { PerspectiveCamera, PositionalAudio, ... } from 'solid-drei'\n```\n\n### Index\n\n\u003e `solid-three` all are ported, except `\u003cPresentationalControls/\u003e` and `useContextBridge`. checked equals tested with storybook.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd valign=\"top\"\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#cameras\"\u003eCameras\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#perspectivecamera\"\u003ePerspectiveCamera\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#orthographiccamera\"\u003eOrthographicCamera\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#cubecamera\"\u003eCubeCamera\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#controls\"\u003eControls\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#cameracontrols\"\u003eCameraControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003eFlyControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003eMapControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003eDeviceOrientationControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003eTrackballControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003eArcballControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003ePointerLockControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#controls\"\u003eFirstPersonControls\u003c/a\u003e\u003c/li\u003e          \n          \u003cli\u003e- [x] \u003ca href=\"#scrollcontrols\"\u003eScrollControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#presentationcontrols\"\u003ePresentationControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#keyboardcontrols\"\u003eKeyboardControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#FaceControls\"\u003eFaceControls\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#gizmos\"\u003eGizmos\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#gizmohelper\"\u003eGizmoHelper\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#pivotcontrols\"\u003ePivotControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#transformcontrols\"\u003eTransformControls\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#grid\"\u003eGrid\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usehelper\"\u003euseHelper\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#abstractions\"\u003eAbstractions\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#image\"\u003eImage\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#text\"\u003eText\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#text3d\"\u003eText3D\u003c/a\u003e\u003c/li\u003e          \n          \u003cli\u003e- [x] \u003ca href=\"#positionalaudio\"\u003ePositionalAudio\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#billboard\"\u003eBillboard\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#screenspace\"\u003eScreenSpace\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#effects\"\u003eEffects\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#gradienttexture\"\u003eGradientTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#edges\"\u003eEdges\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#trail\"\u003eTrail\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#sampler\"\u003eSampler\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#computedattribute\"\u003eComputed Attribute\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#clone\"\u003eClone\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#useanimations\"\u003euseAnimations\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#marchingcubes\"\u003eMarchingCubes\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#decal\"\u003eDecal\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#svg\"\u003eSvg\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#gltf\"\u003eGltf\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#asciirenderer\"\u003eAsciiRenderer\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#shaders\"\u003eShaders\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#meshreflectormaterial\"\u003eMeshReflectorMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#meshwobblematerial\"\u003eMeshWobbleMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#meshdistortmaterial\"\u003eMeshDistortMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#meshrefractionmaterial\"\u003eMeshRefractionMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#meshtransmissionmaterial\"\u003eMeshTransmissionMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#meshdiscardmaterial\"\u003eMeshDiscardMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#pointmaterial\"\u003ePointMaterial\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#softshadows\"\u003eSoftShadows\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shadermaterial\"\u003eshaderMaterial\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#misc\"\u003eMisc\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#example\"\u003eExample\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#html\"\u003eHtml\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#cycleraycast\"\u003eCycleRaycast\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#select\"\u003eSelect\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#sprite-animator\"\u003eSprite Animator\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#stats\"\u003eStats\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#stats-gl\"\u003eStatsGl\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#wireframe\"\u003eWireframe\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#usedepthbuffer\"\u003euseDepthBuffer\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#usecontextbridge\"\u003euseContextBridge\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usefbo\"\u003euseFBO\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usecamera\"\u003euseCamera\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usecubecamera\"\u003euseCubeCamera\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usedetectgpu\"\u003euseDetectGPU\u003c/a\u003e\u003c/li\u003e          \n          \u003cli\u003e- [x] \u003ca href=\"#useaspect\"\u003euseAspect\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usecursor\"\u003euseCursor\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#useintersect\"\u003euseIntersect\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#useboxprojectedenv\"\u003euseBoxProjectedEnv\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#useTrail\"\u003euseTrail\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#useSurfaceSampler\"\u003euseSurfaceSampler\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#facelandmarker\"\u003eFaceLandmarker\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#loading\"\u003eLoaders\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#loader\"\u003eLoader\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#useprogress\"\u003euseProgress\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usegltf\"\u003euseGLTF\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usefbx\"\u003euseFBX\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usetexture\"\u003euseTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usektx2\"\u003euseKTX2\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usecubetexture\"\u003euseCubeTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usevideotexture\"\u003euseVideoTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usetrailtexture\"\u003euseTrailTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usefont\"\u003euseFont\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#performance\"\u003ePerformance\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#instances\"\u003eInstances\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#merged\"\u003eMerged\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#points\"\u003ePoints\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#segments\"\u003eSegments\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#detailed\"\u003eDetailed\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#preload\"\u003ePreload\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#bakeshadows\"\u003eBakeShadows\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#meshbounds\"\u003emeshBounds\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#adaptivedpr\"\u003eAdaptiveDpr\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#adaptiveevents\"\u003eAdaptiveEvents\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#bvh\"\u003eBvh\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#performancemonitor\"\u003ePerformanceMonitor\u003c/a\u003e\u003c/li\u003e          \n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#portals\"\u003ePortals\u003c/a\u003e\u003c/li\u003e        \n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#hud\"\u003eHud\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#view\"\u003eView\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#rendertexture\"\u003eRenderTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#mask\"\u003eMask\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#meshportalmaterial\"\u003eMeshPortalMaterial\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#modifiers\"\u003eModifiers\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#curvemodifier\"\u003eCurveModifier\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#shapes\"\u003eShapes\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003ePlane\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eBox\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eSphere\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eCircle\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eCone\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eCylinder\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eTube\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eTorus\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eTorusKnot\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eRing\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eTetrahedron\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003ePolyhedron\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eIcosahedron\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eOctahedron\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eDodecahedron\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eExtrude\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eLathe\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shapes\"\u003eShape\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#roundedbox\"\u003eRoundedBox\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#screenquad\"\u003eScreenquad\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#line\"\u003eLine\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#quadraticbezierline\"\u003eQuadraticBezierLine\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#cubicbezierline\"\u003eCubicBezierLine\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#catmullromline\"\u003eCatmullRomLine\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#facemesh\"\u003eFacemesh\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#staging\"\u003eStaging\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#center\"\u003eCenter\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#resize\"\u003eResize\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#BBAnchor\"\u003eBBAnchor\u003c/a\u003e\u003c/li\u003e        \n          \u003cli\u003e- [x] \u003ca href=\"#bounds\"\u003eBounds\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#camerashake\"\u003eCameraShake\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#float\"\u003eFloat\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#stage\"\u003eStage\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#backdrop\"\u003eBackdrop\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#environment\"\u003eEnvironment\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [ ] \u003ca href=\"#lightformer\"\u003eLightformer\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#spotlight\"\u003eSpotLight\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#spotlightshadows\"\u003eSpotLightShadows\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#shadow\"\u003eShadow\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#caustics\"\u003eCaustics\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#contactshadows\"\u003eContactShadows\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#randomizedlight\"\u003eRandomizedLight\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#accumulativeshadows\"\u003eAccumulativeShadows\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#sky\"\u003eSky\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#stars\"\u003eStars\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#sparkles\"\u003eSparkles\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#cloud\"\u003eCloud\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#useenvironment\"\u003euseEnvironment\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usematcaptexture\"\u003euseMatcapTexture\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e- [x] \u003ca href=\"#usenormaltexture\"\u003euseNormalTexture\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\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\n```tsx\ntype Props = Omit\u003cThreeProps\u003c'PerspectiveCamera'\u003e, 'children'\u003e \u0026 {\n  /** Registers the camera as the system default, fiber will start rendering with it */\n  makeDefault?: boolean\n  /** Making it manual will stop responsiveness and you have to calculate aspect ratio yourself. */\n  manual?: boolean\n  /** The contents will either follow the camera, or be hidden when filming if you pass a function */\n  children?: JSX.Element | ((texture: THREE.Texture) =\u003e JSX.Element)\n  /** Number of frames to render, 0 */\n  frames?: number\n  /** Resolution of the FBO, 256 */\n  resolution?: number\n  /** Optional environment map for functional use */\n  envMap?: THREE.Texture\n}\n```\n\nA responsive [THREE.PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) that can set itself as the default.\n\n```jsx\n\u003cPerspectiveCamera makeDefault {...props} /\u003e\n\u003cT.Mesh /\u003e\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\u003cPerspectiveCamera makeDefault {...props}\u003e\n  \u003cT.Mesh /\u003e\n\u003c/PerspectiveCamera\u003e\n```\n\nYou can also drive it manually, it won't be responsive and you have to calculate aspect ratio yourself.\n\n```jsx\n\u003cPerspectiveCamera manual aspect={...} onUpdate={(c) =\u003e c.updateProjectionMatrix()}\u003e\n```\n\nYou can use the PerspectiveCamera to film contents into a RenderTarget, similar to CubeCamera. As a child you must provide a render-function which receives the texture as its first argument. The result of that function will _not follow the camera_, instead it will be set invisible while the the FBO renders so as to avoid issues where the meshes that receive the texture are interrering.\n\n```jsx\n\u003cPerspectiveCamera position={[0, 0, 10]}\u003e\n  {(texture) =\u003e (\n    \u003cT.Mesh geometry={plane}\u003e\n      \u003cT.MeshBasicMaterial map={texture} /\u003e\n    \u003c/T.Mesh\u003e\n  )}\n\u003c/PerspectiveCamera\u003e\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/#api/en/cameras/OrthographicCamera) that can set itself as the default.\n\n```jsx\n\u003cOrthographicCamera makeDefault {...props}\u003e\n  \u003cT.Mesh /\u003e\n\u003c/OrthographicCamera\u003e\n```\n\nYou can use the OrthographicCamera to film contents into a RenderTarget, it has the same API as OrthographicCamera.\n\n```jsx\n\u003cOrthographicCamera position={[0, 0, 10]}\u003e\n  {(texture) =\u003e (\n    \u003cT.Mesh geometry={plane}\u003e\n      \u003cT.MeshBasicMaterial map={texture} /\u003e\n    \u003c/T.Mesh\u003e\n  )}\n\u003c/OrthographicCamera\u003e\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/#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\n```tsx\ntype Props = ThreeProps\u003c'Group'\u003e \u0026 {\n  /** Number of frames to render, Infinity */\n  frames?: number\n  /** Resolution of the FBO, 256 */\n  resolution?: number\n  /** Camera near, 0.1 */\n  near?: number\n  /** Camera far, 1000 */\n  far?: number\n  /** Custom environment map that is temporarily set as the scenes background */\n  envMap?: THREE.Texture\n  /** Custom fog that is temporarily set as the scenes fog */\n  fog?: Fog | FogExp2\n  /** The contents of CubeCamera will be hidden when filming the cube */\n  children: (tex: Texture) =\u003e JSX.Element\n}\n```\n\nUsing the `frames` prop you can control if this camera renders indefinitely 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\u003cCubeCamera\u003e\n  {(texture) =\u003e (\n    \u003cT.Mesh\u003e\n      \u003cT.SphereGeometry /\u003e\n      \u003cT.MeshStandardMaterial envMap={texture} /\u003e\n    \u003c/T.Mesh\u003e\n  )}\n\u003c/CubeCamera\u003e\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 `frameloop=\"demand\"` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/master/examples/jsm/controls). They are the first effects to run before all other useFrames, to ensure that other components may mutate the camera on top of them.\n\n[Some controls](https://github.com/search?q=repo%3Apmndrs%2Fdrei+language%3ATSX+path%3A%2F%5Esrc%5C%2Fcore%5C%2F.*Controls%5C.tsx%2F+makeDefault\u0026type=code) allow you to set `makeDefault`, similar to, for instance, `PerspectiveCamera`. This will set [solid-three](https://docs.pmnd.rs/solid-three-fiber/api/hooks#usethree)'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\n```tsx\n\u003cCameraControls makeDefault /\u003e\n```\n\n```tsx\nconst controls = useThree((state) =\u003e state.controls)\n```\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) CameraControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-cameracontrols--camera-controls-story) and FaceControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-facecontrols)\n\nAll controls react to the default camera. If you have a `\u003cPerspectiveCamera makeDefault /\u003e` 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: `\u003cOrbitControls camera={MyCamera} /\u003e`.\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. It will also center raycast events by default, so regular onPointerOver/etc events on meshes will continue to work.\n\n#### CameraControls\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/sew669\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/sew669/screenshot.png?v2\" alt=\"CameraControls\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis is an implementation of the [camera-controls](https://github.com/yomotsu/camera-controls) library.\n\n```tsx\n\u003cCameraControls /\u003e\n```\n\n```tsx\ntype CameraControlsProps = {\n  /** The camera to control, default to the state's `camera` */\n  camera?: PerspectiveCamera | OrthographicCamera\n  /** DOM element to connect to, default to the state's `gl` renderer */\n  domElement?: HTMLElement\n  /** Reference this CameraControls instance as state's `controls` */\n  makeDefault?: boolean\n  /** Events callbacks, see: https://github.com/yomotsu/camera-controls#events */\n  onStart?: (e?: { type: 'controlstart' }) =\u003e void\n  onEnd?: (e?: { type: 'controlend' }) =\u003e void\n  onChange?: (e?: { type: 'update' }) =\u003e void\n}\n```\n\n#### ScrollControls\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/l4klb\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/l4klb/screenshot.png\" alt=\"Horizontal tiles\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/4m0d0\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/4m0d0/screenshot.png\" alt=\"M1 scroll\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/gsm1y\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png\" alt=\"useIntersect\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/x8gvs\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/x8gvs/screenshot.png\" alt=\"Infinite scroll\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/yjhzv\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/yjhzv/screenshot.png\" alt=\"Vertical scroll\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/4jr4p\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/4jr4p/screenshot.png\" alt=\"GLTF and useScroll\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```tsx\ntype ScrollControlsProps = {\n  /** Precision, default 0.00001 */\n  eps?: number\n  /** Horizontal scroll, default false (vertical) */\n  horizontal?: boolean\n  /** Infinite scroll, default false (experimental!) */\n  infinite?: boolean\n  /** Defines the length of the scroll area, each page is height:100%, default 1 */\n  pages?: number\n  /** A factor that increases scroll bar travel, default 1 */\n  distance?: number\n  /** Friction in seconds, default: 0.2 (1/5 second) */\n  damping?: number\n  /** maxSpeed optionally allows you to clamp the maximum speed. If damping is 0.2s and looks OK\n   *  going between, say, page 1 and 2, but not for pages far apart as it'll move very rapid,\n   *  then a maxSpeed of e.g. 0.1 which will clamp the speed to 0.1 units per second, it may now\n   *  take much longer than damping to reach the target if it is far away. Default: Infinity */\n  maxSpeed?: number\n  enabled?: boolean\n  style?: React.CSSProperties\n  children: JSX.Element\n}\n```\n\nScroll controls create a HTML scroll container in front of the canvas. Everything you drop into the `\u003cScroll\u003e` 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\u003c!-- prettier-ignore --\u003e\n```jsx\n\u003cScrollControls pages={3} damping={0.1}\u003e\n  {/* Canvas contents in here will *not* scroll, but receive useScroll! */}\n  \u003cSomeModel /\u003e\n  \u003cScroll\u003e\n    {/* Canvas contents in here will scroll along */}\n    \u003cFoo position={[0, 0, 0]} /\u003e\n    \u003cFoo position={[0, viewport.height, 0]} /\u003e\n    \u003cFoo position={[0, viewport.height * 1, 0]} /\u003e\n  \u003c/Scroll\u003e\n  \u003cScroll html\u003e\n    {/* DOM contents in here will scroll along */}\n    \u003ch1\u003ehtml in here (optional)\u003c/h1\u003e\n    \u003ch1 style={{ top: '100vh' }}\u003esecond page\u003c/h1\u003e\n    \u003ch1 style={{ top: '200vh' }}\u003ethird page\u003c/h1\u003e\n  \u003c/Scroll\u003e\n\u003c/ScrollControls\u003e\n\nfunction Foo(props) {\n  let ref\n  const data = useScroll()\n  useFrame(() =\u003e {\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 e = 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 f = data.visible(2 / 3, 1 / 3)\n    // The visible function can also receive a margin\n    const g = data.visible(2 / 3, 1 / 3, 0.1)\n  })\n  return \u003cT.Mesh ref={ref} {...props} /\u003e\n}\n```\n\n#### PresentationControls\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/kheke\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/kheke/screenshot.png\" alt=\"Journey stage 1\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/qyz5r\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/qyz5r/screenshot.png\" alt=\"Watch\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cPresentationControls\n  enabled={true} // the controls can be disabled by setting this to false\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  domElement={events.connected} // The DOM element events for this controller will attach to\n\u003e\n  \u003cT.Mesh /\u003e\n\u003c/PresentationControls\u003e\n```\n\n#### KeyboardControls\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/vkgi6\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/vkgi6/screenshot.png\" alt=\"demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA rudimentary keyboard controller which distributes your defined data-model to the `useKeyboard` hook. It's a rather simple way to get started with keyboard input.\n\n```tsx\ntype KeyboardControlsState\u003cT extends string = string\u003e = { [K in T]: boolean }\n\ntype KeyboardControlsEntry\u003cT extends string = string\u003e = {\n  /** Name of the action */\n  name: T\n  /** The keys that define it, you can use either event.key, or event.code */\n  keys: string[]\n  /** If the event receives the keyup event, true by default */\n  up?: boolean\n}\n\ntype KeyboardControlsProps = {\n  /** A map of named keys */\n  map: KeyboardControlsEntry[]\n  /** All children will be able to useKeyboardControls */\n  children: JSX.Element\n  /** Optional onchange event */\n  onChange: (name: string, pressed: boolean, state: KeyboardControlsState) =\u003e void\n  /** Optional event source */\n  domElement?: HTMLElement\n}\n```\n\nYou start by wrapping your app, or scene, into `\u003cKeyboardControls\u003e`.\n\n```tsx\nenum Controls {\n  forward = 'forward',\n  back = 'back',\n  left = 'left',\n  right = 'right',\n  jump = 'jump',\n}\nfunction App() {\n  const map = createMemo\u003cKeyboardControlsEntry\u003cControls\u003e[]\u003e(()=\u003e[\n    { name: Controls.forward, keys: ['ArrowUp', 'KeyW'] },\n    { name: Controls.back, keys: ['ArrowDown', 'KeyS'] },\n    { name: Controls.left, keys: ['ArrowLeft', 'KeyA'] },\n    { name: Controls.right, keys: ['ArrowRight', 'KeyD'] },\n    { name: Controls.jump, keys: ['Space'] },\n  ])\n  return (\n    \u003cKeyboardControls map={map()}\u003e\n      \u003cApp /\u003e\n    \u003c/KeyboardControls\u003e\n```\n\nYou can either respond to input reactively, it uses a solid-store internally, with an optional selector.\n\n```tsx\nfunction Foo() {\n  const forwardPressed = useKeyboardControls\u003cControls\u003e(state =\u003e state.forward)\n\n  createEffect(() =\u003e console.log('forward', forwardPressed()))\n```\n\nOr transiently, either by `subscribe`, which is a function which returns a function to unsubscribe, so you can pair it with createEffect for cleanup, or `get`, which fetches fresh state non-reactively.\n\n```tsx\nfunction Foo() {\n  const keyboard = useKeyboardControls\u003cControls\u003e()\n\n  createEffect(on(\n    () =\u003e keyboard.forward,\n    (pressed) =\u003e {\n      console.log('forward', pressed)\n    }\n  )\n\n  useFrame(() =\u003e {\n    // Fetch fresh data from store\n    const pressed = keyboard.back\n  })\n}\n```\n\n#### FaceControls\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-facecontrols)\n\nThe camera follows your face.\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/jfx2t6\"\u003e\u003cimg width=\"20%\" src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/76580/243503368-6239eb74-8473-4131-9203-33b29c1bbec0.png\" alt=\"demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/zhjbhy\"\u003e\u003cimg width=\"20%\" src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/76580/244052845-5cc535d7-3c97-46e3-a267-52e707c2d9b2.png\" alt=\"demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nPre-requisite: wrap into a [`FaceLandmarker`](#facelandmarker) provider\n\n```tsx\n\u003cFaceLandmarker\u003e...\u003c/FaceLandmarker\u003e\n```\n\n```tsx\n\u003cFaceControls /\u003e\n```\n\n```tsx\ntype FaceControlsProps = {\n  /** The camera to be controlled, default: global state camera */\n  camera?: THREE.Camera\n  /** Whether to autostart the webcam, default: true */\n  autostart?: boolean\n  /** Enable/disable the webcam, default: true */\n  webcam?: boolean\n  /** A custom video URL or mediaStream, default: undefined */\n  webcamVideoTextureSrc?: VideoTextureSrc\n  /** Disable the rAF camera position/rotation update, default: false */\n  manualUpdate?: boolean\n  /** Disable the rVFC face-detection, default: false */\n  manualDetect?: boolean\n  /** Callback function to call on \"videoFrame\" event, default: undefined */\n  onVideoFrame?: (e: THREE.Event) =\u003e void\n  /** Reference this FaceControls instance as state's `controls` */\n  makeDefault?: boolean\n  /** Approximate time to reach the target. A smaller value will reach the target faster. */\n  smoothTime?: number\n  /** Apply position offset extracted from `facialTransformationMatrix` */\n  offset?: boolean\n  /** Offset sensitivity factor, less is more sensible, default: 80 */\n  offsetScalar?: number\n  /** Enable eye-tracking */\n  eyes?: boolean\n  /** Force Facemesh's `origin` to be the middle of the 2 eyes, default: true */\n  eyesAsOrigin?: boolean\n  /** Constant depth of the Facemesh, default: .15 */\n  depth?: number\n  /** Enable debug mode, default: false */\n  debug?: boolean\n  /** Facemesh options, default: undefined */\n  facemesh?: FacemeshProps\n}\n```\n\n```tsx\ntype FaceControlsApi = THREE.EventDispatcher \u0026 {\n  /** Detect faces from the video */\n  detect: (video: HTMLVideoElement, time: number) =\u003e void\n  /** Compute the target for the camera */\n  computeTarget: () =\u003e THREE.Object3D\n  /** Update camera's position/rotation to the `target` */\n  update: (delta: number, target?: THREE.Object3D) =\u003e void\n  /** \u003cFacemesh\u003e ref api */\n  facemeshApiRef: RefObject\u003cFacemeshApi\u003e\n  /** \u003cWebcam\u003e ref api */\n  webcamApiRef: RefObject\u003cWebcamApi\u003e\n  /** Play the video */\n  play: () =\u003e void\n  /** Pause the video */\n  pause: () =\u003e void\n}\n```\n\n##### FaceControls events\n\nTwo `THREE.Event`s are dispatched on FaceControls ref object:\n\n- `{ type: \"stream\", stream: MediaStream }` -- when webcam's [`.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) promise is resolved\n- `{ type: \"videoFrame\", texture: THREE.VideoTexture, time: number }` -- each time a new video frame is sent to the compositor (thanks to rVFC)\n\n\u003e **Note** \u003cbr\u003erVFC\n\u003e\n\u003e Internally, `FaceControls` uses [`requestVideoFrameCallback`](https://caniuse.com/mdn-api_htmlvideoelement_requestvideoframecallback), you may need [a polyfill](https://github.com/ThaUnknown/rvfc-polyfill) (for Firefox).\n\n##### FaceControls[manualDetect]\n\nBy default, `detect` is called on each `\"videoFrame\"`. You can disable this by `manualDetect` and call `detect` yourself.\n\nFor example:\n\n```jsx\nconst store = useThree()\n\nconst onVideoFrame = (event) =\u003e {\n  store.controls.detect(event.texture.source.data, event.time)\n}\n\n;\u003cFaceControls makeDefault manualDetect onVideoFrame={onVideoFrame} /\u003e\n```\n\n##### FaceControls[manualUpdate]\n\nBy default, `update` method is called each rAF `useFrame`. You can disable this by `manualUpdate` and call it yourself:\n\n```jsx\nconst store = useThree()\n\nuseFrame((_, delta) =\u003e {\n  store.controls.update(delta) // 60 or 120 FPS with default damping\n})\n\n\u003cFaceControls makeDefault manualUpdate /\u003e\n```\n\nOr, if you want your own custom damping, use `computeTarget` method and update the camera pos/rot yourself with:\n\n```jsx\nconst current = new THREE.Object3D()\n\nuseFrame((_, delta) =\u003e {\n  const target = controls?.computeTarget()\n\n  if (target) {\n    //\n    // A. Define your own damping\n    //\n\n    const eps = 1e-9\n    easing.damp3(current.position, target.position, 0.25, delta, undefined, undefined, eps)\n    easing.dampE(current.rotation, target.rotation, 0.25, delta, undefined, undefined, eps)\n    camera.position.copy(current.position)\n    camera.rotation.copy(current.rotation)\n\n    //\n    // B. Or maybe with no damping at all?\n    //\n\n    // camera.position.copy(target.position)\n    // camera.rotation.copy(target.rotation)\n  }\n})\n```\n\n# Gizmos\n\n#### GizmoHelper\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/gizmos-gizmohelper--gizmo-helper-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\u003cGizmoHelper\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\u003e\n  \u003cGizmoViewport axisColors={['red', 'green', 'blue']} labelColor=\"black\" /\u003e\n  {/* alternative: \u003cGizmoViewcube /\u003e */}\n\u003c/GizmoHelper\u003e\n```\n\n#### PivotControls\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/om2ff8\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/om2ff8/screenshot.png\" alt=\"demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nControls for rotating and translating objects. These controls will stick to the object the transform and by offsetting or anchoring it forms a pivot. This control has HTML annotations for some transforms and supports `[tab]` for rounded values while dragging.\n\n```tsx\ntype PivotControlsProps = {\n  /** Scale of the gizmo, 1 */\n  scale?: number\n  /** Width of the gizmo lines, this is a THREE.Line2 prop, 2.5 */\n  lineWidth?: number\n  /** If fixed is true is remains constant in size, scale is now in pixels, false */\n  fixed?: boolean\n  /** Pivot does not act as a group, it won't shift contents but can offset in position */\n  offset?: [number, number, number]\n  /** Starting rotation */\n  rotation?: [number, number, number]\n  /** Starting matrix */\n  matrix?: THREE.Matrix4\n  /** Anchor point, like BBAnchor, each axis can be between -1/0/+1 */\n  anchor?: [number, number, number]\n  /** If autoTransform is true, automatically apply the local transform on drag, true */\n  autoTransform?: boolean\n  /** Allows you to switch individual axes off */\n  activeAxes?: [boolean, boolean, boolean]\n  /** RGB colors */\n  axisColors?: [string | number, string | number, string | number]\n  /** Color of the hovered item */\n  hoveredColor?: string | number\n  /** HTML value annotations, default: false */\n  annotations?: boolean\n  /** CSS Classname applied to the HTML annotations */\n  annotationsClass?: string\n  /** Drag start event */\n  onDragStart?: () =\u003e void\n  /** Drag event */\n  onDrag?: (l: THREE.Matrix4, deltaL: THREE.Matrix4, w: THREE.Matrix4, deltaW: THREE.Matrix4) =\u003e void\n  /** Drag end event */\n  onDragEnd?: () =\u003e void\n  /** Set this to false if you want the gizmo to be visible through faces */\n  depthTest?: boolean\n  opacity?: number\n  visible?: boolean\n  userData?: { [key: string]: any }\n  children?: JSX.Element\n}\n```\n\n```jsx\n\u003cPivotControls\u003e\n  \u003cT.Mesh /\u003e\n\u003c/PivotControls\u003e\n```\n\nYou can use Pivot as a controlled component, switch `autoTransform` off in that case and now you are responsible for applying the matrix transform yourself. You can also leave `autoTransform` on and apply the matrix to foreign objects, in that case Pivot will be able to control objects that are not parented within.\n\n```jsx\nconst matrix = new THREE.Matrix4()\nreturn (\n  \u003cPivotControls\n    ref={ref}\n    matrix={matrix}\n    autoTransform={false}\n    onDrag={({ matrix: matrix_ }) =\u003e matrix.copy(matrix_)}\n```\n\n#### TransformControls\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/gizmos-transformcontrols--transform-controls-story)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/btsbj\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/btsbj/screenshot.png\" alt=\"Tranform controls\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAn abstraction around [THREE.TransformControls](https://threejs.org/docs/#examples/en/controls/TransformControls).\n\nYou can wrap objects which then receive a transform gizmo.\n\n```jsx\n\u003cTransformControls mode=\"translate\"\u003e\n  \u003cT.Mesh /\u003e\n\u003c/TransformControls\u003e\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\u003cTransformControls object={mesh} mode=\"translate\" /\u003e\n\u003cT.Mesh ref={mesh} /\u003e\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\u003cTransformControls mode=\"translate\" /\u003e\n\u003cOrbitControls makeDefault /\u003e\n```\n\n#### Grid\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/gizmos-grid--use-grid-scene-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/19uq2u\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/19uq2u/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA y-up oriented, shader-based grid implementation.\n\n```tsx\nexport type GridMaterialType = {\n  /** Cell size, default: 0.5 */\n  cellSize?: number\n  /** Cell thickness, default: 0.5 */\n  cellThickness?: number\n  /** Cell color, default: black */\n  cellColor?: THREE.ColorRepresentation\n  /** Section size, default: 1 */\n  sectionSize?: number\n  /** Section thickness, default: 1 */\n  sectionThickness?: number\n  /** Section color, default: #2080ff */\n  sectionColor?: THREE.ColorRepresentation\n  /** Follow camera, default: false */\n  followCamera?: boolean\n  /** Display the grid infinitely, default: false */\n  infiniteGrid?: boolean\n  /** Fade distance, default: 100 */\n  fadeDistance?: number\n  /** Fade strength, default: 1 */\n  fadeStrength?: number\n}\n\nexport type GridProps = GridMaterialType \u0026 {\n  /** Default plane-geometry arguments */\n  args?: ConstructorParameters\u003ctypeof THREE.PlaneGeometry\u003e\n}\n```\n\n```jsx\n\u003cGrid /\u003e\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\nlet mesh\nonMount(() =\u003e {\n  useHelper(mesh, BoxHelper, 'cyan')\n  useHelper(condition \u0026\u0026 mesh, BoxHelper, 'red') // you can pass false instead of the object ref to hide the helper\n})\n\n\u003cT.Mesh ref={mesh} ... /\u003e\n```\n\n# Shapes\n\n#### Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe, Shape\n\nShort-cuts for a [mesh](https://threejs.org/docs/#api/en/objects/Mesh) with a [buffer geometry](https://threejs.org/docs/#api/en/core/BufferGeometry).\n\n```jsx\n\u003cBox\n  args={[1, 1, 1]}                // Args for the buffer geometry\n  {...meshProps}                  // All THREE.Mesh props are valid\n/\u003e\n\n// Plane with buffer geometry args\n\u003cPlane args={[2, 2]} /\u003e\n\n// Box with color set on the default MeshBasicMaterial\n\u003cBox material-color=\"hotpink\" /\u003e\n\n// Sphere with a MeshStandardMaterial\n\u003cSphere\u003e\n  \u003cT.MeshStandardMaterial color=\"hotpink\" /\u003e\n\u003c/Sphere\u003e\n```\n\n#### RoundedBox\n\nA box buffer geometry with rounded corners, done with extrusion.\n\n```jsx\n\u003cRoundedBox\n  args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]\n  radius={0.05} // Radius of the rounded corners. Default is 0.05\n  smoothness={4} // The number of curve segments. Default is 4\n  creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle\n  {...meshProps} // All THREE.Mesh props are valid\n\u003e\n  \u003cT.MeshPhongMaterial color=\"#f3f3f3\" wireframe /\u003e\n\u003c/RoundedBox\u003e\n```\n\n#### ScreenQuad\n\n```jsx\n\u003cScreenQuad\u003e\n  \u003cmyMaterial /\u003e\n\u003c/ScreenQuad\u003e\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#### 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 or THREE.LineSegments2 (depending on the value of `segments`).\n\n```jsx\n\u003cLine\n  points={[[0, 0, 0], ...]}       // Array of points, Array\u003cVector3 | Vector2 | [number, number, number] | [number, number] | number\u003e\n  color=\"black\"                   // Default\n  lineWidth={1}                   // In pixels (default)\n  segments                        // If true, renders a THREE.LineSegments2. Otherwise, renders a THREE.Line2\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/\u003e\n```\n\n#### QuadraticBezierLine\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--quadratic-bezier)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/2ij9u\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/2ij9u/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nRenders a THREE.Line2 using THREE.QuadraticBezierCurve3 for interpolation.\n\n```jsx\n\u003cQuadraticBezierLine\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/\u003e\n```\n\nYou can also update the line runtime.\n\n```jsx\nlet ref\nuseFrame((state) =\u003e {\n  ref.current.setPoints(\n    [0, 0, 0],\n    [10, 0, 0],\n    // [5, 0, 0] // Optional: mid-point\n  )\n})\nreturn \u003cQuadraticBezierLine ref={ref} /\u003e\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\u003cCubicBezierLine\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/\u003e\n```\n\n#### CatmullRomLine\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--catmull-rom)\n\nRenders a THREE.Line2 using THREE.CatmullRomCurve3 for interpolation.\n\n```jsx\n\u003cCatmullRomLine\n  points={[[0, 0, 0], ...]}       // Array of Points\n  closed={false}                  // Default\n  curveType=\"centripetal\"         // One of \"centripetal\" (default), \"chordal\", or \"catmullrom\"\n  tension={0.5}                   // Default (only applies to \"catmullrom\" curveType)\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/\u003e\n```\n\n#### Facemesh\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shapes-facemesh--facemesh-st)\n\nRenders an oriented [MediaPipe face mesh](https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results):\n\n```jsx\nconst faceLandmarkerResult = {\n    \"faceLandmarks\": [\n      [\n        { \"x\": 0.5760777592658997, \"y\": 0.8639070391654968, \"z\": -0.030997956171631813 },\n        { \"x\": 0.572094738483429, \"y\": 0.7886289358139038, \"z\": -0.07189624011516571 },\n        // ...\n      ],\n      // ...\n    ],\n    \"faceBlendshapes\": [\n      // ...\n    ],\n    \"facialTransformationMatrixes\": [\n      // ...\n    ]\n  },\n}\nconst points = faceLandmarkerResult.faceLandmarks[0]\n\n\u003cFacemesh points={points} /\u003e\n```\n\n```tsx\nexport type FacemeshProps = {\n  /** an array of 468+ keypoints as returned by google/mediapipe tasks-vision, default: a sample face */\n  points?: MediaPipePoints\n  /** @deprecated an face object as returned by tensorflow/tfjs-models face-landmarks-detection */\n  face?: MediaPipeFaceMesh\n  /** constant width of the mesh, default: undefined */\n  width?: number\n  /** or constant height of the mesh, default: undefined */\n  height?: number\n  /** or constant depth of the mesh, default: 1 */\n  depth?: number\n  /** a landmarks tri supposed to be vertical, default: [159, 386, 200] (see: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection#mediapipe-facemesh-keypoints) */\n  verticalTri?: [number, number, number]\n  /** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */\n  origin?: number | THREE.Vector3\n  /** A facial transformation matrix, as returned by FaceLandmarkerResult.facialTransformationMatrixes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */\n  facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0]\n  /** Apply position offset extracted from `facialTransformationMatrix` */\n  offset?: boolean\n  /** Offset sensitivity factor, less is more sensible */\n  offsetScalar?: number\n  /** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */\n  faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0]\n  /** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */\n  eyes?: boolean\n  /** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */\n  eyesAsOrigin?: boolean\n  /** debug mode, default: false */\n  debug?: boolean\n}\n```\n\nRef-api:\n\n```tsx\nlet api: FacemeshApi\n;\u003cFacemesh ref={api} points={points} /\u003e\n```\n\n```tsx\ntype FacemeshApi = {\n  meshRef: React.RefObject\u003cTHREE.Mesh\u003e\n  outerRef: React.RefObject\u003cTHREE.Group\u003e\n  eyeRightRef: React.RefObject\u003cFacemeshEyeApi\u003e\n  eyeLeftRef: React.RefObject\u003cFacemeshEyeApi\u003e\n}\n```\n\nYou can for example get face mesh world direction:\n\n```tsx\napi.meshRef.current.localToWorld(new THREE.Vector3(0, 0, -1))\n```\n\nor get L/R iris direction:\n\n```tsx\napi.eyeRightRef.current.irisDirRef.current.localToWorld(new THREE.Vector3(0, 0, -1))\n```\n\n# Abstractions\n\n#### Image\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/l4klb\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/l4klb/screenshot.png\" alt=\"Horizontal tiles\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/gsm1y\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png\" alt=\"useIntersect\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/x8gvs\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/x8gvs/screenshot.png\" alt=\"Infinite scroll\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/yjhzv\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/yjhzv/screenshot.png\" alt=\"Vertical scroll\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA shader-based image component with auto-cover (similar to css/background: cover).\n\n```jsx\nfunction Foo() {\n  let ref\n  useFrame(() =\u003e {\n    ref.material.zoom = ... // 1 and higher\n    ref.material.grayscale = ... // between 0 and 1\n    ref.material.color.set(...) // mix-in color\n  })\n  return \u003cImage ref={ref} url=\"/file.jpg\" /\u003e\n}\n```\n\nTo make the material transparent:\n\n```jsx\n\u003cImage url=\"/file.jpg\" transparent opacity={0.5} /\u003e\n```\n\n#### Text\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/yup2o\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/yup2o/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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! Text is suspense-based!\n\n```jsx\n\u003cText color=\"black\" anchorX=\"center\" anchorY=\"middle\"\u003e\n  hello world!\n\u003c/Text\u003e\n```\n\nText will suspend while loading the font data, but in order to completely avoid FOUC you can pass the characters it needs to render.\n\n```jsx\n\u003cText font={fontUrl} characters=\"abcdefghijklmnopqrstuvwxyz0123456789!\"\u003e\n  hello world!\n\u003c/Text\u003e\n```\n\n#### Text3D\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text3d--text-3-d-st) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/x6obrb\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/x6obrb/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nRender 3D text using ThreeJS's `TextGeometry`.\n\nText3D will suspend while loading the font data. Text3D requires fonts in JSON format generated through (typeface.json)[http://gero3.github.io/facetype.js], either as a path to a JSON file or a JSON object. If you face display issues try checking \"Reverse font direction\" in the typeface tool.\n\n```jsx\n\u003cText3D font={fontUrl} {...textOptions}\u003e\n  Hello world!\n  \u003cT.MeshNormalMaterial /\u003e\n\u003c/Text3D\u003e\n```\n\nYou can use any material. `textOptions` are options you'd pass to the `TextGeometry` constructor. Find more information about available options [here](https://threejs.org/docs/index.html?q=textg#examples/en/geometries/TextGeometry).\n\nYou can align the text using the `\u003cCenter\u003e` component.\n\n```jsx\n\u003cCenter top left\u003e\n  \u003cText3D\u003ehello\u003c/Text3D\u003e\n\u003c/Center\u003e\n```\n\nIt adds three properties that do not exist in the original `TextGeometry`, `lineHeight`, `letterSpacing` and smooth. LetterSpacing is a factor that is `1` by default. LineHeight is in threejs units and `0` by default. Smooth merges vertices with a tolerance and calls computeVertexNormals.\n\n```jsx\n\u003cText3D smooth={1} lineHeight={0.5} letterSpacing={-0.025}\u003e{`hello\\nworld`}\u003c/Text3D\u003e\n```\n\n#### Effects\n\nAbstraction around threes own [EffectComposer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). By default it will prepend a render-pass and a gammacorrection-pass. Children are cloned, `attach` is given to them automatically. You can only use passes or effects in there.\n\nBy default it creates a render target with HalfFloatType, RGBAFormat. You can change all of this to your liking, inspect the types.\n\n```jsx\nimport { SSAOPass } from \"three-stdlib\"\n\nextend({ SSAOPass })\n\n\u003cEffects multisamping={8} renderIndex={1} disableGamma={false} disableRenderPass={false} disableRender={false}\u003e\n  \u003csSAOPass args={[scene, camera, 100, 100]} kernelRadius={1.2} kernelSize={0} /\u003e\n\u003c/Effects\u003e\n```\n\n#### PositionalAudio\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/gkfhr\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/gkfhr/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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/#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\u003cPositionalAudio\n  url=\"/sound.mp3\"\n  distance={1}\n  loop\n  {...props} // All THREE.PositionalAudio props are valid\n/\u003e\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 `\u003cgroup /\u003e` that always faces the camera.\n\n```jsx\n\u003cBillboard\n  follow={true}\n  lockX={false}\n  lockY={false}\n  lockZ={false} // Lock the rotation on the z axis (default=false)\n\u003e\n  \u003cText fontSize={1}\u003eI'm a billboard\u003c/Text\u003e\n\u003c/Billboard\u003e\n```\n\n#### ScreenSpace\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-screenspace--screen-space-story)\n\nAdds a `\u003cgroup /\u003e` that aligns objects to screen space.\n\n```jsx\n\u003cScreenSpace\n  depth={1} // Distance from camera\n\u003e\n  \u003cBox\u003eI'm in screen space\u003c/Box\u003e\n\u003c/ScreenSpace\u003e\n```\n\n#### GradientTexture\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/l03yb\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/l03yb/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA declarative THREE.Texture which attaches to \"map\" by default. You can use this to create gradient backgrounds.\n\n```jsx\n\u003cT.Mesh\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cT.MeshBasicMaterial\u003e\n    \u003cGradientTexture\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    /\u003e\n  \u003c/T.MeshBasicMaterial\u003e\n\u003c/T.Mesh\u003e\n```\n\nRadial gradient.\n\n\u003c!-- prettier-ignore --\u003e\n```jsx\nimport { GradientTexture, GradientType } from './GradientTexture'\n\u003cT.Mesh\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cT.MeshBasicMaterial\u003e\n    \u003cGradientTexture\n      stops={[0, 0.5, 1]} // As many stops as you want\n      colors={['aquamarine', 'hotpink', 'yellow']} // Colors need to match the number of stops\n      size={1024} // Size (height) is optional, default = 1024\n      width={1024} // Width of the canvas producing the texture, default = 16\n      type={GradientType.Radial} // The type of the gradient, default = GradientType.Linear\n      innerCircleRadius={0} // Optional, the radius of the inner circle of the gradient, default = 0\n      outerCircleRadius={'auto'} // Optional, the radius of the outer circle of the gradient, default = auto\n    /\u003e\n  \u003c/T.MeshBasicMaterial\u003e\n\u003c/T.Mesh\u003e\n```\n\n#### Edges\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ny3p4\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ny3p4/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAbstracts [THREE.EdgesGeometry](https://threejs.org/docs/#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\u003cT.Mesh\u003e\n  \u003cT.BoxGeometry /\u003e\n  \u003cT.MeshBasicMaterial /\u003e\n  \u003cEdges\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  /\u003e\n\u003c/T.Mesh\u003e\n```\n\n#### Trail\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail--use-trail-st)\n\nA declarative, `three.MeshLine` based Trails implementation. You can attach it to any mesh and it will give it a beautiful trail.\n\nProps defined below with their default values.\n\n```jsx\n\u003cTrail\n  width={0.2} // Width of the line\n  color={'hotpink'} // Color of the line\n  length={1} // Length of the line\n  decay={1} // How fast the line fades away\n  local={false} // Wether to use the target's world or local positions\n  stride={0} // Min distance between previous and current point\n  interval={1} // Number of frames to wait before next calculation\n  target={undefined} // Optional target. This object will produce the trail.\n  attenuation={(width) =\u003e width} // A function to define the width in each point along it.\n\u003e\n  {/* If `target` is not defined, Trail will use the first `Object3D` child as the target. */}\n  \u003cT.Mesh\u003e\n    \u003cT.SphereGeometry /\u003e\n    \u003cT.MeshBasicMaterial /\u003e\n  \u003c/T.Mesh\u003e\n\n  {/* You can optionally define a custom meshLineMaterial to use. */}\n  {/* \u003cT.MeshLineMaterial color={\"red\"} /\u003e */}\n\u003c/Trail\u003e\n```\n\n👉 Inspired by [TheSpite's Codevember 2021 #9](https://spite.github.io/codevember-2021/9/)\n\n#### Sampler\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-sampler--sampler-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ehflx3\"\u003e\n    \u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ehflx3/screenshot.png\" alt=\"Demo\"/\u003e\n  \u003c/a\u003e \u003cbr /\u003e\n  \u003csmall\u003e– \u003ca href=\"https://codesandbox.io/s/ehflx3\"\u003eComplex Demo\u003c/a\u003e by \u003ca href=\"https://twitter.com/CantBeFaraz\"\u003e@CantBeFaraz\u003c/a\u003e\u003c/small\u003e \u003cbr /\u003e\n  \u003csmall\u003e– \u003ca href=\"https://codesandbox.io/s/k6rcp2\"\u003eSimple Demo\u003c/a\u003e by \u003ca href=\"https://twitter.com/ggsimm\"\u003e@ggsimm\u003c/a\u003e\u003c/small\u003e\n\u003c/p\u003e\n\nDeclarative abstraction around MeshSurfaceSampler \u0026 InstancedMesh.\nIt samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.\n\nCheck the demos \u0026 code for more.\n\nYou can either pass a Mesh and InstancedMesh as children:\n\n```tsx\n// This simple example scatters 1000 spheres on the surface of the sphere mesh.\n\u003cSampler\n  weight={'normal'} // the name of the attribute to be used as sampling weight\n  transform={transformPoint} // a function that transforms each instance given a sample. See the examples for more.\n  count={16} // Number of samples\n\u003e\n  \u003cT.Mesh\u003e\n    \u003cT.SphereGeometry args={[2]} /\u003e\n  \u003c/T.Mesh\u003e\n\n  \u003cT.InstancedMesh args={[null, null, 1_000]}\u003e\n    \u003cT.SphereGeometry args={[0.1]} /\u003e\n  \u003c/T.InstancedMesh\u003e\n\u003c/Sampler\u003e\n```\n\nor use refs when you can't compose declaratively:\n\n```tsx\nconst gltf = useGLTF('my/mesh/url')\nconst mesh = () =\u003e gltf()?.nodes\nlet instances;\n\nreturn \u003c\u003e\n  \u003cT.InstancedMesh args={[null, null, 1_000]}\u003e\n    \u003cT.SphereGeometry args={[0.1]}\u003e\n  \u003c/T.InstancedMesh\u003e\n\n  \u003cSampler mesh={mesh} instances={instances}\u003e\n\u003c/\u003e\n```\n\n#### ComputedAttribute\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-sampler--sampler-weight-st)\n\nCreate and attach an attribute declaratively.\n\n```tsx\n\u003cT.SphereGeometry\u003e\n  \u003cComputedAttribute\n    // attribute will be added to the geometry with this name\n    name=\"my-attribute-name\"\n    compute={(geometry) =\u003e {\n      // ...someLogic;\n      return new THREE.BufferAttribute([1, 2, 3], 1)\n    }}\n    // you can pass any BufferAttribute prop to this component, eg.\n    usage={THREE.StaticReadUsage}\n  /\u003e\n\u003c/T.SphereGeometry\u003e\n```\n\n#### Clone\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/42glz0\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/42glz0/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nDeclarative abstraction around THREE.Object3D.clone. This is useful when you want to create a shallow copy of an existing fragment (and Object3D, Groups, etc) into your scene, for instance a group from a loaded GLTF. This clone is now re-usable, but it will still refer to the original geometries and materials.\n\n```ts\n\u003cClone\n  /** Any pre-existing THREE.Object3D (groups, meshes, ...), or an array of objects */\n  object: THREE.Object3D | THREE.Object3D[]\n  /** Children will be placed within the object, or within the group that holds arrayed objects */\n  children?: JSX.Element\n  /** Can clone materials and/or geometries deeply (default: false) */\n  deep?: boolean | 'materialsOnly' | 'geometriesOnly'\n  /** The property keys it will shallow-clone (material, geometry, visible, ...) */\n  keys?: string[]\n  /** Can either spread over props or fill in JSX children, applies to every mesh within */\n  inject?: MeshProps | JSX.Element | ((object: THREE.Object3D) =\u003e JSX.Element)\n  /** Short access castShadow, applied to every mesh within */\n  castShadow?: boolean\n  /** Short access receiveShadow, applied to every mesh within */\n  receiveShadow?: boolean\n/\u003e\n```\n\nYou create a shallow clone by passing a pre-existing object to the `object` prop.\n\n```jsx\nconst gltf = useGLTF(url)\nreturn (\n  \u003cClone object={gltf()?.nodes.table} /\u003e\n```\n\nOr, multiple objects:\n\n```jsx\n\u003cClone object={[gltf()?.nodes.foo, gltf()?.nodes.bar]} /\u003e\n```\n\nYou can dynamically insert objects, these will apply to anything that isn't a group or a plain object3d (meshes, lines, etc):\n\n```jsx\n\u003cClone object={nodes.table} inject={\u003cT.MeshStandardMaterial color=\"green\" /\u003e} /\u003e\n```\n\nOr make inserts conditional:\n\n```jsx\n\u003cClone object={nodes.table} inject={\n  {(object) =\u003e (object.name === 'table' ? \u003cT.MeshStandardMaterial color=\"green\" /\u003e : null)}\n} /\u003e\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/pecl6\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/pecl6/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA hook that abstracts [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer).\n\n```jsx\nconst gltf = useGLTF(url)\nconst animations = useAnimations(() =\u003e gltf()?.animations)\ncreateEffect(() =\u003e {\n  animations.actions?.jump.play()\n})\nreturn (\n  \u003cT.Mesh ref={animations.ref} /\u003e\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 gltf = useGLTF(url)\nconst animations = useAnimations(\n  () =\u003e gltf()?.animations,\n  () =\u003e gltf()?.scene\n)\nreturn \u003cT.Primitive object={gltf()?.scene} /\u003e\n```\n\n#### MarchingCubes\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-marchingcubes--marching-cubes-story)\n\nAn abstraction for threes [MarchingCubes](https://threejs.org/examples/#webgl_marchingcubes)\n\n```jsx\n\u003cMarchingCubes resolution={50} maxPolyCount={20000} enableUvs={false} enableColors={true}\u003e\n  \u003cMarchingCube strength={0.5} subtract={12} color={new Color('#f0f')} position={[0.5, 0.5, 0.5]} /\u003e\n\n  \u003cMarchingPlane planeType=\"y\" strength={0.5} subtract={12} /\u003e\n\u003c/MarchingCubes\u003e\n```\n\n#### Decal\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-decal--decal-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ymb5d9\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ymb5d9/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAbstraction around Three's `DecalGeometry`. It will use the its parent `mesh` as the decal surface by default.\n\nThe decal box has to intersect the surface, otherwise it will not be visible. if you do not specifiy a rotation it will look at the parents center point. You can also pass a single number as the rotation which allows you to spin it.\n\n```js\n\u003cT.Mesh\u003e\n  \u003cT.SphereGeometry /\u003e\n  \u003cT.MeshBasicMaterial /\u003e\n  \u003cDecal\n    debug // Makes \"bounding box\" of the decal visible\n    position={[0, 0, 0]} // Position of the decal\n    rotation={[0, 0, 0]} // Rotation of the decal (can be a vector or a degree in radians)\n    scale={1} // Scale of the decal\n    polygonOffset\n    polygonOffsetFactor={-1} // The mesh should take precedence over the original\n  \u003e\n    \u003cT.MeshBasicMaterial map={texture} /\u003e\n  \u003c/Decal\u003e\n\u003c/T.Mesh\u003e\n```\n\nIf you do not specify a material it will create a transparent meshBasicMaterial with a polygonOffsetFactor of -10.\n\n```jsx\n\u003cT.Mesh\u003e\n  \u003cT.SphereGeometry /\u003e\n  \u003cT.MeshBasicMaterial /\u003e\n  \u003cDecal map={texture} /\u003e\n\u003c/T.Mesh\u003e\n```\n\nIf declarative composition is not possible, use the `mesh` prop to define the surface the decal must attach to.\n\n```js\n\u003cDecal mesh={ref}\u003e\n  \u003cT.MeshBasicMaterial map={texture} polygonOffset polygonOffsetFactor={-1} /\u003e\n\u003c/Decal\u003e\n```\n\n#### Svg\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-svg--svg-st)\n\nWrapper around the `three` [svg loader](https://threejs.org/examples/?q=sv#webgl_loader_svg) demo.\n\nAccepts an SVG url or svg raw data.\n\n```js\n\u003cSvg src={urlOrRawSvgString} /\u003e\n```\n\n#### Gltf\n\nThis is a convenience component that will load a gltf file and clone the scene using [drei/Clone](#clone). That means you can re-use and mount the same gltf file multiple times. It accepts all props that Clone does, including shortcuts (castShadow, receiveShadow) and material overrides.\n\n```js\n\u003cGltf src=\"/model.glb\" receiveShadow castShadow /\u003e\n```\n\n#### AsciiRenderer\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/vq9wsl\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/vq9wsl/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAbstraction of three's [AsciiEffect](https://threejs.org/examples/?q=as#webgl_effects_ascii). It creates a DOM layer on top of the canvas and renders the scene as ascii characters.\n\n```tsx\ntype AsciiRendererProps = {\n  /** Render index, default: 1 */\n  renderIndex?: number\n  /** CSS background color (can be \"transparent\"), default: black */\n  bgColor?: string\n  /** CSS character color, default: white */\n  fgColor?: string\n  /** Characters, default: ' .:-+*=%@#' */\n  characters?: string\n  /** Invert character, default: true */\n  invert?: boolean\n  /** Colorize output (very expensive!), default: false */\n  color?: boolean\n  /** Level of detail, default: 0.15 */\n  resolution?: number\n}\n```\n\n```jsx\n\u003cCanvas\u003e\n  \u003cAsciiRenderer /\u003e\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/lx2h8\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/lx2h8/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/l900i\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/l900i/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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/#api/en/materials/MeshStandardMaterial) and accepts all its props.\n\n```jsx\n\u003cT.Mesh\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cMeshReflectorMaterial\n    blur={[0, 0]} // Blur ground reflections (width, height), 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 \u003e 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    reflectorOffset={0.2} // Offsets the virtual camera that projects the reflection. Useful when the reflective surface is some distance from the object's origin (default = 0)\n  /\u003e\n\u003c/T.Mesh\u003e\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\u003cT.Mesh\u003e\n  \u003cT.BoxGeometry /\u003e\n  \u003cMeshWobbleMaterial factor={1} speed={10} /\u003e\n\u003c/T.Mesh\u003e\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/l03yb\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/l03yb/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis material makes your geometry distort following simplex noise.\n\n```jsx\n\u003cT.Mesh\u003e\n  \u003cT.BoxGeometry /\u003e\n  \u003cMeshDistortMaterial distort={1} speed={10} /\u003e\n\u003c/T.Mesh\u003e\n```\n\n#### MeshRefractionMaterial\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/zqrreo\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/zqrreo/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA convincing Glass/Diamond refraction material.\n\n```tsx\ntype MeshRefractionMaterialProps = ThreeProps\u003c'ShaderMaterial'\u003e \u0026 {\n  /** Environment map */\n  envMap: THREE.CubeTexture | THREE.Texture\n  /** Number of ray-cast bounces, it can be expensive to have too many, 2 */\n  bounces?: number\n  /** Refraction index, 2.4 */\n  ior?: number\n  /** Fresnel (strip light), 0 */\n  fresnel?: number\n  /** RGB shift intensity, can be expensive, 0 */\n  aberrationStrength?: number\n  /** Color, white */\n  color?: SolidThreeFiber.Color\n  /** If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true */\n  fastChroma?: boolean\n}\n```\n\nIf you want it to reflect other objects in the scene you best pair it with a cube-camera.\n\n```jsx\n\u003cCubeCamera\u003e\n  {(texture) =\u003e (\n    \u003cT.Mesh geometry={diamondGeometry} {...props}\u003e\n      \u003cMeshRefractionMaterial envMap={texture} /\u003e\n    \u003c/T.Mesh\u003e\n  )}\n\u003c/CubeCamera\u003e\n```\n\nOtherwise just pass it an environment map.\n\n```jsx\nconst texture = useLoader(RGBELoader, \"/textures/royal_esplanade_1k.hdr\")\nreturn (\n  \u003cT.Mesh geometry={diamondGeometry} {...props}\u003e\n    \u003cMeshRefractionMaterial envMap={texture()} /\u003e\n```\n\n#### MeshTransmissionMaterial\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/hmgdjq\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/hmgdjq/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAn improved THREE.MeshPhysicalMaterial. It acts like a normal PhysicalMaterial in terms of transmission support, thickness, ior, roughness, etc., but has chromatic aberration, noise-based roughness blur, (primitive) anisotropic blur support, and unlike the original it can \"see\" other transmissive or transparent objects which leads to improved visuals.\n\nAlthough it should be faster than MPM keep in mind that it can still be expensive as it causes an additional render pass of the scene. Low samples and low resolution will make it faster. If you use roughness consider using a tiny resolution, for instance 32x32 pixels, it will still look good but perform much faster.\n\nFor performance and visual reasons the host mesh gets removed from the render-stack temporarily. If you have other objects that you don't want to see reflected in the material just add them to the parent mesh as children.\n\n```tsx\ntype MeshTransmissionMaterialProps = ThreeProps\u003c'MeshPhysicalMaterial'\u003e \u0026 {\n  /* Transmission, default: 1 */\n  transmission?: number\n  /* Thickness (refraction), default: 0 */\n  thickness?: number\n  /** Backside thickness (when backside is true), default: 0 */\n  backsideThickness?: number\n  /* Roughness (blur), default: 0 */\n  roughness?: number\n  /* Chromatic aberration, default: 0.03 */\n  chromaticAberration?: number\n  /* Anisotropy, default: 0.1 */\n  anisotropicBlur?: number\n  /* Distortion, default: 0 */\n  distortion?: number\n  /* Distortion scale, default: 0.5 */\n  distortionScale: number\n  /* Temporal distortion (speed of movement), default: 0.0 */\n  temporalDistortion: number\n  /** The scene rendered into a texture (use it to share a texture between materials), default: null  */\n  buffer?: THREE.Texture\n  /** transmissionSampler, you can use the threejs transmission sampler texture that is\n   *  generated once for all transmissive materials. The upside is that it can be faster if you\n   *  use multiple MeshPhysical and Transmission materials, the downside is that transmissive materials\n   *  using this can't see other transparent or transmissive objects nor do you have control over the\n   *  buffer and its resolution, default: false */\n  transmissionSampler?: boolean\n  /** Render the backside of the material (more cost, better results), default: false */\n  backside?: boolean\n  /** Resolution of the local buffer, default: undefined (fullscreen) */\n  resolution?: number\n  /** Resolution of the local buffer for backfaces, default: undefined (fullscreen) */\n  backsideResolution?: number\n  /** Refraction samples, default: 6 */\n  samples?: number\n  /** Buffer scene background (can be a texture, a cubetexture or a color), default: null */\n  background?: THREE.Texture\n}\n```\n\n```jsx\nreturn (\n  \u003cT.Mesh geometry={geometry} {...props}\u003e\n    \u003cMeshTransmissionMaterial /\u003e\n```\n\nIf each material rendering the scene on its own is too expensive you can share a buffer texture. Either by enabling `transmissionSampler` which would use the threejs-internal buffer that MeshPhysicalMaterials use. This might be faster, the downside is that no transmissive material can \"see\" other transparent or transmissive objects.\n\n```jsx\n\u003cT.Mesh geometry={torus}\u003e\n  \u003cMeshTransmissionMaterial transmissionSampler /\u003e\n\u003c/T.Mesh\u003e\n\u003cT.Mesh geometry={sphere}\u003e\n  \u003cMeshTransmissionMaterial transmissionSampler /\u003e\n\u003c/T.Mesh\u003e\n```\n\nOr, by passing a texture to `buffer` manually, for instance using useFBO.\n\n```jsx\nconst buffer = useFBO()\nuseFrame((state) =\u003e {\n  state.gl.setRenderTarget(buffer)\n  state.gl.render(state.scene, state.camera)\n  state.gl.setRenderTarget(null)\n})\nreturn (\n  \u003c\u003e\n    \u003cT.Mesh geometry={torus}\u003e\n      \u003cMeshTransmissionMaterial buffer={buffer.texture} /\u003e\n    \u003c/T.Mesh\u003e\n    \u003cT.Mesh geometry={sphere}\u003e\n      \u003cMeshTransmissionMaterial buffer={buffer.texture} /\u003e\n    \u003c/T.Mesh\u003e\n```\n\nOr a PerspectiveCamera.\n\n```jsx\n\u003cPerspectiveCamera makeDefault fov={75} position={[10, 0, 15]} resolution={1024}\u003e\n  {(texture) =\u003e (\n    \u003c\u003e\n      \u003cT.Mesh geometry={torus}\u003e\n        \u003cMeshTransmissionMaterial buffer={texture} /\u003e\n      \u003c/T.Mesh\u003e\n      \u003cT.Mesh geometry={sphere}\u003e\n        \u003cMeshTransmissionMaterial buffer={texture} /\u003e\n      \u003c/T.Mesh\u003e\n    \u003c/\u003e\n  )}\n```\n\nThis would mimic the default MeshPhysicalMaterial behaviour, these materials won't \"see\" one another, but at least they would pick up on everything else, including transmissive or transparent objects.\n\n#### MeshDiscardMaterial\n\nA material that renders nothing. In comparison to `\u003cT.Mesh visible={false}` it can be used to hide objects from the scene while still displays shadows and children.\n\n```jsx\n\u003cT.Mesh castShadow\u003e\n  \u003cT.TorusKnotGeometry /\u003e\n  \u003cMeshDiscardMaterial /\u003e\n  {/* Shadows and edges will show, but the model itself won't */}\n  \u003cEdges /\u003e\n```\n\n#### PointMaterial\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/eq7sc\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/eq7sc/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAntialiased round dots. It takes the same props as regular [THREE.PointsMaterial](https://threejs.org/docs/index.html?q=PointsMaterial#api/en/materials/PointsMaterial) on which it is based.\n\n```jsx\n\u003cT.Points\u003e\n  \u003cPointMaterial transparent vertexColors size={15} sizeAttenuation={false} depthWrite={false} /\u003e\n\u003c/T.Points\u003e\n```\n\n#### SoftShadows\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ykfpwf\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ykfpwf/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/dh2jc\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/dh2jc/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```tsx\ntype SoftShadowsProps = {\n  /** Size of the light source (the larger the softer the light), default: 25 */\n  size?: number\n  /** Number of samples (more samples less noise but more expensive), default: 10 */\n  samples?: number\n  /** Depth focus, use it to shift the focal point (where the shadow is the sharpest), default: 0 (the beginning) */\n  focus?: number\n}\n```\n\nInjects percent closer soft shadows (pcss) into threes shader chunk. Mounting and unmounting this component will lead to all shaders being be re-compiled, although it will only cause overhead if SoftShadows is mounted after the scene has already rendered, if it mounts with everything else in your scene shaders will compile naturally.\n\n```jsx\n\u003cSoftShadows /\u003e\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ni6v4\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ni6v4/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCreates a THREE.ShaderMaterial for you with easier handling of uniforms, which are automatically declared as setter/getters on the object and allowed as constructor arguments.\n\n```jsx\nimport { extend } from 'solid-three'\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\n// declaratively\nextend({ ColorShiftMaterial })\n...\n\u003cT.Mesh\u003e\n  \u003cT.ColorShiftMaterial color=\"hotpink\" time={1} /\u003e\n\u003c/T.Mesh\u003e\n\n// imperatively, all uniforms are available as setter/getters and constructor args\nconst material = new ColorShiftMaterial({ color: new THREE.Color(\"hotpink\") })\nmaterial.time = 1\n```\n\n`shaderMaterial` attaches a unique `key` property to the prototype class. If you wire it to Reacts own `key` property, you can enable hot-reload.\n\n```jsx\nimport { ColorShiftMaterial } from './ColorShiftMaterial'\n\nextend({ ColorShiftMaterial })\n\n// in your component\n\u003cT.ColorShiftMaterial key={ColorShiftMaterial.key} color=\"hotpink\" time={1} /\u003e\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/#webgl_modifier_curve)\n\n```jsx\nlet curveRef\n\nconst curve = createMemo(() =\u003e new THREE.CatmullRomCurve3([...handlePos], true, 'centripetal'))\n\nreturn (\n  \u003cCurveModifier ref={curveRef} curve={curve()}\u003e\n    \u003cT.Mesh\u003e\n      \u003cT.BoxGeometry args={[10, 10]} /\u003e\n    \u003c/T.Mesh\u003e\n  \u003c/CurveModifier\u003e\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 `\u003cCanvas /\u003e` to be consumed from within the `\u003cCanvas /\u003e` 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    \u003cCanvas\u003e\n      \u003cContextBridge\u003e\n        \u003cScene /\u003e\n      \u003c/ContextBridge\u003e\n    \u003c/Canvas\u003e\n  )\n}\n\nfunction Scene() {\n  // we can now consume a context within the Canvas\n  const theme = useContext(ThemeContext)\n  const greeting = useContext(GreetingContext)\n  return (\n    //...\n  )\n}\n```\n\n#### Example\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-example--example-st)\n\n\u003e **Warning** solely for [`CONTRIBUTING`](CONTRIBUTING.md#example) purposes\n\nA \"counter\" example.\n\n```tsx\n\u003cExample font=\"/Inter_Bold.json\" /\u003e\n```\n\n```tsx\ntype ExampleProps = {\n  font: string\n  color?: Color\n  debug?: boolean\n  bevelSize?: number\n}\n```\n\nRef-api:\n\n```tsx\nlet api: ExampleApi\n;\u003cExample ref={api} font=\"/Inter_Bold.json\" /\u003e\n```\n\n```tsx\ntype ExampleApi = {\n  incr: (x?: number) =\u003e void\n  decr: (x?: number) =\u003e void\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/0n9it\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/0n9it/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/qyz5r\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/qyz5r/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/9keg6\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/9keg6/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/6oei7\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/6oei7/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/wp9mkp\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/wp9mkp/screenshot.png\" alt=\"demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cHtml\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 }) =\u003e number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]\n  occlude={[ref]} // Can be true or a Ref\u003cObject3D\u003e[], true occludes the entire scene (default: undefined)\n  onOcclude={(visible) =\u003e null} // Callback when the visibility changes (default: undefined)\n  {...groupProps} // All THREE.Group props are valid\n  {...divProps} // All HTMLDivElement props are valid\n\u003e\n  \u003ch1\u003ehello\u003c/h1\u003e\n  \u003cp\u003eworld\u003c/p\u003e\n\u003c/Html\u003e\n```\n\nHtml can hide behind geometry using the `occlude` prop.\n\n```jsx\n\u003cHtml occlude /\u003e\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] = createSignal()\n\n\u003cHtml\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/\u003e\n```\n\n**Blending occlusion**\n\nHtml can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using `\"blending\"` as the `occlude` prop.\n\n```jsx\n// Enable real occlusion\n\u003cHtml occlude=\"blending\" /\u003e\n```\n\nYou can also give HTML material properties using the `material` prop.\n\n```jsx\n\u003cHtml\n  occlude\n  material={\n    \u003cT.MeshPhysicalMaterial\n      side={DoubleSide} // Required\n      opacity={0.1} // Degree of influence of lighting on the HTML\n      ... // Any other material properties\n    /\u003e\n  }\n/\u003e\n```\n\nEnable shadows using the `castShadow` and `recieveShadow` prop.\n\n\u003e Note: Shadows only work with a custom material. Shadows will not work with `meshBasicMaterial` and `shaderMaterial` by default.\n\n```jsx\n\u003cHtml\n  occlude\n  castShadow // Make HTML cast a shadow\n  receiveShadow // Make HTML receive shadows\n  material={\u003cT.MeshPhysicalMaterial side={DoubleSide} opacity={0.1} /\u003e}\n/\u003e\n```\n\n\u003e Note: Html 'blending' mode only correctly occludes rectangular HTML elements by default. Use the `geometry` prop to swap the backing geometry to a custom one if your Html has a different shape.\n\n#### CycleRaycast\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ls503\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ls503/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cCycleRaycast\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) =\u003e console.log(objects, cycle)} // Optional onChanged event\n/\u003e\n```\n\n#### Select\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/ny3p4\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ny3p4/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```tsx\ntype Props = {\n  /** Allow multi select, default: false */\n  multiple?: boolean\n  /** Allow box select, default: false */\n  box?: boolean\n  /** Custom CSS border: default: '1px solid #55aaff' */\n  border?: string\n  /** Curom CSS color, default: 'rgba(75, 160, 255, 0.1)' */\n  backgroundColor?: string\n  /** Callback for selection changes */\n  onChange?: (selected: THREE.Object3D[]) =\u003e void\n  /** Callback for selection changes once the pointer is up */\n  onChangePointerUp?: (selected: THREE.Object3D[]) =\u003e void\n  /** Optional filter for filtering the selection */\n  filter?: (selected: THREE.Object3D[]) =\u003e THREE.Object3D[]\n}\n```\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\u003cSelect box multiple onChange={console.log} filter={items =\u003e items}\u003e\n  \u003cFoo /\u003e\n  \u003cBar /\u003e\n\u003c/Select\u003e\n\nfunction Foo() {\n  const selected = useSelect()\n```\n\n#### Sprite Animator\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/r3f-sprite-animator-s12ijv\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/s12ijv/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```tsx\ntype Props = {\n  /** The start frame of the animation */\n  startFrame?: number\n  /** The end frame of the animation */\n  endFrame?: number\n  /** The desired frames per second of the animaiton */\n  fps?: number\n  /** The frame identifier to use, has to be one of animationNames */\n  frameName?: string\n  /** The URL of the texture JSON (if using JSON-Array or JSON-Hash) */\n  textureDataURL?: string\n  /** The URL of the texture image */\n  textureImageURL?: string\n  /** Whether or not the animation should loop */\n  loop?: boolean\n  /** The number of frames of the animation (required if using plain spritesheet without JSON) */\n  numberOfFrames?: number\n  /** Whether or not the animation should auto-start when all assets are loaded */\n  autoPlay?: boolean\n  /** The animation names of the spritesheet (if the spritesheet -with JSON- contains more animation sequences) */\n  animationNames?: Array\u003cstring\u003e\n  /** Event callback when the animation starts */\n  onStart?: Function\n  /** Event callback when the animation ends */\n  onEnd?: Function\n  /** Event callback when the animation loops */\n  onLoopEnd?: Function\n  /** Event callback when each frame changes */\n  onFrame?: Function\n  /** Control when the animation runs */\n  play?: boolean\n  /** Control when the animation pauses */\n  pause?: boolean\n  /** Whether or not the Sprite should flip sides on the x-axis */\n  flipX?: boolean\n  /** Sets the alpha value to be used when running an alpha test. https://threejs.org/docs/#api/en/materials/Material.alphaTest */\n  alphaTest?: number\n}\n```\n\nThe SpriteAnimator component provided by drei is a powerful tool for animating sprites in a simple and efficient manner. It allows you to create sprite animations by cycling through a sequence of frames from a sprite sheet image or JSON data.\n\nNotes:\n\n- The SpriteAnimator component internally uses the useFrame hook from solid-three-fiber (r3f) for efficient frame updates and rendering.\n- The sprites should contain equal size frames\n- Trimming of spritesheet frames is not yet supported\n\n```jsx\n\u003cSpriteAnimator\n  position={[-3.5, -2.0, 2.5]}\n  startFrame={0}\n  scaleFactor={0.125}\n  autoPlay={true}\n  loop={true}\n  numberOfFrames={16}\n  textureImageURL={'./alien.png'}\n/\u003e\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\u003cStats showPanel={0} className=\"stats\" {...props} /\u003e\n```\n\nYou can choose to mount Stats to a different DOM Element - for example, for custom styling:\n\n```jsx\nconst node = document.createElement('div')\n\nonMount(() =\u003e {\n  node.id = 'test'\n  document.body.appendChild(node)\n  onCleanup(() =\u003e document.body.removeChild(node))\n})\n\nreturn \u003cStats parent={parent} /\u003e\n```\n\n#### StatsGl\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-statsgl--default-story)\n\nAdds [stats-gl](https://github.com/RenaudRohlinger/stats-gl/) to document.body. It takes over the render-loop!\n\n```jsx\n\u003cStatsGl className=\"stats\" {...props} /\u003e\n```\n\n#### Wireframe\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/staging-wireframe--wireframe-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/2572o5\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/2572o5/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nRenders an Antialiased, shader based wireframe on or around a geometry.\n\n```jsx\n\u003cT.Mesh\u003e\n  \u003cgeometry /\u003e\n  \u003cmaterial /\u003e\n\n  \u003cWireframe /\u003e // Will apply wireframe on top of existing material on this mesh\n\u003c/T.Mesh\u003e\n\n// OR\n\u003cWireframe\n  geometry={geometry | geometryRef} // Will create the wireframe based on input geometry.\n\n  // Other props\n  simplify={false} // Remove some edges from wireframes\n  fill={\"#00ff00\"} // Color of the inside of the wireframe\n  fillMix={0} // Mix between the base color and the Wireframe 'fill'. 0 = base; 1 = wireframe\n  fillOpacity={0.25} // Opacity of the inner fill\n  stroke={\"#ff0000\"} // Color of the stroke\n  strokeOpacity={1} // Opacity of the stroke\n  thickness={0.05} // Thinkness of the lines\n  colorBackfaces={false} // Whether to draw lines that are facing away from the camera\n  backfaceStroke={\"#0000ff\"} // Color of the lines that are facing away from the camera\n  dashInvert={true} // Invert the dashes\n  dash={false} // Whether to draw lines as dashes\n  dashRepeats={4} // Number of dashes in one seqment\n  dashLength={0.5} // Length of each dash\n  squeeze={false} // Narrow the centers of each line segment\n  squeezeMin={0.2} // Smallest width to squueze to\n  squeezeMax={1} // Largest width to squeeze from\n/\u003e\n\n```\n\n#### useDepthBuffer\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/tx1pq\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/tx1pq/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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 \u003cSomethingThatNeedsADepthBuffer depthBuffer={depthBuffer} /\u003e\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`.\n\n```tsx\ntype FBOSettings = {\n  /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default: 0 */\n  samples?: number\n  /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */\n  depth?: boolean\n} \u0026 THREE.WebGLRenderTargetOptions\n\nexport function useFBO(\n  /** Width in pixels, or settings (will render fullscreen by default) */\n  width?: number | FBOSettings,\n  /** Height in pixels */\n  height?: number,\n  /**Settings */\n  settings?: FBOSettings\n): THREE.WebGLRenderTarget {\n```\n\n```jsx\nconst target = useFBO({ stencilBuffer: false })\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/py4db\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/py4db/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cT.Mesh raycast={useCamera(customCamera)} /\u003e\n```\n\n#### useCubeCamera\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usecubecamera)\n\nCreates a [`THREE.CubeCamera`](https://threejs.org/docs/#api/en/cameras/CubeCamera) that renders into a `fbo` renderTarget and that you can `update()`.\n\n```tsx\nexport function useCubeCamera({\n  /** Resolution of the FBO, 256 */\n  resolution?: number\n  /** Camera near, 0.1 */\n  near?: number\n  /** Camera far, 1000 */\n  far?: number\n  /** Custom environment map that is temporarily set as the scenes background */\n  envMap?: THREE.Texture\n  /** Custom fog that is temporarily set as the scenes fog */\n  fog?: Fog | FogExp2\n})\n```\n\n```jsx\nconst { fbo, camera, update } = useCubeCamera()\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 solid-three `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) ? \u003cFallback /\u003e : \u003cCanvas\u003e...\u003c/Canvas\u003e\n\n\u003cSuspense fallback={null}\u003e\n  \u003cApp /\u003e\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  \u003cT.Mesh scale={scale()}\u003e\n    \u003cT.PlaneGeometry /\u003e\n    \u003cT.MeshBasicMaterial map={imageTexture} /\u003e\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] = createSignal()\nuseCursor(hovered, /*'pointer', 'auto'*/)\nreturn (\n  \u003cT.Mesh onPointerOver={() =\u003e set(true)} onPointerOut={() =\u003e set(false)}\u003e\n```\n\n#### useIntersect\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/gsm1y\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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/#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, setRef] = useIntersect((visible) =\u003e console.log('object is visible', visible))\nreturn \u003cT.Mesh ref={setRef} /\u003e\n```\n\n#### useBoxProjectedEnv\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/s006f\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/s006f/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThe cheapest possible way of getting reflections in threejs. This will box-project the current environment map onto a plane. It returns an object that you need to spread over its material. The spread object contains a ref, onBeforeCompile and customProgramCacheKey. If you combine it with drei/CubeCamera you can \"film\" a single frame of the environment and feed it to the material, thereby getting realistic reflections at no cost. Align it with the position and scale properties.\n\n```jsx\nconst projection = useBoxProjectedEnv(\n  [0, 0, 0], // Position\n  [1, 1, 1]  // Scale\n)\n\n\u003cCubeCamera frames={1}\u003e\n  {(texture) =\u003e (\n    \u003cT.Mesh\u003e\n      \u003cT.PlaneGeometry /\u003e\n      \u003cT.MeshStandardMaterial envMap={texture} {...projection()} /\u003e\n    \u003c/T.Mesh\u003e\n  )}\n\u003c/CubeCamera\u003e\n```\n\n#### useTrail\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-trail--use-trail-st)\n\nA hook to obtain an array of points that make up a [Trail](#trail). You can use this array to drive your own `MeshLine` or make a trail out of anything you please.\n\nNote: The hook returns a ref (`MutableRefObject\u003cVector3[]\u003e`) this means updates to it will not trigger a re-draw, thus keeping this cheap.\n\n```js\nconst points = useTrail(\n  target, // Required target object. This object will produce the trail.\n  {\n    length, // Length of the line\n    decay, // How fast the line fades away\n    local, // Wether to use the target's world or local positions\n    stride, // Min distance between previous and current point\n    interval, // Number of frames to wait before next calculation\n  }\n)\n\n// To use...\nuseFrame(() =\u003e {\n  meshLineRef.position.setPoints(points())\n})\n```\n\n#### useSurfaceSampler\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-decal--decal-st)\n\nA hook to obtain the result of the [`\u003cSampler /\u003e`](#sampler) as a buffer. Useful for driving anything other than `InstancedMesh` via the Sampler.\n\n```js\nconst buffer = useSurfaceSampler(\n  mesh, // Mesh to sample\n  count, // [Optional] Number of samples (default: 16)\n  transform, // [Optional] Transformation function. Same as in `\u003cSampler /\u003e`\n  weight, // [Optional] Same as in `\u003cSampler /\u003e`\n  instancedMesh // [Optional] Instanced mesh to scatter\n)\n```\n\n### FaceLandmarker\n\n![](https://img.shields.io/badge/-suspense-brightgreen)\n\nA @mediapipe/tasks-vision [`FaceLandmarker`](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.facelandmarker) provider, as well as a `useFaceLandmarker` hook.\n\n```tsx\n\u003cFaceLandmarker\u003e{/* ... */}\u003c/FaceLandmarker\u003e\n```\n\nIt will instanciate a FaceLandmarker object with the following defaults:\n\n```tsx\n{\n  basePath: \"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@x.y.z/wasm\", // x.y.z will value the @mediapipe/tasks-vision version, eg: 0.10.2\n  options: {\n    baseOptions: {\n      modelAssetPath: \"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task\",\n      delegate: \"GPU\",\n    },\n    runningMode: \"VIDEO\",\n    outputFaceBlendshapes: true,\n    outputFacialTransformationMatrixes: true,\n  }\n}\n```\n\nYou can override defaults, like for example self-host tasks-vision's `wasm/` and `face_landmarker.task` model in you `public/` directory:\n\n```sh\n$ ln -s ../node_modules/@mediapipe/tasks-vision/wasm/ public/tasks-vision-wasm\n$ curl https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task -o public/face_landmarker.task\n```\n\n```tsx\nimport { FaceLandmarkerDefaults } from 'solid-drei'\n\nconst visionBasePath = new URL(\"/tasks-vision-wasm\", import.meta.url).toString()\nconst modelAssetPath = new URL(\"/face_landmarker.task\", import.meta.url).toString()\n\nconst faceLandmarkerOptions = { ...FaceLandmarkerDefaults.options };\nfaceLandmarkerOptions.baseOptions.modelAssetPath = modelAssetPath;\n\n\u003cFaceLandmarker basePath={visionBasePath} options={faceLandmarkerOptions}\u003e\n```\n\n# Loading\n\n#### Loader\n\n![](https://img.shields.io/badge/-Dom only-red)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/0buje\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/0buje/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cCanvas\u003e\n  \u003cSuspense fallback={null}\u003e\n    \u003cAsyncModels /\u003e\n  \u003c/Suspense\u003e\n\u003c/Canvas\u003e\n\u003cLoader /\u003e\n```\n\nYou can override styles, too.\n\n```jsx\n\u003cLoader\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) =\u003e `Loading ${p.toFixed(2)}%`} // Text\n  initialState={(active) =\u003e active} // Initial black out state\n\u003e\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 progress = useProgress()\n  return \u003cHtml center\u003e{progress.progress} % loaded\u003c/Html\u003e\n}\n\nreturn (\n  \u003cSuspense fallback={\u003cLoader /\u003e}\u003e\n    \u003cAsyncModels /\u003e\n  \u003c/Suspense\u003e\n)\n```\n\nIf you want to use selectors u can pass a selector-function to `useProgress`. It will return an `Accessor\u003cT\u003e`.\n\n```jsx\nconst errors = useProgress((state) =\u003e 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\u003e **Note** \u003cbr\u003eIf you are using the CDN loaded draco binaries, you can get a small speedup in loading time by prefetching them.\n\u003e\n\u003e You can accomplish this by adding two `\u003clink\u003e` tags to your `\u003chead\u003e` tag, as below. The version in those URLs must exactly match what [useGLTF](src/core/useGLTF.tsx#L18) uses for this to work. If you're using create-react-app, `public/index.html` file contains the `\u003chead\u003e` tag.\n\u003e\n\u003e ```html\n\u003e \u003clink\n\u003e   rel=\"prefetch\"\n\u003e   crossorigin=\"anonymous\"\n\u003e   href=\"https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_wasm_wrapper.js\"\n\u003e /\u003e\n\u003e \u003clink\n\u003e   rel=\"prefetch\"\n\u003e   crossorigin=\"anonymous\"\n\u003e   href=\"https://www.gstatic.com/draco/versioned/decoders/1.5.5/draco_decoder.wasm\"\n\u003e /\u003e\n\u003e ```\n\u003e\n\u003e It is recommended that you check your browser's network tab to confirm that the correct URLs are being used, and that the files do get loaded from the prefetch cache on subsequent requests.\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 \u003cT.Primitive object={fbx()} /\u003e\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 resources = 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 \u003cT.MeshStandardMaterial {...props()} /\u003e\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 \u003cT.MeshStandardMaterial map={texture} /\u003e\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#### useVideoTexture\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/loaders-videotexture) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/39hg8\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/39hg8/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/2cemck\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/2cemck/screenshot.png?v2\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA convenience hook that returns a `THREE.VideoTexture` and integrates loading into suspense. By default it falls back until the `canplay` event. Then it starts playing the video, which, if the video is muted, is allowed in the browser without user interaction.\n\n```tsx\ntype VideoTextureProps = {\n  unsuspend?: 'canplay' | 'canplaythrough' | 'loadedmetadata'\n  muted?: boolean\n  loop?: boolean\n  start?: boolean\n  crossOrigin?: string\n}\n\nexport function useVideoTexture(src: string, props: VideoTextureProps) {\n  const { unsuspend, start, crossOrigin, muted, loop } = {\n    unsuspend: 'canplay',\n    crossOrigin: 'Anonymous',\n    muted: true,\n    loop: true,\n    start: true\n    ...props,\n  }\n```\n\n```jsx\nconst texture = useVideoTexture(\"/video.mp4\")\nreturn (\n  \u003cT.Mesh\u003e\n    \u003cT.MeshBasicMaterial map={texture()} toneMapped={false} /\u003e\n```\n\nIt also accepts a [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) from eg. [`.getDisplayMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) or [`.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia):\n\n```jsx\nconst [stream, setStream] = createSignal()\n\nreturn (\n  \u003cT.Mesh onClick={async () =\u003e setStream(await navigator.mediaDevices.getDisplayMedia({ video: true }))}\u003e\n    \u003cT.Suspense fallback={\u003cT.MeshBasicMaterial wireframe /\u003e}\u003e\n      \u003cVideoMaterial src={stream()} /\u003e\n    \u003c/T.uspense\u003e\n```\n\n```jsx\nfunction VideoMaterial({ src }) {\n  const texture = useVideoTexture(src)\n\n  return \u003cT.MeshBasicMaterial map={texture()} toneMapped={false} /\u003e\n}\n```\n\nNB: It's important to wrap `VideoMaterial` into `Suspense` since, `useVideoTexture(src)` here will be suspended until the user shares its screen.\n\n#### useTrailTexture\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/fj1qlg\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/fj1qlg/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis hook returns a `THREE.Texture` with a pointer trail which can be used in shaders to control displacement among other things, and a movement callback `event =\u003e void` which reads from `event.uv`.\n\n```tsx\ntype TrailConfig = {\n  /** texture size (default: 256x256) */\n  size?: number\n  /** Max age (ms) of trail points (default: 750) */\n  maxAge?: number\n  /** Trail radius (default: 0.3) */\n  radius?: number\n  /** Canvas trail opacity (default: 0.2) */\n  intensity?: number\n  /** Add points in between slow pointer events (default: 0) */\n  interpolate?: number\n  /** Moving average of pointer force (default: 0) */\n  smoothing?: number\n  /** Minimum pointer force (default: 0.3) */\n  minForce?: number\n  /** Blend mode (default: 'screen') */\n  blend?: CanvasRenderingContext2D['globalCompositeOperation']\n  /** Easing (default: easeCircOut) */\n  ease?: (t: number) =\u003e number\n}\n```\n\n```jsx\nconst trail = useTrailTexture(config)\nreturn (\n  \u003cT.Mesh onPointerMove={trail().onMove}\u003e\n    \u003cT.MeshStandardMaterial displacementMap={trail().texture} /\u003e\n```\n\n#### useFont\n\nUses THREE.FontLoader to load a font and returns a `THREE.Font` object. It also accepts a JSON object as a parameter. You can use this to preload or share a font across multiple components.\n\n```jsx\nconst font = useFont('/fonts/helvetiker_regular.typeface.json')\nreturn \u003cText3D font={font()} /\u003e\n```\n\nIn order to preload you do this:\n\n```jsx\nuseFont.preload('/fonts/helvetiker_regular.typeface.json')\n```\n\n# Performance\n\n#### Instances\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/h8o2d\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/h8o2d/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/i6t0j\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/i6t0j/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA wrapper around [THREE.InstancedMesh](https://threejs.org/docs/#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\u003cInstances\n  limit={1000} // Optional: max amount of items (for calculating buffer size)\n  range={1000} // Optional: draw-range\n\u003e\n  \u003cT.BoxGeometry /\u003e\n  \u003cT.MeshStandardMaterial /\u003e\n  \u003cInstance\n    color=\"red\"\n    scale={2}\n    position={[1, 2, 3]}\n    rotation={[Math.PI / 3, 0, 0]}\n    onClick={onClick} ... /\u003e\n  // As many as you want, make them conditional, mount/unmount them, lazy load them, etc ...\n\u003c/Instances\u003e\n```\n\nYou can nest Instances and use relative coordinates!\n\n```jsx\n\u003cgroup position={[1, 2, 3]} rotation={[Math.PI / 2, 0, 0]}\u003e\n  \u003cInstance /\u003e\n\u003c/group\u003e\n```\n\nInstances can also receive non-instanced objects, for instance annotations!\n\n```jsx\n\u003cInstance\u003e\n  \u003cHtml\u003ehello from the dom\u003c/Html\u003e\n\u003c/Instance\u003e\n```\n\nYou can define events on them!\n\n```jsx\n\u003cInstance onClick={...} onPointerOver={...} /\u003e\n```\n\n👉 Note: While creating instances declaratively keeps all the power of components with reduced draw calls, it comes at the cost of CPU overhead. For cases like foliage where you want no CPU overhead with thousands of intances you should use THREE.InstancedMesh such as in this [example](https://codesandbox.io/s/grass-shader-5xho4?file=/src/Grass.js).\n\n#### Merged\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/l900i\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/l900i/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cMerged meshes={[box, sphere]}\u003e\n  {(Box, Sphere) =\u003e (\n    \u003c\u003e\n      \u003cBox position={[-2, -2, 0]} color=\"red\" /\u003e\n      \u003cBox position={[-3, -3, 0]} color=\"tomato\" /\u003e\n      \u003cSphere scale={0.7} position={[2, 1, 0]} color=\"green\" /\u003e\n      \u003cSphere scale={0.7} position={[3, 2, 0]} color=\"teal\" /\u003e\n    \u003c/\u003e\n  )}\n\u003c/Merged\u003e\n```\n\nYou may also use object notation, which is good for loaded models.\n\n```jsx\nfunction Model({ url }) {\n  const gltf = useGLTF(url)\n  return (\n    \u003cMerged meshes={gltf()?.nodes}\u003e\n      {({ Screw, Filter, Pipe }) =\u003e (\n        \u003c\u003e\n          \u003cScrew /\u003e\n          \u003cFilter position={[1, 2, 3]} /\u003e\n          \u003cPipe position={[4, 5, 6]} /\u003e\n        \u003c/\u003e\n      )}\n    \u003c/Merged\u003e\n  )\n}\n```\n\n#### Points\n\nA wrapper around [THREE.Points](https://threejs.org/docs/#api/en/objects/Points). It has the same api and properties as Instances.\n\n```jsx\n\u003cPoints\n  limit={1000} // Optional: max amount of items (for calculating buffer size)\n  range={1000} // Optional: draw-range\n\u003e\n  \u003cT.PointsMaterial vertexColors /\u003e\n  \u003cPoint position={[1, 2, 3]} color=\"red\" onClick={onClick} onPointerOver={onPointerOver} ... /\u003e\n  // As many as you want, make them conditional, mount/unmount them, lazy load them, etc ...\n\u003c/Points\u003e\n```\n\nIf you just want to use buffers for position, color and size, you can use the alternative API:\n\n```jsx\n\u003cPoints positions={positionsBuffer} colors={colorsBuffer} sizes={sizesBuffer}\u003e\n  \u003cT.PointsMaterial /\u003e\n\u003c/Points\u003e\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\u003cSegments limit={1000} lineWidth={1.0}\u003e\n  \u003cSegment start={[0, 0, 0]} end={[0, 10, 0]} color=\"red\" /\u003e\n  \u003cSegment start={[0, 0, 0]} end={[0, 10, 10]} color={[1, 0, 1]} /\u003e\n\u003c/Segments\u003e\n```\n\n##### Ref based (for fast updates):\n\n```jsx\nlet ref;\n\n// E.g. to change segment position each frame.\nuseFrame(() =\u003e {\n  ref.start.set(0,0,0)\n  ref.end.set(10,10,0)\n  ref.color.setRGB(0,0,0)\n})\n// ...\n\u003cSegments\n  limit={1000}\n  lineWidth={1.0}\n\u003e\n  \u003cSegment ref={ref} /\u003e\n\u003c/Segments\u003e\n```\n\n#### Detailed\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-detailed--detailed-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/12nmp\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/12nmp/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA wrapper around [THREE.LOD](https://threejs.org/docs/#api/en/objects/LOD) (Level of detail).\n\n```jsx\n\u003cDetailed distances={[0, 10, 20]} {...props}\u003e\n  \u003cT.Mesh geometry={highDetail} /\u003e\n  \u003cT.Mesh geometry={mediumDetail} /\u003e\n  \u003cT.Mesh geometry={lowDetail} /\u003e\n\u003c/Detailed\u003e\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/#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\u003cCanvas\u003e\n  \u003cSuspense fallback={null}\u003e\n    \u003cModel /\u003e\n    \u003cPreload all /\u003e\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\u003cCanvas\u003e\n  \u003cSuspense fallback={null}\u003e\n    \u003cModel /\u003e\n    \u003cBakeShadows /\u003e\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\u003cT.Mesh raycast={meshBounds} /\u003e\n```\n\n#### AdaptiveDpr\n\nDrop this component into your scene and it will cut the pixel-ratio on regress according to the canvas's performance min/max settings. This allows you to temporarily reduce visual quality in exchange 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\u003cAdaptiveDpr pixelated /\u003e\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\u003cAdaptiveEvents /\u003e\n```\n\n#### Bvh\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/performance-usebvh--default-story)\n\nAn abstraction around [gkjohnson/three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh) to speed up raycasting exponentially. Use this component to wrap your scene, a sub-graph, a model or single mesh, and it will automatically compute boundsTree and assign acceleratedRaycast. This component is side-effect free, once unmounted or disabled it will revert to the original raycast.\n\n```tsx\nexport interface BVHOptions {\n  /** Split strategy, default: SAH (slowest to construct, fastest runtime, least memory) */\n  splitStrategy?: 'CENTER' | 'AVERAGE' | 'SAH'\n  /** Print out warnings encountered during tree construction, default: false */\n  verbose?: boolean\n  /** If true then the bounding box for the geometry is set once the BVH has been constructed, default: true */\n  setBoundingBox?: boolean\n  /** The maximum depth to allow the tree to build to, default: 40 */\n  maxDepth?: number\n  /** The number of triangles to aim for in a leaf node, default: 10 */\n  maxLeafTris?: number\n}\n\nexport type BvhProps = BVHOptions \u0026\n  ThreeProps\u003c'Group'\u003e \u0026 {\n    /**Enabled, default: true */\n    enabled?: boolean\n    /** Use .raycastFirst to retrieve hits which is generally faster, default: false */\n    firstHitOnly?: boolean\n  }\n```\n\n```jsx\n\u003cCanvas\u003e\n  \u003cBvh firstHitOnly\u003e\n    \u003cScene /\u003e\n  \u003c/Bvh\u003e\n\u003c/Canvas\u003e\n```\n\n#### PerformanceMonitor\n\nThis component will collect the average fps (frames per second) over time. If after a couple of iterations the averages are below or above a threshold it will trigger onIncline and onDecline callbacks that allow you to respond. Typically you would reduce the quality of your scene, the resolution, effects, the amount of stuff to render, or, increase it if you have enough framerate to fill.\n\nSince this would normally cause ping-ponging between the two callbacks you define upper and lower framerate bounds, as long as you stay within that margin nothing will trigger. Ideally your app should find its way into that margin by gradually altering quality.\n\n```tsx\ntype PerformanceMonitorProps = {\n  /** How much time in milliseconds to collect an average fps, 250 */\n  ms?: number\n  /** How many interations of averages to collect, 10 */\n  iterations?: number\n  /** The percentage of iterations that are matched against the lower and upper bounds, 0.75 */\n  threshold?: number\n  /** A function that receive the max device refreshrate to determine lower and upper bounds which create a margin where neither incline nor decline should happen, (refreshrate) =\u003e (refreshrate \u003e 90 ? [50, 90] : [50, 60]) */\n  bounds: (refreshrate: number) =\u003e [lower: number, upper: number]\n  /** How many times it can inline or decline before onFallback is called, Infinity */\n  flipflops?: number\n  /** The factor increases and decreases between 0-1, this prop sets the initial value, 0.5 */\n  factor?: number\n  /** The step that gets added or subtracted to or from the factor on each incline/decline, 0.1 */\n  step?: number\n  /** When performance is higher than the upper bound (good!) */\n  onIncline?: (api: PerformanceMonitorApi) =\u003e void\n  /** When performance is lower than the upper bound (bad!) */\n  onDecline?: (api: PerformanceMonitorApi) =\u003e void\n  /** Incline and decline will change the factor, this will trigger when that happened */\n  onChange?: (api: PerformanceMonitorApi) =\u003e void\n  /** Called after when the number of flipflops is reached, it indicates instability, use the function to set a fixed baseline */\n  onFallback?: (api: PerformanceMonitorApi) =\u003e void\n  /** Children may use the usePerformanceMonitor hook */\n  children?: JSX.Element\n}\n```\n\nAll callbacks give you the following data:\n\n```tsx\ntype PerformanceMonitorApi = {\n  /** Current fps */\n  fps: number\n  /** Current performance factor, between 0 and 1 */\n  factor: number\n  /** Current highest fps, you can use this to determine device refresh rate */\n  refreshrate: number\n  /** Fps samples taken over time  */\n  frames: number[]\n  /** Averages of frames taken over n iterations   */\n  averages: number[]\n}\n```\n\nA simple example for regulating the resolution. It starts out with 1.5, if the system falls below the bounds it goes to 1, if it's fast enough it goes to 2.\n\n```jsx\nfunction App() {\n  const [dpr, setDpr] = createSignal(1.5)\n  return (\n    \u003cCanvas dpr={dpr()}\u003e\n      \u003cPerformanceMonitor onIncline={() =\u003e setDpr(2)} onDecline={() =\u003e setDpr(1)} \u003e\n```\n\nYou can also use the `onChange` callback to get notified when the average changes in whichever direction. This allows you to make gradual changes. It gives you a `factor` between 0 and 1, which is increased by incline and decreased by decline. The `factor` is initially 0.5 by default. If your app starts with lowest defaults and gradually increases quality set `factor` to 0. If it starts with highest defaults and decreases quality, set it to 1. If it starts in the middle and can either increase or decrease, set it to 0.5.\n\nThe following starts at the highest dpr (2) and clamps the gradual dpr between 0.5 at the lowest and 2 at the highest. If the app is in trouble it will reduce `factor` by `step` until it is either 0 or the app has found its sweet spot above that.\n\n```jsx\nimport round from 'lodash/round'\n\nconst [dpr, set] = createSignal(2)\nreturn (\n \u003cCanvas dpr={dpr()}\u003e\n  \u003cPerformanceMonitor factor={1} onChange={({ factor }) =\u003e setDpr(round(0.5 + 1.5 * factor, 1))} \u003e\n```\n\nIf you still experience flip flops despite the bounds you can define a limit of `flipflops`. If it is met `onFallback` will be triggered which typically sets a lowest possible baseline for the app. After the fallback has been called PerformanceMonitor will shut down.\n\n```jsx\n\u003cPerformanceMonitor flipflops={3} onFallback={() =\u003e setDpr(1)}\u003e\n```\n\nPerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.\n\n```jsx\n;\u003cPerformanceMonitor\u003e\n  \u003cEffects /\u003e\n\u003c/PerformanceMonitor\u003e\n\nfunction Effects() {\n  usePerformanceMonitor({ onIncline, onDecline, onFallback, onChange })\n  // ...\n}\n```\n\n# Portals\n\n#### Hud\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/py4db\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/py4db/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nRenders a heads-up-display (HUD). Each HUD is a scene on top of the previous. That scene is inside a React `createPortal` and is completely isolated, you can have your own cameras in there, environments, etc. The first HUD (`renderpriotity === 1`) will clear the scene and render the default scene, it needs to be the first to execute! Make sure to be explicit about the `renderpriority` of your HUDs.\n\n```tsx\ntype HudProps = {\n  /** Any React node */\n  children: JSX.Element\n  /** Render priority, default: 1 */\n  renderPriority?: number\n}\n```\n\n\u003c!-- prettier-ignore --\u003e\n```jsx\n{\n  /* Renders on top of the default scene with a perspective camera */\n}\n\u003cHud\u003e\n  \u003cPerspectiveCamera makeDefault position={[0, 0, 10]} /\u003e\n  \u003cT.Mesh\u003e\n    \u003cT.RingGeometry /\u003e\n  \u003c/T.Mesh\u003e\n\u003c/Hud\u003e\n{\n  /* Renders on top of the previous HUD with an orthographic camera */\n}\n\u003cHud renderPriority={2}\u003e\n  \u003cOrthographicCamera makeDefault position={[0, 0, 10]} /\u003e\n  \u003cT.Mesh\u003e\n    \u003cT.BoxGeometry /\u003e\n  \u003c/T.Mesh\u003e\n\u003c/Hud\u003e\n```\n\n#### View\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/v5i9wl\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/v5i9wl/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/bp6tmc\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/bp6tmc/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/1wmlew\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/1wmlew/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nViews use gl.scissor to cut the viewport into segments. You tie a view to a tracking div which then controls the position and bounds of the viewport. This allows you to have multiple views with a single, performant canvas. These views will follow their tracking elements, scroll along, resize, etc.\n\nIt is advisable to re-connect the event system to a parent that contains both the canvas and the html content.\nThis ensures that both are accessible/selectable and even allows you to mount controls or other deeper\nintegrations into your view.\n\n\u003e Note that `solid-three` newer than `^8.1.0` is required for `View` to work correctly if the\n\u003e canvas/react three fiber root is not fullscreen. A warning will be logged if drei is used with older\n\u003e versions of `solid-three`.\n\n```tsx\n\u003cView\n  /** The tracking element, the view will be cut according to its whereabouts */\n  track: React.MutableRefObject\u003cHTMLElement\u003e\n  /** Views take over the render loop, optional render index (1 by default) */\n  index?: number\n  /** If you know your view is always at the same place set this to 1 to avoid needless getBoundingClientRect overhead. The default is Infinity, which is best for css animations */\n  frames?: number\n  /** The scene to render, if you leave this undefined it will render the default scene */\n  children?: JSX.Element\n/\u003e\n```\n\n```jsx\nlet container\nlet tracking\nreturn (\n  \u003cmain ref={container}\u003e\n    \u003ch1\u003eHtml content here\u003c/h1\u003e\n    \u003cdiv ref={tracking} style={{ width: 200, height: 200 }} /\u003e\n    \u003cCanvas eventSource={container}\u003e\n      \u003cView track={tracking}\u003e\n        \u003cT.Mesh /\u003e\n        \u003cOrbitControls /\u003e\n      \u003c/View\u003e\n```\n\n#### RenderTexture\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/0z8i2c\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/0z8i2c/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e  \n\u003c/p\u003e\n\nThis component allows you to render a live scene into a texture which you can then apply to a material. The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.\n\n```tsx\ntype Props = ThreeProps\u003c'Texture'\u003e \u0026 {\n  /** Optional width of the texture, defaults to viewport bounds */\n  width?: number\n  /** Optional height of the texture, defaults to viewport bounds */\n  height?: number\n  /** Optional fbo samples */\n  samples?: number\n  /** Optional stencil buffer, defaults to false */\n  stencilBuffer?: boolean\n  /** Optional depth buffer, defaults to true */\n  depthBuffer?: boolean\n  /** Optional generate mipmaps, defaults to false */\n  generateMipmaps?: boolean\n  /** Optional render priority, defaults to 0 */\n  renderPriority?: number\n  /** Optional event priority, defaults to 0 */\n  eventPriority?: number\n  /** Optional frame count, defaults to Infinity. If you set it to 1, it would only render a single frame, etc */\n  frames?: number\n  /** Optional event compute, defaults to undefined */\n  compute?: (event: any, state: any, previous: any) =\u003e false | undefined\n  /** Children will be rendered into a portal */\n  children: JSX.Element\n}\n```\n\n```jsx\n\u003cT.Mesh\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cT.MeshStandardMaterial\u003e\n    \u003cRenderTexture attach=\"map\"\u003e\n      \u003cT.Mesh /\u003e\n```\n\n#### Mask\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/7n2yru\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/7n2yru/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/z3f2mw\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/z3f2mw/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e  \n\u003c/p\u003e\n\nMasks use the stencil buffer to cut out areas of the screen. This is usually cheaper as it doesn't require double renders or createPortal.\n\n```tsx\n\u003cMask\n  /** Each mask must have an id, you can have compound masks referring to the same id */\n  id: number\n  /** If colors of the masks own material will leak through, default: false */\n  colorWrite?: boolean\n  /** If depth  of the masks own material will leak through, default: false */\n  depthWrite?: boolean\n/\u003e\n```\n\nFirst you need to define a mask, give it the shape that you want.\n\n```jsx\n\u003cMask id={1}\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cT.MeshBasicMaterial /\u003e\n\u003c/Mask\u003e\n```\n\nNow refer to it with the `useMask` hook and the same id, your content will now be masked out by the geometry defined above.\n\n```jsx\nconst stencil = useMask(1)\nreturn (\n  \u003cT.Mesh\u003e\n    \u003cT.TorusKnotGeometry /\u003e\n    \u003cT.MeshStandardMaterial {...stencil} /\u003e\n```\n\nYou can build compound masks with multiple shapes by re-using an id. You can also use the mask as a normal mesh by providing `colorWrite` and `depthWrite` props.\n\n```jsx\n\u003cMask position={[-1, 0, 0]} id={1}\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cT.MeshBasicMaterial /\u003e\n\u003c/Mask\u003e\n\u003cMask colorWrite depthWrite position={[1, 0, 0]} id={1}\u003e\n  \u003cT.CircleGeometry /\u003e\n  \u003cT.MeshBasicMaterial /\u003e\n\u003c/Mask\u003e\n```\n\nInvert masks individually by providing a 2nd boolean argument to the `useMask` hook.\n\n```jsx\nconst stencil = useMask(1, true)\n```\n\n#### MeshPortalMaterial\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/9m4tpc\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/9m4tpc/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/qvk72r\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/qvk72r/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e  \n  \u003ca href=\"https://codesandbox.io/s/drc6qg\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/drc6qg/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e  \n  \u003ca href=\"https://codesandbox.io/s/ik11ln\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/ik11ln/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n```tsx\nexport type PortalProps = ThreeProps\u003c'ShaderMaterial'\u003e \u0026 {\n  /** Mix the portals own scene with the world scene, 0 = world scene render,\n   *  0.5 = both scenes render, 1 = portal scene renders, defaults to 0 */\n  blend?: number\n  /** Edge fade blur, 0 = no blur (default) */\n  blur?: number\n  /** SDF resolution, the smaller the faster is the start-up time (default: 512) */\n  resolution?: number\n  /** By default portals use relative coordinates, contents are affects by the local matrix transform */\n  worldUnits?: boolean\n  /** Optional event priority, defaults to 0 */\n  eventPriority?: number\n  /** Optional render priority, defaults to 0 */\n  renderPriority?: number\n  /** Optionally diable events inside the portal, defaults to false */\n  events?: boolean\n}\n```\n\nA material that creates a portal into another scene. It is drawn onto the geometry of the mesh that it is applied to. It uses RenderTexture internally, but counteracts the perspective shift of the texture surface, the portals contents are thereby masked by it but otherwise in the same position as if they were in the original scene.\n\n```jsx\n\u003cT.Mesh {...props}\u003e\n  \u003cT.PlaneGeometry /\u003e\n  \u003cMeshPortalMaterial\u003e\n    \u003cT.Mesh\u003e\n      \u003cT.SphereGeometry /\u003e\n    \u003c/T.Mesh\u003e\n  \u003c/MeshPortalMaterial\u003e\n\u003c/T.Mesh\u003e\n```\n\nYou can optionally fade or blur the edges of the portal by providing a `blur` prop, do not forget to make the material transparent in that case. It uses SDF flood-fill to determine the shape, you can thereby blur any geometry.\n\n```jsx\n\u003cMeshPortalMaterial transparent blur={0.5}\u003e\n```\n\nIt is also possible to _enter_ the portal. If blend is 0 your scene will render as usual, if blend is higher it will start to blend the root scene and the portal scene, if blend is 1 it will only render the portal scene. If you put a ref on the material you can transition entering the portal, for instance lerping blend if the camera is close, or on click.\n\n```jsx\n\u003cMeshPortalMaterial blend={1}\u003e\n```\n\n# Staging\n\n#### Center\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-center--default-story)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/x6obrb\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/x6obrb/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/v8s9ij\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/v8s9ij/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCalculates a boundary box and centers its children accordingly.\n\n```tsx\nexport type Props = ThreeProps\u003c'Group'\u003e \u0026 {\n  top?: boolean\n  right?: boolean\n  bottom?: boolean\n  left?: boolean\n  front?: boolean\n  back?: boolean\n  /** Disable all axes */\n  disable?: boolean\n  /** Disable x-axis centering */\n  disableX?: boolean\n  /** Disable y-axis centering */\n  disableY?: boolean\n  /** Disable z-axis centering */\n  disableZ?: boolean\n  /** Precision, defaults to true, see https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject */\n  precise?: boolean\n  /** Callback, fires in the useLayoutEffect phase, after measurement */\n  onCentered?: (props: OnCenterCallbackProps) =\u003e void\n}\n```\n\n```tsx\ntype OnCenterCallbackProps = {\n  /** The next parent above \u003cCenter\u003e */\n  parent: THREE.Object3D\n  /** The outmost container group of the \u003cCenter\u003e component */\n  container: THREE.Object3D\n  width: number\n  height: number\n  depth: number\n  boundingBox: THREE.Box3\n  boundingSphere: THREE.Sphere\n  center: THREE.Vector3\n  verticalAlignment: number\n  horizontalAlignment: number\n  depthAlignment: number\n}\n```\n\n```jsx\n\u003cCenter top left\u003e\n  \u003cT.Mesh /\u003e\n\u003c/Center\u003e\n```\n\nOptionally you can define `onCentered` which calls you back when contents have been measured. This would allow you to easily scale to fit. The following for instance fits a model to screen height.\n\n```jsx\nfunction ScaledModel() {\n  const store = useThree()\n  return (\n    \u003cCenter onCentered={({ container, height }) =\u003e container.scale.setScalar(store.viewport.height / height)}\u003e\n      \u003cModel /\u003e\n    \u003c/Center\u003e\n```\n\n#### Resize\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-resize)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/6yg0i3\"\u003e\u003cimg width=\"20%\" src=\"https://user-images.githubusercontent.com/76580/234665568-2be311d2-1896-4f82-ae20-b10b44c1e952.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCalculates a boundary box and scales its children so the highest dimension is constrained by 1. NB: proportions are preserved.\n\n```tsx\nexport type ResizeProps = ThreeProps\u003c'Group'\u003e \u0026 {\n  /** constrained by width dimension (x axis), undefined */\n  width?: boolean\n  /** constrained by height dimension (y axis), undefined */\n  height?: boolean\n  /** constrained by depth dimension (z axis), undefined */\n  depth?: boolean\n  /** You can optionally pass the Box3, otherwise will be computed, undefined */\n  box3?: THREE.Box3\n  /** See https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject */\n  precise?: boolean\n}\n```\n\n```jsx\n\u003cResize\u003e\n  \u003cT.Mesh /\u003e\n\u003c/Resize\u003e\n```\n\nYou can also specify the dimension to be constrained by:\n\n```jsx\n\u003cResize height\u003e\n  \u003cBox args={[70, 40, 20]}\u003e\n\u003c/Resize\u003e\n```\n\n#### BBAnchor\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-bbanchor--bb-anchor-with-html)\n\nA component using AABB (Axis-aligned bounding boxes) to offset children position by specified multipliers (`anchor` property) on each axis. You can use this component to change children positioning in regard of the parent's bounding box, eg. pinning [Html](#html) component to one of the parent's corners. Multipliers determine the offset value based on the `AABB`'s size:\n\n```\nchildrenAnchor = boundingBoxPosition + (boundingBoxSize * anchor / 2)\n```\n\n```jsx\n\u003cBBAnchor\n  anchor // THREE.Vector3 or [number, number, number]\n  {...groupProps} // All THREE.Group props are valid\n\u003e\n  {children}\n\u003c/BBAnchor\u003e\n```\n\nFor instance, one could want the Html component to be pinned to `positive x`, `positive y`, and `positive z` corner of a [Box](#shapes) object:\n\n```jsx\n\u003cBox\u003e\n  \u003cBBAnchor anchor={[1, 1, 1]}\u003e\n    \u003cHtml center\u003e\n      \u003cspan\u003eHello world!\u003c/span\u003e\n    \u003c/Html\u003e\n  \u003c/BBAnchor\u003e\n\u003c/Box\u003e\n```\n\n#### Bounds\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/rz2g0\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/rz2g0/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/42glz0\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/42glz0/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCalculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes. `observe` will trigger on window resize.\n\n```jsx\n\u003cBounds fit clip observe damping={6} margin={1.2}\u003e\n  \u003cT.Mesh /\u003e\n\u003c/Bounds\u003e\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, go to camera orientations 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. `to` sets a position and target for the camera. `fit` zooms and centers the view.\n\n```jsx\nfunction Foo() {\n  const bounds = useBounds()\n  createEffect(() =\u003e {\n    // Calculate scene bounds\n    bounds().refresh().clip().fit()\n\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    // Or, send the camera to a specific orientatin\n    // bounds.to({position: [0, 10, 10], target: {[5, 5, 0]}})\n  })\n\n\u003cBounds\u003e\n  \u003cFoo /\u003e\n```\n\n#### CameraShake\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-camerashake--camera-shake-story)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/t4l0f\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/t4l0f/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/0ycwe\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/0ycwe/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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;\u003cCameraShake {...config} /\u003e\n```\n\n```ts\ninterface ShakeController {\n  getIntensity: () =\u003e number\n  setIntensity: (val: number) =\u003e void\n}\n```\n\n#### Float\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/2ij9u\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/2ij9u/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis component makes its contents float or hover.\n\n```js\n\u003cFloat\n  speed={1} // Animation speed, defaults to 1\n  rotationIntensity={1} // XYZ rotation intensity, defaults to 1\n  floatIntensity={1} // Up/down float intensity, works like a multiplier with floatingRange,defaults to 1\n  floatingRange={[1, 10]} // Range of y-axis values the object will float within, defaults to [-0.1,0.1]\n\u003e\n  \u003cT.Mesh /\u003e\n\u003c/Float\u003e\n```\n\n#### Stage\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stage--stage-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/57iefg\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/57iefg/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCreates a \"stage\" with proper studio lighting, 0/0/0 top-centred, model-shadows, ground-shadows and optional zoom to fit. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!\n\n```tsx\ntype StageProps = {\n  /** Lighting setup, default: \"rembrandt\" */\n  preset?:\n    | 'rembrandt'\n    | 'portrait'\n    | 'upfront'\n    | 'soft'\n    | { main: [x: number, y: number, z: number]; fill: [x: number, y: number, z: number] }\n  /** Controls the ground shadows, default: \"contact\" */\n  shadows?: boolean | 'contact' | 'accumulative' | StageShadows\n  /** Optionally wraps and thereby centers the models using \u003cBounds\u003e, can also be a margin, default: true */\n  adjustCamera?: boolean | number\n  /** The default environment, default: \"city\" */\n  environment?: PresetsType | Partial\u003cEnvironmentProps\u003e\n  /** The lighting intensity, default: 0.5 */\n  intensity?: number\n  /** To adjust centering, default: undefined */\n  center?: Partial\u003cCenterProps\u003e\n}\n\ntype StageShadows = Partial\u003cAccumulativeShadowsProps\u003e \u0026\n  Partial\u003cRandomizedLightProps\u003e \u0026\n  Partial\u003cContactShadowsProps\u003e \u0026 {\n    type: 'contact' | 'accumulative'\n    /** Shadow plane offset, default: 0 */\n    offset?: number\n    /** Shadow bias, default: -0.0001 */\n    bias?: number\n    /** Shadow normal bias, default: 0 */\n    normalBias?: number\n    /** Shadow map size, default: 1024 */\n    size?: number\n  }\n```\n\nBy default it gives you contact shadows and auto-centering.\n\n```jsx\n\u003cStage adjustCamera intensity={0.5} shadows=\"contact\" environment=\"city\"\u003e\n  \u003cT.Mesh /\u003e\n\u003c/Stage\u003e\n```\n\nFor a little more realistic results enable accumulative shadows, which requires that the canvas, and models, can handle shadows.\n\n```jsx\n\u003cCanvas shadows\u003e\n  \u003cStage shadows=\"accumulative\"\u003e\n    \u003cT.Mesh castShadows /\u003e\n  \u003c/Stage\u003e\n\u003c/Canvas\u003e\n```\n\n#### Backdrop\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/8yfnd\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/8yfnd/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cBackdrop\n  floor={0.25} // Stretches the floor segment, 0.25 by default\n  segments={20} // Mesh-resolution, 20 by default\n\u003e\n  \u003cT.MeshStandardMaterial color=\"#353540\" /\u003e\n\u003c/Backdrop\u003e\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\u003cShadow\n  color=\"black\"\n  colorStop={0}\n  opacity={0.5}\n  fog={false} // Reacts to fog (default=false)\n/\u003e\n```\n\n#### Caustics\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/szj6p7\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/szj6p7/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/g7wbe0\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/g7wbe0/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nCaustics are swirls of light that appear when light passes through transmissive surfaces. This component uses a raymarching technique to project caustics onto a catcher plane. It is based on [github/N8python/caustics](https://github.com/N8python/caustics).\n\n```tsx\ntype CausticsProps = ThreeProps\u003c'Group'\u003e \u0026 {\n  /** How many frames it will render, set it to Infinity for runtime, default: 1 */\n  frames?: number\n  /** Enables visual cues to help you stage your scene, default: false */\n  debug?: boolean\n  /** Will display caustics only and skip the models, default: false */\n  causticsOnly: boolean\n  /** Will include back faces and enable the backsideIOR prop, default: false */\n  backside: boolean\n  /** The IOR refraction index, default: 1.1 */\n  ior?: number\n  /** The IOR refraction index for back faces (only available when backside is enabled), default: 1.1 */\n  backsideIOR?: number\n  /** The texel size, default: 0.3125 */\n  worldRadius?: number\n  /** Intensity of the prjected caustics, default: 0.05 */\n  intensity?: number\n  /** Caustics color, default: white */\n  color?: SolidThreeFiber.Color\n  /** Buffer resolution, default: 2048 */\n  resolution?: number\n  /** Camera position, it will point towards the contents bounds center, default: [5, 5, 5] */\n  lightSource?: [x: number, y: number, z: number] | React.MutableRefObject\u003cTHREE.Object3D\u003e\n}\n```\n\nIt will create a transparent plane that blends the caustics of the objects it receives into your scene. It will only render once and not take resources any longer!\n\nMake sure to use the `debug` flag to help you stage your contents. Like ContactShadows and AccumulativeShadows the plane faces Y up. It is recommended to use [leva](https://github.com/pmndrs/leva) to configue the props above as some can be micro fractional depending on the models (intensity, worldRadius, ior and backsideIOR especially).\n\n```jsx\n\u003cCaustics debug backside lightSource={[2.5, 5, -2.5]}\u003e\n  \u003cBottle /\u003e\n  \u003cWineGlass\u003e\n\u003c/Caustics\u003e\n```\n\nSometimes you want to combine caustics for even better visuals, or if you want to emulate multiple lightsources. Use the `causticsOnly` flag in such cases and it will use the model inside only for calculations. Since all loaders in Fiber should be cached there is no expense or memory overhead doing this.\n\n```jsx\n\u003cCaustics backside lightSource={[2.5, 5, -2.5]} \u003e\n  \u003cWineGlass /\u003e\n\u003c/Caustics\u003e\n\u003cCaustics causticsOnly backside lightSource={[-2.5, 5, 2.5]} ior={0.79} worldRadius={0.0124}\u003e\n  \u003cWineGlass /\u003e\n\u003c/Caustics\u003e\n```\n\nThe light source can either be defined by prop or by reference. Use the latter if you want to control the light source, for instance in order to move or animate it. Runtime caustics with frames set to `Infinity`, a low resolution and no backside can be feasible.\n\n```jsx\nlet lightSource\n\n\u003cCaustics frames={Infinity} resolution={256} lightSource={lightSource} \u003e\n  \u003cWineGlass /\u003e\n\u003c/Caustics\u003e\n\u003cT.Object3d ref={lightSource} position={[2.5, 5, -2.5]} /\u003e\n```\n\n#### ContactShadows\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-contactshadows--contact-shadow-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/qxjoj\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/qxjoj/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA [contact shadow](https://threejs.org/examples/#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\u003cContactShadows opacity={1} scale={10} blur={1} far={10} resolution={256} color=\"#000000\" /\u003e\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\u003cContactShadows frames={1} /\u003e\n```\n\n### RandomizedLight\n\nA randomized light that internally runs multiple lights and jiggles them. See below, you would normally pair it with `AccumulativeShadows`. This component is context aware, paired with AccumulativeShadows it will take the number of frames from its parent.\n\n```tsx\ntype RandomizedLightProps = ThreeProps\u003c'Group'\u003e \u0026 {\n  /** How many frames it will jiggle the lights, 1.\n   *  Frames is context aware, if a provider like AccumulativeShadows exists, frames will be taken from there!  */\n  frames?: number\n  /** Light position, [0, 0, 0] */\n  position?: [x: number, y: number, z: number]\n  /** Radius of the jiggle, higher values make softer light, 5 */\n  radius?: number\n  /** Amount of lights, 8 */\n  amount?: number\n  /** Light intensity, 1 */\n  intensity?: number\n  /** Ambient occlusion, lower values mean less AO, hight more, you can mix AO and directional light, 0.5 */\n  ambient?: number\n  /** If the lights cast shadows, this is true by default */\n  castShadow?: boolean\n  /** Default shadow bias, 0 */\n  bias?: number\n  /** Default map size, 512 */\n  mapSize?: number\n  /** Default size of the shadow camera, 10 */\n  size?: number\n  /** Default shadow camera near, 0.5 */\n  near?: number\n  /** Default shadow camera far, 500 */\n  far?: number\n}\n```\n\n```jsx\n\u003cRandomizedLight castShadow amount={8} frames={100} position={[5, 5, -10]} /\u003e\n```\n\n#### Refernce api\n\n```jsx\ninterface AccumulativeLightContext {\n  /** Jiggles the lights */\n  update: () =\u003e void;\n}\n```\n\n###  AccumulativeShadows\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/hxcc1x\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/hxcc1x/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA planar, Y-up oriented shadow-catcher that can accumulate into soft shadows and has zero performance impact after all frames have accumulated. It can be temporal, it will accumulate over time, or instantaneous, which might be expensive depending on how many frames you render.\n\nYou must pair it with lightsources (and scene objects!) that cast shadows, which go into the children slot. Best use it with the `RandomizedLight` component, which jiggles a set of lights around, creating realistic raycast-like shadows and ambient occlusion.\n\n```tsx\ntype AccumulativeShadowsProps = ThreeProps\u003c'Group'\u003e \u0026 {\n  /** How many frames it can render, more yields cleaner results but takes more time, 40 */\n  frames?: number\n  /** If frames === Infinity blend controls the refresh ratio, 100 */\n  blend?: number\n  /** Can limit the amount of frames rendered if frames === Infinity, usually to get some performance back once a movable scene has settled, Infinity */\n  limit?: number\n  /** Scale of the plane,  */\n  scale?: number\n  /** Temporal accumulates shadows over time which is more performant but has a visual regression over instant results, false  */\n  temporal?: false\n  /** Opacity of the plane, 1 */\n  opacity?: number\n  /** Discards alpha pixels, 0.65 */\n  alphaTest?: number\n  /** Shadow color, black */\n  color?: string\n  /** Colorblend, how much colors turn to black, 0 is black, 2 */\n  colorBlend?: number\n  /** Buffer resolution, 1024 */\n  resolution?: number\n  /** Children should be randomized lights shining from different angles to emulate raycasting */\n  children?: JSX.Element\n}\n```\n\n```jsx\n\u003cAccumulativeShadows temporal frames={100} scale={10}\u003e\n  \u003cRandomizedLight amount={8} position={[5, 5, -10]} /\u003e\n\u003c/AccumulativeShadows\u003e\n```\n\n##### Reference api\n\n```tsx\ninterface AccumulativeContext {\n  /** Returns the plane geometry onto which the shadow is cast */\n  getMesh: () =\u003e THREE.Mesh\u003cTHREE.PlaneGeometry, SoftShadowMaterialProps \u0026 THREE.ShaderMaterial\u003e\n  /** Resets the buffers, starting from scratch */\n  reset: () =\u003e void\n  /** Updates the lightmap for a number of frames accumulartively */\n  update: (frames?: number) =\u003e void\n  /** Allows children to subscribe. AccumulativeShadows will call child.update() in its own update function */\n  setLights: React.Dispatch\u003cReact.SetStateAction\u003cAccumulativeLightContext[]\u003e\u003e\n}\n```\n\n#### SpotLight\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/tx1pq\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/tx1pq/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/wdzv4\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/wdzv4/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA Volumetric spotlight.\n\n```jsx\n\u003cSpotLight\n  distance={5}\n  angle={0.15}\n  attenuation={5}\n  anglePower={5} // Diffuse-cone anglePower (default: 5)\n/\u003e\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 \u003cSpotLight depthBuffer={depthBuffer} /\u003e\n```\n\n#### SpotLightShadows\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-spotlight--spotlight-shadows-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/yyk6gv\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/yyk6gv/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA shadow caster that can help cast shadows of different patterns (textures) onto the scene.\n\n```jsx\n\u003cSpotLight\u003e\n  \u003cSpotLightShadows\n    distance={0.4} // Distance between the shadow caster and light\n    alphaTest={0.5} // Sets the alpha value to be used when running an alpha test. See Material.alphaTest\n    scale={1} //  Scale of the shadow caster plane\n    map={undefined} // Texture - Pattern of the shadow\n    shader={undefined} // Optional shader to run. Lets you add effects to the shadow map. See bellow\n    width={512} // Width of the shadow map. The higher the more expnsive\n    height={512} // Height of the shadow map. The higher the more expnsive\n  /\u003e\n\u003c/SpotLight\u003e\n```\n\nAn optinal `shader` prop lets you run a custom shader to modify/add effects to your shadow texture. The shader privides the following uniforms and varyings.\n\n| Type                | Name         | Notes                                  |\n| ------------------- | ------------ | -------------------------------------- |\n| `varying vec2`      | `vUv`        | UVs of the shadow casting plane        |\n| `uniform sampler2D` | `uShadowMap` | The texture provided to the `map` prop |\n| `uniform float`     | `uTime`      | Current time                           |\n\nTreat the output of the shader like an alpha map where `1` is opaque and `0` is transparent.\n\n```glsl\ngl_FragColor = vec4(vec3(1.), 1.); // Opaque\ngl_FragColor = vec4(vec3(0.), 1.); // Transparent\n```\n\n#### Environment\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-environment--environment-story)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/t4l0f\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/t4l0f/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/mih0lx\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/mih0lx/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/e662p3\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/e662p3/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/lwo219\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/lwo219/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/q48jgy\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/q48jgy/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://codesandbox.io/s/0c5hv9\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/0c5hv9/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\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\u003cEnvironment\n  background={false} // can be true, false or \"only\" (which only sets the background) (default: false)\n  blur={0} // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)\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, can also be a ref\n  encoding={undefined} // adds the ability to pass a custom THREE.TextureEncoding (default: THREE.sRGBEncoding for an array of files and THREE.LinearEncoding for a single texture)\n/\u003e\n```\n\nThe simplest way to use it is to provide a preset. 👉 Note: `preset` property is not meant to be used in production environments and may fail as it relies on CDNs.\n\n```jsx\n\u003cEnvironment preset=\"city\" /\u003e\n```\n\nIf you provide a single string it will use THREE.RGBELoader.\n\n```jsx\n\u003cEnvironment files=\"file.hdr\" /\u003e\n```\n\n\u003c!-- You can also use [@pmndrs/assets](https://github.com/pmndrs/assets) to easily self host common assets. Always use dynamic imports to avoid making this part of your main bundle.\n\n```jsx\nimport { suspend } from 'suspend-react'\nconst city = import('@pmndrs/assets/hdri/city.exr').then((module) =\u003e module.default)\n\n\u003cEnvironment files={suspend(city)} /\u003e\n``` --\u003e\n\nIf you already have a cube texture you can pass it directly:\n\n```jsx\n\u003cCubeCamera\u003e{(texture) =\u003e \u003cEnvironment map={texture} /\u003e}\u003c/CubeCamera\u003e\n```\n\nIf you provide children you can even render a custom environment. It will render the contents into an off-buffer and film a single frame with a cube camera (whose props you can configure: near=1, far=1000, resolution=256).\n\n```jsx\n\u003cEnvironment background near={1} far={1000} resolution={256}\u003e\n  \u003cT.Mesh scale={100}\u003e\n    \u003cT.SphereGeometry args={[1, 64, 64]} /\u003e\n    \u003cT.MeshBasicMaterial map={texture} side={THREE.BackSide} /\u003e\n  \u003c/T.Mesh\u003e\n\u003c/Environment\u003e\n```\n\nYou can even mix a generic HDRI environment into a custom one with either the `preset` or the `files` prop.\n\n```jsx\nreturn (\n  \u003cEnvironment background near={1} far={1000} resolution={256} preset=\"warehouse\"\u003e\n    \u003cT.Mesh /\u003e\n```\n\nDeclarative environment content can also animate with the `frames` prop, the envmap can be live. Give it a low resolution and this will happen at very little cost\n\n```jsx\nreturn (\n  \u003cEnvironment frames={Infinity} resolution={256}\u003e\n    \u003cFloat\u003e\n      \u003cT.Mesh /\u003e\n    \u003c/Float\u003e\n```\n\nEnvironment can also be ground projected, that is, put your model on the \"ground\" within the environment map.\n\n```jsx\n\u003cEnvironment ground /\u003e\n```\n\nYou can provide optional options to configure this projecion.\n\n```jsx\n\u003cEnvironment\n  ground={{\n    height: 15, // Height of the camera that was used to create the env map (Default: 15)\n    radius: 60, // Radius of the world. (Default 60)\n    scale: 1000, // Scale of the backside projected sphere that holds the env texture (Default: 1000)\n  }}\n/\u003e\n```\n\n#### Lightformer\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/lwo219\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/lwo219/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThis component draws flat rectangles, circles or rings, mimicking the look of a light-former. You can set the output `intensity`, which will effect emissiveness once you put it into an HDRI `\u003cEnvironment\u003e`, where it mostly belong. It will act like a real light without the expense, you can have as many as you want.\n\n```jsx\n\u003cEnvironment\u003e\n  \u003cLightformer\n    form=\"rect\" // circle | ring | rect (optional, default = rect)\n    intensity={1} // power level (optional = 1)\n    color=\"white\" // (optional = white)\n    scale={[10, 5]} // Scale it any way you prefer (optional = [1, 1])\n    target={[0, 0, 0]} // Target position (optional = undefined)\n  /\u003e\n```\n\n#### Sky\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-sky--sky-st)\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/vkgi6\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/vkgi6/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nAdds a [sky](https://threejs.org/examples/#webgl_shaders_sky) to your scene.\n\n```jsx\n\u003cSky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} {...props} /\u003e\n```\n\n#### Stars\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stars--stars-st)\n\nAdds a blinking shader-based starfield to your scene.\n\n```jsx\n\u003cStars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} /\u003e\n```\n\n#### Sparkles\n\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/0c5hv9\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/0c5hv9/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nFloating, glowing particles.\n\n```tsx\n\u003cSparkles\n  /** Number of particles (default: 100) */\n  count?: number\n  /** Speed of particles (default: 1) */\n  speed?: number | Float32Array\n  /** Opacity of particles (default: 1) */\n  opacity?: number | Float32Array\n  /** Color of particles (default: 100) */\n  color?: THREE.ColorRepresentation | Float32Array\n  /** Size of particles (default: randomized between 0 and 1) */\n  size?: number | Float32Array\n  /** The space the particles occupy (default: 1) */\n  scale?: number | [number, number, number] | THREE.Vector3\n  /** Movement factor (default: 1) */\n  noise?: number | [number, number, number] | THREE.Vector3 | Float32Array\n/\u003e\n```\n\nCustom shaders are allowed. Sparkles will use the following attributes and uniforms:\n\n```glsl\nattribute float size;\nattribute float speed;\nattribute float opacity;\nattribute vec3 noise;\nattribute vec3 color;\n```\n\n```json\n{ \"time\": 0, \"pixelRatio\": 1 }\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\n\u003cp\u003e\n  \u003ca href=\"https://codesandbox.io/s/mbfzf\"\u003e\u003cimg width=\"20%\" src=\"https://codesandbox.io/api/v1/sandboxes/mbfzf/screenshot.png\" alt=\"Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nParticle based cloud.\n\n👉 Note: `\u003cCloud /\u003e` component is not meant to be used in production environments as it relies on third-party CDN.\n\n```jsx\n\u003cCloud\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/\u003e\n```\n\n#### useEnvironment\n\nA convenience hook to load an environment map. The props are the same as on the `\u003cEnvironment /\u003e` component.\n\n```tsx\nexport type EnvironmentLoaderProps = {\n  files?: string | string[]\n  path?: string\n  preset?: PresetsType\n  extensions?: (loader: Loader) =\u003e void\n  encoding?: TextureEncoding\n```\n\nYou can use it without properties, which will default to px, nx, py, ny, pz, nz as \\*.png files inside your /public directory.\n\n```jsx\nconst cubeTexture = useEnvironment()\n```\n\nOr you can specificy from where to load the files.\n\n```jsx\nconst presetTexture = useEnvironment({ preset: 'city' })\nconst rgbeTexture = useEnvironment({ files: 'model.hdr' })\nconst cubeTexture = useEnvironment({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) =\u003e `${n}.png`) })\n```\n\n#### useMatcapTexture\n\n[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-usematcaptexture--use-matcap-texture-st) ![](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👉 Note: `useMatcapTexture` hook is not meant to be used in production environments as it relies on third-party CDN.\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 \u003cT.MeshMatcapMaterial matcap={matcap()} /\u003e\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/staging-usenormaltexture--use-normal-texture-st) ![](https://img.shields.io/badge/-suspense-brightgreen)\n\nLoads normal textures from this repository: https://github.com/emmelleppi/normal-maps\n\n👉 Note: `useNormalTexture` hook is not meant to be used in production environments as it relies on third-party CDN.\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  \u003cT.MeshStandardMaterial normalMap={normalMap()} /\u003e\n  ...\n)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigmistqke%2Fsolid-drei","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigmistqke%2Fsolid-drei","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigmistqke%2Fsolid-drei/lists"}