This component allows you to render a live scene into a cubetexture which you can then apply to a material, for instance as an environment map (via the envMap property). 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. export type RenderCubeTextureProps = Omit & { /** Optional stencil buffer, defaults to false */ stencilBuffer?: boolean /** Optional depth buffer, defaults to true */ depthBuffer?: boolean /** Optional generate mipmaps, defaults to false */ generateMipmaps?: boolean /** Optional render priority, defaults to 0 */ renderPriority?: number /** Optional event priority, defaults to 0 */ eventPriority?: number /** Optional frame count, defaults to Infinity. If you set it to 1, it would only render a single frame, etc */ frames?: number /** Optional event compute, defaults to undefined */ compute?: ComputeFunction /** Flip cubemap, see https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLCubeRenderTarget.js */ flip?: boolean /** Cubemap resolution (for each of the 6 takes), null === full screen resolution, default: 896 */ resolution?: number /** Children will be rendered into a portal */ children: React.ReactNode near?: number far?: number position?: ReactThreeFiber.Vector3 rotation?: ReactThreeFiber.Euler scale?: ReactThreeFiber.Vector3 quaternion?: ReactThreeFiber.Quaternion matrix?: ReactThreeFiber.Matrix4 matrixAutoUpdate?: boolean } export type RenderCubeTextureApi = { scene: THREE.Scene fbo: THREE.WebGLCubeRenderTarget camera: THREE.CubeCamera } const api = useRef(null!) // ... 103:T53a, This 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. type Props = ThreeElements['texture'] & { /** Optional width of the texture, defaults to viewport bounds */ width?: number /** Optional height of the texture, defaults to viewport bounds */ height?: number /** Optional fbo samples */ samples?: number /** Optional stencil buffer, defaults to false */ stencilBuffer?: boolean /** Optional depth buffer, defaults to true */ depthBuffer?: boolean /** Optional generate mipmaps, defaults to false */ generateMipmaps?: boolean /** Optional render priority, defaults to 0 */ renderPriority?: number /** Optional event priority, defaults to 0 */ eventPriority?: number /** Optional frame count, defaults to Infinity. If you set it to 1, it would only render a single frame, etc */ frames?: number /** Optional event compute, defaults to undefined */ compute?: (event: any, state: any, previous: any) => false | undefined /** Children will be rendered into a portal */ children: React.ReactNode } 106:T9f6, Views 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. It is advisable to re-connect the event system to a parent that contains both the canvas and the html content. This ensures that both are accessible/selectable and even allows you to mount controls or other deeper integrations into your view. Note that @react-three/fiber newer than ^8.1.0 is required for View to work correctly if the canvas/react three fiber root is not fullscreen. A warning will be logged if drei is used with older versions of @react-three/fiber. export type ViewProps = { /** Root element type, default: div */ as?: string /** CSS id prop */ id?: string /** CSS classname prop */ className?: string /** CSS style prop */ style?: React.CSSProperties /** If the view is visible or not, default: true */ visible?: boolean /** Views take over the render loop, optional render index (1 by default) */ index?: number /** If you know your view is always at the same place set this to 1 to avoid needless getBoundingClientRect overhead */ frames?: number /** The scene to render, if you leave this undefined it will render the default scene */ children?: React.ReactNode /** The tracking element, the view will be cut according to its whereabouts * @deprecated You can use inline Views now, see: https://github.com/pmndrs/drei/pull/1784 */ track?: React.RefObject } export type ViewportProps = { Port: () => React.ReactNode } & React.ForwardRefExoticComponent< ViewProps & React.RefAttributes > You can define as many views as you like, directly mix them into your dom graph, right where you want them to appear. View is an unstyled HTML DOM element (by default a div, and it takes the same properties as one). Use View.Port inside the canvas to output them. The canvas should ideally fill the entire screen with absolute positioning, underneath HTML or on top of it, as you prefer. return (

Html content here

) 10d:T680, storybook Easily 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 and accepts all its props. 0 of bias makes sure that the blurTexture is not too sharp because of the multiplication with the depthTexture distortion={1} // Amount of distortion based on the distortionMap texture distortionMap={distortionTexture} // The red channel of this texture is used as the distortion map. Default is null 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) /> 110:T45f, A convincing Glass/Diamond refraction material. type MeshRefractionMaterialProps = ThreeElements['shaderMaterial'] & { /** Environment map */ envMap: THREE.CubeTexture | THREE.Texture /** Number of ray-cast bounces, it can be expensive to have too many, 2 */ bounces?: number /** Refraction index, 2.4 */ ior?: number /** Fresnel (strip light), 0 */ fresnel?: number /** RGB shift intensity, can be expensive, 0 */ aberrationStrength?: number /** Color, white */ color?: ReactThreeFiber.Color /** If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true */ fastChroma?: boolean } If you want it to reflect other objects in the scene you best pair it with a cube-camera. {(texture) => ( )} Otherwise just pass it an environment map. const texture = useLoader(RGBELoader, "/textures/royal_esplanade_1k.hdr") return ( 113:T10b4, An 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. Although 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. For 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. type MeshTransmissionMaterialProps = ThreeElements['meshPhysicalMaterial'] & { /* Transmission, default: 1 */ transmission?: number /* Thickness (refraction), default: 0 */ thickness?: number /** Backside thickness (when backside is true), default: 0 */ backsideThickness?: number /* Roughness (blur), default: 0 */ roughness?: number /* Chromatic aberration, default: 0.03 */ chromaticAberration?: number /* Anisotropy, default: 0.1 */ anisotropicBlur?: number /* Distortion, default: 0 */ distortion?: number /* Distortion scale, default: 0.5 */ distortionScale?: number /* Temporal distortion (speed of movement), default: 0.0 */ temporalDistortion?: number /** The scene rendered into a texture (use it to share a texture between materials), default: null */ buffer?: THREE.Texture /** transmissionSampler, you can use the threejs transmission sampler texture that is * generated once for all transmissive materials. The upside is that it can be faster if you * use multiple MeshPhysical and Transmission materials, the downside is that transmissive materials * using this can't see other transparent or transmissive objects nor do you have control over the * buffer and its resolution, default: false */ transmissionSampler?: boolean /** Render the backside of the material (more cost, better results), default: false */ backside?: boolean /** Resolution of the local buffer, default: undefined (fullscreen) */ resolution?: number /** Resolution of the local buffer for backfaces, default: undefined (fullscreen) */ backsideResolution?: number /** Refraction samples, default: 6 */ samples?: number /** Buffer scene background (can be a texture, a cubetexture or a color), default: null */ background?: THREE.Texture } return ( If 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. Or, by passing a texture to buffer manually, for instance using useFBO. const buffer = useFBO() useFrame((state) => { state.gl.setRenderTarget(buffer) state.gl.render(state.scene, state.camera) state.gl.setRenderTarget(null) }) return ( <> Or a PerspectiveCamera. {(texture) => ( <> )} This 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.11a:T542, storybook Creates 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. import { extend } from '@react-three/fiber' const ColorShiftMaterial = shaderMaterial( { time: 0, color: new THREE.Color(0.2, 0.0, 0.1) }, // vertex shader /*glsl*/` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, // fragment shader /*glsl*/` uniform float time; uniform vec3 color; varying vec2 vUv; void main() { gl_FragColor.rgba = vec4(0.5 + 0.3 * sin(vUv.yxx + time) + color, 1.0); } ` ) // declaratively extend({ ColorShiftMaterial }) ... // imperatively, all uniforms are available as setter/getters and constructor args const material = new ColorShiftMaterial({ color: new THREE.Color("hotpink") }) material.time = 1 shaderMaterial attaches a unique key property to the prototype class. If you wire it to Reacts own key property, you can enable hot-reload. import { ColorShiftMaterial } from './ColorShiftMaterial' extend({ ColorShiftMaterial }) // in your component 123:Tbd0, storybook Renders an oriented MediaPipe face mesh: const faceLandmarkerResult = { "faceLandmarks": [ [ { "x": 0.5760777592658997, "y": 0.8639070391654968, "z": -0.030997956171631813 }, { "x": 0.572094738483429, "y": 0.7886289358139038, "z": -0.07189624011516571 }, // ... ], // ... ], "faceBlendshapes": [ // ... ], "facialTransformationMatrixes": [ // ... ] }, } const points = faceLandmarkerResult.faceLandmarks[0] export type FacemeshProps = { /** an array of 468+ keypoints as returned by google/mediapipe tasks-vision, default: a sample face */ points?: MediaPipePoints /** @deprecated an face object as returned by tensorflow/tfjs-models face-landmarks-detection */ face?: MediaPipeFaceMesh /** constant width of the mesh, default: undefined */ width?: number /** or constant height of the mesh, default: undefined */ height?: number /** or constant depth of the mesh, default: 1 */ depth?: number /** 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) */ verticalTri?: [number, number, number] /** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */ origin?: number | THREE.Vector3 /** 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) */ facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0] /** Apply position offset extracted from `facialTransformationMatrix` */ offset?: boolean /** Offset sensitivity factor, less is more sensible */ offsetScalar?: number /** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */ faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0] /** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */ eyes?: boolean /** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */ eyesAsOrigin?: boolean /** debug mode, default: false */ debug?: boolean } Ref-api: const api = useRef() type FacemeshApi = { meshRef: React.RefObject outerRef: React.RefObject eyeRightRef: React.RefObject eyeLeftRef: React.RefObject } You can for example get face mesh world direction: api.meshRef.current.localToWorld(new THREE.Vector3(0, 0, -1)) or get L/R iris direction: api.eyeRightRef.current.irisDirRef.current.localToWorld(new THREE.Vector3(0, 0, -1)) 12c:T45e, A box buffer geometry with rounded corners, done with extrusion. Geometry is also available. Useful for '@react-three/csg' Tip: If you animate args every frame, memoise the [width, height, depth] tuple with React.useMemo to avoid replacing the geometry each tick. 131:T6bb, A 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. You 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. type AccumulativeShadowsProps = ThreeElements['group'] & { /** How many frames it can render, more yields cleaner results but takes more time, 40 */ frames?: number /** If frames === Infinity blend controls the refresh ratio, 100 */ blend?: number /** Can limit the amount of frames rendered if frames === Infinity, usually to get some performance back once a movable scene has settled, Infinity */ limit?: number /** Scale of the plane, */ scale?: number /** Temporal accumulates shadows over time which is more performant but has a visual regression over instant results, false */ temporal?: false /** Opacity of the plane, 1 */ opacity?: number /** Discards alpha pixels, 0.65 */ alphaTest?: number /** Shadow color, black */ color?: string /** Colorblend, how much colors turn to black, 0 is black, 2 */ colorBlend?: number /** Buffer resolution, 1024 */ resolution?: number /** Children should be randomized lights shining from different angles to emulate raycasting */ children?: React.ReactNode } 138:T8c3, Calculates 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. To control the damping animation, use maxDuration to set the animation length in seconds, and interpolateFunc to define how the animation changes over time (should be an increasing function in [0, 1] interval, interpolateFunc(0) === 0, interpolateFunc(1) === 1). const interpolateFunc = (t: number) => 1 - Math.exp(-5 * t) + 0.007 * t // Matches the default Bounds behavior const interpolateFunc1 = (t: number) => -t * t * t + 2 * t * t // Start smoothly, finish linearly const interpolateFunc2 = (t: number) => -t * t * t + t * t + t // Start linearly, finish smoothly The 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. reset centers the view. moveTo changes the camera position. lookAt changes the camera orientation, with the respect to up-vector, if specified. clip sets the cameras near/far planes. fit centers the view for non-orthographic cameras (same as reset) or zooms the view for orthographic cameras. function Foo() { const bounds = useBounds() useEffect(() => { // Calculate scene bounds bounds.refresh().clip().fit() // Or, focus a specific object or box3 // bounds.refresh(ref.current).clip().fit() // bounds.refresh(new THREE.Box3()).clip().fit() // Or, move the camera to a specific position, and change its orientation // bounds.moveTo([0, 10, 10]).lookAt({ target: [5, 5, 0], up: [0, -1, 0] }) // For orthographic cameras, reset has to be used to center the view (fit would only change its zoom to match the bounding box) // bounds.refresh().reset().clip().fit() }, [...]) } 13b:T474, storybook A component for applying a configurable camera shake effect. Currently only supports rotational camera shake. Pass a ref to recieve the ShakeController API. If 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. const config = { maxYaw: 0.1, // Max amount camera can yaw in either direction maxPitch: 0.1, // Max amount camera can pitch in either direction maxRoll: 0.1, // Max amount camera can roll in either direction yawFrequency: 0.1, // Frequency of the yaw rotation pitchFrequency: 0.1, // Frequency of the pitch rotation rollFrequency: 0.1, // Frequency of the roll rotation intensity: 1, // initial intensity of the shake decay: false, // should the intensity decay over time decayRate: 0.65, // if decay = true this is the rate at which intensity will reduce at controls: undefined, // if using orbit controls, pass a ref here so we can update the rotation } interface ShakeController { getIntensity: () => number setIntensity: (val: number) => void } 13e:Tb0b, Caustics 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. type CausticsProps = ThreeElements['group'] & { /** How many frames it will render, set it to Infinity for runtime, default: 1 */ frames?: number /** Enables visual cues to help you stage your scene, default: false */ debug?: boolean /** Will display caustics only and skip the models, default: false */ causticsOnly: boolean /** Will include back faces and enable the backsideIOR prop, default: false */ backside: boolean /** The IOR refraction index, default: 1.1 */ ior?: number /** The IOR refraction index for back faces (only available when backside is enabled), default: 1.1 */ backsideIOR?: number /** The texel size, default: 0.3125 */ worldRadius?: number /** Intensity of the prjected caustics, default: 0.05 */ intensity?: number /** Caustics color, default: white */ color?: ReactThreeFiber.Color /** Buffer resolution, default: 2048 */ resolution?: number /** Camera position, it will point towards the contents bounds center, default: [5, 5, 5] */ lightSource?: [x: number, y: number, z: number] | React.RefObject } It 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! Make 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 to configue the props above as some can be micro fractional depending on the models (intensity, worldRadius, ior and backsideIOR especially). Sometimes 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. The 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. const lightSource = useRef() 141:T670, storybook Group children together and -offset them by half of their bounding box. export type Props = ThreeElements['group'] & { top?: boolean right?: boolean bottom?: boolean left?: boolean front?: boolean back?: boolean /** Disable all axes */ disable?: boolean /** Disable x-axis centering */ disableX?: boolean /** Disable y-axis centering */ disableY?: boolean /** Disable z-axis centering */ disableZ?: boolean /** object to compute box3 from */ object?: THREE.Object3D | null /** Precision, defaults to true, see https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject */ precise?: boolean /** Callback, fires in the useLayoutEffect phase, after measurement */ onCentered?: (props: OnCenterCallbackProps) => void } type OnCenterCallbackProps = { /** The next parent above */ parent: THREE.Object3D /** The outmost container group of the component */ container: THREE.Object3D width: number height: number depth: number boundingBox: THREE.Box3 boundingSphere: THREE.Sphere center: THREE.Vector3 verticalAlignment: number horizontalAlignment: number depthAlignment: number } Optionally 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. function ScaledModel() { const viewport = useThree((state) => state.viewport) return ( container.scale.setScalar(viewport.height / height)}> 144:T896, storybook suspense Particle based cloud. type CloudsProps = ThreeElements['group'] & { /** Optional cloud texture, points to a default hosted on rawcdn.githack */ texture?: string /** Maximum number of segments, default: 200 (make this tight to save memory!) */ limit?: number /** How many segments it renders, default: undefined (all) */ range?: number /** Which material it will override, default: MeshLambertMaterial */ material?: typeof Material /** Frustum culling, default: true */ frustumCulled?: boolean } type CloudProps = ThreeElements['group'] & { /** A seeded random will show the same cloud consistently, default: Math.random() */ seed?: number /** How many segments or particles the cloud will have, default: 20 */ segments?: number /** The box3 bounds of the cloud, default: [5, 1, 1] */ bounds?: ReactThreeFiber.Vector3 /** How to arrange segment volume inside the bounds, default: inside (cloud are smaller at the edges) */ concentrate?: 'random' | 'inside' | 'outside' /** The general scale of the segments */ scale?: ReactThreeFiber.Vector3 /** The volume/thickness of the segments, default: 6 */ volume?: number /** The smallest volume when distributing clouds, default: 0.25 */ smallestVolume?: number /** An optional function that allows you to distribute points and volumes (overriding all settings), default: null * Both point and volume are factors, point x/y/z can be between -1 and 1, volume between 0 and 1 */ distribute?: (cloud: CloudState, index: number) => { point: Vector3; volume?: number } /** Growth factor for animated clouds (speed > 0), default: 4 */ growth?: number /** Animation factor, default: 0 */ speed?: number /** Camera distance until the segments will fade, default: 10 */ fade?: number /** Opacity, default: 1 */ opacity?: number /** Color, default: white */ color?: ReactThreeFiber.Color } Use the provider to glob all clouds into a single, instanced draw call. 149:T1057, storybook suspense Sets 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 from HDRI Haven are available for convenience. The simplest way to use it is to provide a preset (linking towards common HDRI Haven assets hosted on github). 👉 Note: preset property is not meant to be used in production environments and may fail as it relies on CDNs. Current presets are apartment: 'lebombo_1k.hdr' city: 'potsdamer_platz_1k.hdr' dawn: 'kiara_1_dawn_1k.hdr' forest: 'forest_slope_1k.hdr' lobby: 'st_fagans_interior_1k.hdr' night: 'dikhololo_night_1k.hdr' park: 'rooitou_park_1k.hdr' studio: 'studio_small_03_1k.hdr' sunset: 'venice_sunset_1k.hdr' warehouse: 'empty_warehouse_01_1k.hdr' Otherwise use the files property. It will use RGBELoader for _.hdr, EXRLoader for _.exr, HDRJPGLoader for gainmap _.jpg, GainMapLoader for gainmap _.webp, CubeTextureLoader for an array of images. Of all these, gainmap has the smallest footprint. You can also use @pmndrs/assets to easily self host common assets. Always use dynamic imports to avoid making this part of your main bundle. import { suspend } from 'suspend-react' const city = import('@pmndrs/assets/hdri/city.exr').then((module) => module.default) If you already have a cube texture you can pass it directly: {(texture) => } If 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). You can even mix a generic HDRI environment into a custom one with either the preset or the files prop. return ( Declarative environment content can also animate with the frames prop, the envmap can be live. Give it a low resolution and this will happen at little cost return ( Environment can also be ground projected, that is, put your model on the "ground" within the environment map. You can provide optional options to configure this projecion. 154:T52c, A 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. type RandomizedLightProps = ThreeElements['group'] & { /** How many frames it will jiggle the lights, 1. * Frames is context aware, if a provider like AccumulativeShadows exists, frames will be taken from there! */ frames?: number /** Light position, [0, 0, 0] */ position?: [x: number, y: number, z: number] /** Radius of the jiggle, higher values make softer light, 5 */ radius?: number /** Amount of lights, 8 */ amount?: number /** Light intensity, 1 */ intensity?: number /** Ambient occlusion, lower values mean less AO, hight more, you can mix AO and directional light, 0.5 */ ambient?: number /** If the lights cast shadows, this is true by default */ castShadow?: boolean /** Default shadow bias, 0 */ bias?: number /** Default map size, 512 */ mapSize?: number /** Default size of the shadow camera, 10 */ size?: number /** Default shadow camera near, 0.5 */ near?: number /** Default shadow camera far, 500 */ far?: number } 161:T4b0, storybook A shadow caster that can help cast shadows of different patterns (textures) onto the scene. An optional shader prop lets you run a custom shader to modify/add effects to your shadow texture. The shader provides the following uniforms and varyings. Type Name Notes varying vec2 vUv UVs of the shadow casting plane uniform sampler2D uShadowMap The texture provided to the map prop uniform float uTime Current time Treat the output of the shader like an alpha map where 1 is opaque and 0 is transparent. gl_FragColor = vec4(vec3(1.), 1.); // Opaque gl_FragColor = vec4(vec3(0.), 1.); // Transparent 166:T6da, storybook Creates 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! type StageProps = { /** Lighting setup, default: "rembrandt" */ preset?: | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x: number, y: number, z: number]; fill: [x: number, y: number, z: number] } /** Controls the ground shadows, default: "contact" */ shadows?: boolean | 'contact' | 'accumulative' | StageShadows /** Optionally wraps and thereby centers the models using , can also be a margin, default: true */ adjustCamera?: boolean | number /** The default environment, default: "city" */ environment?: PresetsType | Partial /** The lighting intensity, default: 0.5 */ intensity?: number /** To adjust centering, default: undefined */ center?: Partial } type StageShadows = Partial & Partial & Partial & { type: 'contact' | 'accumulative' /** Shadow plane offset, default: 0 */ offset?: number /** Shadow bias, default: -0.0001 */ bias?: number /** Shadow normal bias, default: 0 */ normalBias?: number /** Shadow map size, default: 1024 */ size?: number } By default it gives you contact shadows and auto-centering. For a little more realistic results enable accumulative shadows, which requires that the canvas, and models, can handle shadows.

16b:T506, A convenience hook to load an environment map. The props are the same as on the component. export type EnvironmentLoaderProps = { files?: string | string[] path?: string preset?: PresetsType extensions?: (loader: Loader) => void encoding?: TextureEncoding You can use it without properties, which will default to px, nx, py, ny, pz, nz as *.png files inside your /public directory. const cubeTexture = useEnvironment() Or you can specificy from where to load the files. const presetTexture = useEnvironment({ preset: 'city' }) const rgbeTexture = useEnvironment({ files: 'model.hdr' }) const cubeTexture = useEnvironment({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) => `${n}.png`) }) In order to preload you do this: useEnvironment.preload({ preset: 'city' }) useEnvironment.preload({ files: 'model.hdr' }) useEnvironment.preload({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) => `${n}.png`) }) Keep in mind that preloading gainmaps is not possible, because their loader requires access to the renderer. You can also clear your environment map from the cache: useEnvironment.clear({ preset: 'city' }) useEnvironment.clear({ files: 'model.hdr' }) useEnvironment.clear({ files: ['px', 'nx', 'py', 'ny', 'pz', 'nz'].map((n) => `${n}.png`) }) 7:["$","$L20",null,{"value":{"docs":[{"slug":["getting-started","introduction"],"url":"/getting-started/introduction","editURL":"https://github.com/pmndrs/drei/edit/master/docs/getting-started/introduction.mdx","sourcecode":"","sourcecodeURL":"https://github.com/pmndrs/drei/tree/master/","title":"Introduction","description":"Useful helpers for @react-three/fiber","metadata":{"title":"Introduction","description":"Useful helpers for @react-three/fiber"},"image":"https://github.com/pmndrs/drei/raw/master/docs/logo.jpg","nav":-1,"content":["$undefined","\n",["$","section",null,{"className":"my-6 text-xl leading-relaxed","children":[["$","h2",null,{"className":"sr-only","children":"Summary"}],["$","p",null,{"className":"my-4","children":["A growing collection of useful helpers and fully functional, ready-made abstractions for\n",["$","a",null,{"children":"@react-three/fiber","href":"https://github.com/pmndrs/react-three-fiber","target":"_blank","rel":"noopener noreferrer","className":"text-primary [&_code]:text-primary"}],"."]}]]}],"\n",["$","div",null,{"children":[["$","iframe",null,{"src":"https://pmndrs.github.io/examples/ground-reflections-and-video-textures","className":"w-full aspect-video rounded-lg"}],["$","p",null,{"className":"mt-1 text-xs text-on-surface-variant","children":["This is an embed iframe of the ",["$","a",null,{"children":"Ground Reflections And Video Textures","href":"https://pmndrs.github.io/examples/examples/ground-reflections-and-video-textures","target":"_blank","rel":"noopener noreferrer","className":"text-primary [&_code]:text-primary"}]," example."]}]]}],"\n",["$","p",null,{"className":"my-4","children":[["$","a",null,{"href":"https://drei.pmnd.rs/","target":"_blank","rel":"noopener noreferrer","data-slot":"badge","data-variant":"secondary","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80 align-middle","style":{"--secondary":"var(--brand-storybook)","--secondary-foreground":"white"},"children":[["$","svg",null,{"data-icon":"inline-start","viewBox":"0 0 24 24","fill":"currentColor","aria-hidden":"true","children":["$","path",null,{"d":"M16.71.243l-.12 2.71a.18.18 0 00.29.15l1.06-.8.9.7a.18.18 0 00.28-.14l-.1-2.76 1.33-.1a1.2 1.2 0 011.279 1.2v21.596a1.2 1.2 0 01-1.26 1.2l-16.096-.72a1.2 1.2 0 01-1.15-1.16l-.75-19.797a1.2 1.2 0 011.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08 0-3.2-1.72-4.89-4.859-4.89-3.15 0-4.899 1.72-4.899 4.29 0 4.45 5.999 4.53 5.999 6.959 0 .7-.32 1.1-1.05 1.1-.96 0-1.35-.49-1.3-2.16 0-.36-3.649-.48-3.769 0-.27 4.03 2.23 5.2 5.099 5.2 2.79 0 4.969-1.49 4.969-4.18 0-4.77-6.099-4.64-6.099-6.999 0-.97.72-1.1 1.13-1.1.45 0 1.25.07 1.19 1.87z"}]}],"$undefined","Storybook"]}]," ",["$","a",null,{"href":"https://www.chromatic.com/library?appId=64a019f36ecd3751d0ada612&branch=master","target":"_blank","rel":"noopener noreferrer","data-slot":"badge","data-variant":"secondary","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80 align-middle","style":"$undefined","children":["$L21","$undefined","chromatic"]}]," ","$L22"," ","$L23"," ","$L24"," ","$L25"]}],"\n","$L26","\n","$L27","\n","$L28","\n","$L29","\n","$L2a","\n","$L2b","\n","$L2c","\n","$L2d","\n","$L2e","\n","$L2f"],"boxes":[],"tableOfContents":[{"id":"introduction","level":0,"label":"Introduction","url":"/getting-started/introduction#introduction","title":"Introduction","content":"\nA growing collection of useful helpers and fully functional, ready-made abstractions for\n@react-three/fiber.\n\nThis is an embed iframe of the Ground Reflections And Video Textures example.\n\nStorybook chromatic npm downloads discord Open in Codespaces\n\n","parent":null},{"id":"install","level":1,"label":"Introduction","url":"/getting-started/introduction#install","title":"INSTALL","content":"\nIf you make a component that is generic enough to be useful to others, think about CONTRIBUTING!\nnpm install @react-three/drei\n\n\n\nthis package is using the stand-alone three-stdlib instead of three/examples/jsm.\n\n","parent":"$7:props:value:docs:0:tableOfContents:0"},{"id":"basic-usage","level":1,"label":"Introduction","url":"/getting-started/introduction#basic-usage","title":"Basic usage","content":"\nimport { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'\n\n","parent":"$7:props:value:docs:0:tableOfContents:0"},{"id":"react-native","level":1,"label":"Introduction","url":"/getting-started/introduction#react-native","title":"React-native","content":"\nimport { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'\n\nThe native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.","parent":"$7:props:value:docs:0:tableOfContents:0"}]},{"slug":["abstractions","ascii-renderer"],"url":"/abstractions/ascii-renderer","editURL":"https://github.com/pmndrs/drei/edit/master/docs/abstractions/ascii-renderer.mdx","sourcecode":"src/core/AsciiRenderer.tsx","sourcecodeURL":"https://github.com/pmndrs/drei/tree/master/src/core/AsciiRenderer.tsx","title":"$L30","description":"$undefined","metadata":{"title":"AsciiRenderer","description":""},"image":"https://github.com/pmndrs/drei/raw/master/docs/logo.jpg","nav":"$Infinity","content":"$L31","boxes":[{"id":"vq9wsl","img":"https://github.com/pmndrs/drei/raw/master/docs/assets/csb-thumbs/vq9wsl.webp"}],"tableOfContents":[{"id":"asciirenderer","level":0,"label":"AsciiRenderer","url":"/abstractions/ascii-renderer#asciirenderer","title":"AsciiRenderer","content":"\n\nAbstraction of three's AsciiEffect. It creates a DOM layer on top of the canvas and renders the scene as ascii characters.\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