\n\n# Exports\n\n## Cameras\n\n#### PerspectiveCamera\n\n[](https://codesandbox.io/s/r3f-basic-demo-qgcrx)\n\nA responsive [THREE.PerspectiveCamera](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) that can set itself as the default.\n\n```jsx\n\n \n\n```\n\n#### OrthographicCamera\n\n[](https://codesandbox.io/s/r3f-render-target-kdj94)\n\nA responsive [THREE.OrthographicCamera](https://threejs.org/docs/index.html#api/en/cameras/OrthographicCamera) that can set itself as the default.\n\n## Controls\n\nIf available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls).\n\n#### OrbitControls\n\n[](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)\n\n#### MapControls\n\n[](https://codesandbox.io/s/react-three-fiber-map-mkq8e)\n\n#### TrackballControls\n\n#### FlyControls\n\n#### DeviceOrientationControls\n\n#### TransformControls\n\n[](https://codesandbox.io/s/r3f-drei-transformcontrols-hc8gm)\n\n#### PointerLockControls\n\n[](https://codesandbox.io/s/blissful-leaf-vkgi6)\n\n## Shapes\n\nBuffer-geometry short-cuts:\n\n```jsx\n\n\n \n\n```\n\n#### Plane\n\n#### Box\n\n#### Sphere\n\n#### Circle\n\n#### Cone\n\n#### Cylinder\n\n#### Tube\n\n#### Torus\n\n#### TorusKnot\n\n#### Ring\n\n#### Tetrahedron\n\n#### Polyhedron\n\n#### Icosahedron\n\n#### Octahedron\n\n#### Dodecahedron\n\n#### Extrude\n\n#### Lathe\n\n#### Parametric\n\n#### RoundedBox\n\nA box buffer geometry with rounded corners, done with extrusion.\n\n```jsx\n\n \n\n```\n\n#### ScreenQuad\n\n```jsx\n\n \n\n```\n\nA triangle that fills the screen, ideal for full-screen fragment shader work (raymarching, postprocessing).\nš Why a triangle? https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html\nš Use as a post processing mesh: https://medium.com/@luruke/simple-postprocessing-in-three-js-91936ecadfb7\n\n## Abstractions\n\n#### Text\n\n[](https://codesandbox.io/s/r3f-troika-text-eb4mx)\n\nHi-quality text rendering w/ signed distance fields (SDF) and antialiasing, using [troika-3d-text](https://github.com/protectwise/troika/tree/master/packages/troika-3d-text). All of troikas props are valid!\n\n```jsx\n\n hello world!\n\n```\n\n#### Line\n\n[](https://codesandbox.io/s/r3f-line-7mtjx)\n\nRenders a THREE.Line2.\n\n```jsx\n\n```\n\n#### Detailed\n\n[](https://codesandbox.io/s/r3f-drei-detailed-dep1v)\n\nA wrapper around [THREE.LOD](https://threejs.org/docs/index.html#api/en/objects/LOD) (Level of detail).\n\n```jsx\n\n \n \n \n\n```\n\n#### PositionalAudio\n\n[](https://codesandbox.io/s/r3f-drei-positionalaudio-yi1o0) \n\nA wrapper around [THREE.PositionalAudio](https://threejs.org/docs/index.html#api/en/audio/PositionalAudio). Add this to groups or meshes to tie them to a sound that plays when the camera comes near.\n\n```jsx\n\n```\n\n#### Billboard\n\nAdds a `` that always faces the camera.\n\n```jsx\n\n```\n\n#### Environment\n\n[](https://drei.react-spring.io/?path=/story/abstractions-environment--environment-st)\n\nSets up a global cubemap, which affects `scene.environment`, and optionally `scene.background`. A selection of [presets](src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience.\n\n```jsx\n\n```\n\n#### Effects\n\nAbstraction around threes own [EffectComposer](https://threejs.org/docs/index.html#examples/en/postprocessing/EffectComposer).\n\n```jsx\n\n {/* Generic passes go here ... */}\n \n\n```\n\n#### useAnimations\n\n[](https://codesandbox.io/s/react-three-fiber-gltf-camera-animation-forked-pecl6)\n\nA hook that abstracts [AnimationMixer](https://threejs.org/docs/index.html#api/en/animation/AnimationMixer).\n\n```jsx\nconst { nodes, materials, animations } = useGLTF(url)\nconst { ref, mixer, names, actions, clips } = useAnimations(animations)\nuseEffect(() => {\n actions.jump.play()\n})\nreturn (\n \n```\n\n## Shaders\n\n#### MeshWobbleMaterial\n\n[](https://codesandbox.io/s/r3f-sky-g5373)\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\n \n \n\n```\n\n#### MeshDistortMaterial\n\nThis material makes your geometry distort following simplex noise.\n\n```jsx\n\n \n \n\n```\n\n#### Sky\n\n[](https://codesandbox.io/s/r3f-sky-3q4ev)\n\nAdds a [sky](https://threejs.org/examples/webgl_shaders_sky.html) to your scene.\n\n```jsx\n\n```\n\n#### Stars\n\n[](https://codesandbox.io/s/r3f-sky-m2ci7)\n\nAdds a blinking shader-based starfield to your scene.\n\n```jsx\n\n```\n\n#### ContactShadows\n\nA [contact shadow](https://threejs.org/examples/?q=con#webgl_shadow_contact) implementation.\n\n```jsx\n\n```\n\n#### softShadows\n\n[](https://codesandbox.io/s/r3f-soft-shadows-dh2jc)\n\nInjects [percent closer soft shadows (pcss)](https://threejs.org/examples/?q=pcss#webgl_shadowmap_pcss) into threes shader chunk.\n\n```jsx\nsoftShadows({\n frustrum: 3.75, // Frustrum width (default: 3.75)\n size: 0.005, // World size (default: 0.005)\n near: 9.5, // Near plane (default: 9.5)\n samples: 17, // Samples (default: 17)\n rings: 11, // Rings (default: 11)\n})\n```\n\n#### shaderMaterial\n\n[](https://codesandbox.io/s/r3f-shader-material-yltgr)\n\nCreates a THREE.ShaderMaterial for you with easier handling of uniforms, which are also automatically declared as setter/getters on the object.\n\n```jsx\nimport { extend } from 'react-three-fiber'\nimport glsl from 'babel-plugin-glsl/macro'\n\nconst ColorShiftMaterial = shaderMaterial(\n { time: 0, color: new THREE.Color(0.2, 0.0, 0.1) },\n // vertex shader\n glsl`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n // fragment shader\n glsl`\n uniform float time;\n uniform vec3 color;\n varying vec2 vUv;\n void main() {\n gl_FragColor.rgba = vec4(0.5 + 0.3 * sin(vUv.yxx + time) + color, 1.0);\n }\n `\n)\n\nextend({ ColorShiftMaterial })\n\n// in your component\n\n \n\n```\n\n## Misc\n\n#### useContextBridge\n\n[](https://drei.react-spring.io/?path=/story/misc-usecontextbridge--use-context-bridge-st)\n\nAllows you to forward contexts provided above the `` to be consumed from within the `` normally\n\n```jsx\nfunction SceneWrapper() {\n // bridge any number of contexts\n const ContextBridge = useContextBridge(ThemeContext, GreetingContext)\n return (\n \n )\n}\n\nfunction Scene() {\n // we can now consume a context within the Canvas\n const theme = React.useContext(ThemeContext)\n const greeting = React.useContext(GreetingContext)\n return (\n //...\n )\n}\n```\n\n#### useFBO\n\nCreates a `THREE.WebGLRenderTarget` or `THREE.WebGLMultisampleRenderTarget`.\n\n```jsx\nconst target = useFBO(\n // width: 500, height: 500, \n // width and height are optional and defaulted to the viewport size\n // multiplied by the renderer pixel ratio, and recalculated whenever the\n // viewport size changes.\n {\n multisample: true, // if the renderer supports webGL2, it will return a WebGLMultisampleRenderTarget\n stencilBuffer: false // you can pass any options supported by THREE.WebGLRenderTarget\n } \n)\n```\n\nThe rendertarget is automatically disposed when unmounted.\n\n#### Html\n\n[](https://codesandbox.io/s/r3f-suspense-zu2wo)\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\n
![\"logo\"](\"https://imgur.com/arDsXO6.jpg\")
\n