@react-three/drei 9.0.0-beta.1 → 9.0.0-beta.2

package/README.md

@@ -249,6 +249,10 @@ PointerLockControls additionally supports a `selector` prop, which enables the b
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-transformcontrols--transform-controls-story)
 
+<p>
+  <a href="https://codesandbox.io/s/btsbj"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/btsbj/screenshot.png" alt="Tranform controls"/></a>
+</p>
+
 An abstraction around [THREE.TransformControls](https://threejs.org/docs/#examples/en/controls/TransformControls).
 
 You can wrap objects which then receive a transform gizmo.
@@ -277,13 +281,13 @@ If you are using other controls (Orbit, Trackball, etc), you will notice how the
 
 ![](https://img.shields.io/badge/-Dom only-red)
 
-<p align="center">
-  <a href="https://codesandbox.io/s/l4klb"><img width="16%" src="https://codesandbox.io/api/v1/sandboxes/l4klb/screenshot.png" alt="Horizontal tiles"/></a>
-  <a href="https://codesandbox.io/s/4m0d0"><img width="16%" src="https://codesandbox.io/api/v1/sandboxes/4m0d0/screenshot.png" alt="M1 scroll"/></a>
-  <a href="https://codesandbox.io/s/gsm1y"><img width="16%" src="https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png" alt="useIntersect"/></a>
-  <a href="https://codesandbox.io/s/x8gvs"><img width="16%" src="https://codesandbox.io/api/v1/sandboxes/x8gvs/screenshot.png" alt="Infinite scroll"/></a>
-  <a href="https://codesandbox.io/s/yjhzv"><img width="16%" src="https://codesandbox.io/api/v1/sandboxes/yjhzv/screenshot.png" alt="Vertical scroll"/></a>
-  <a href="https://codesandbox.io/s/4jr4p"><img width="16%" src="https://codesandbox.io/api/v1/sandboxes/4jr4p/screenshot.png" alt="GLTF and useScroll"/></a>
+<p>
+  <a href="https://codesandbox.io/s/l4klb"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/l4klb/screenshot.png" alt="Horizontal tiles"/></a>
+  <a href="https://codesandbox.io/s/4m0d0"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/4m0d0/screenshot.png" alt="M1 scroll"/></a>
+  <a href="https://codesandbox.io/s/gsm1y"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png" alt="useIntersect"/></a>
+  <a href="https://codesandbox.io/s/x8gvs"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/x8gvs/screenshot.png" alt="Infinite scroll"/></a>
+  <a href="https://codesandbox.io/s/yjhzv"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/yjhzv/screenshot.png" alt="Vertical scroll"/></a>
+  <a href="https://codesandbox.io/s/4jr4p"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/4jr4p/screenshot.png" alt="GLTF and useScroll"/></a>
 </p>
 
 Scroll controls create a HTML scroll container in front of the canvas. Everything you drop into the `<Scroll>` component will be affected.
@@ -343,6 +347,11 @@ function Foo(props) {
 
 ![](https://img.shields.io/badge/-Dom only-red)
 
+<p>
+  <a href="https://codesandbox.io/s/kheke"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/kheke/screenshot.png" alt="Journey stage 1"/></a>
+  <a href="https://codesandbox.io/s/qyz5r"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/qyz5r/screenshot.png" alt="Watch"/></a>
+</p>
+
 Semi-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.
 
 ```jsx
@@ -398,6 +407,13 @@ A triangle that fills the screen, ideal for full-screen fragment shader work (ra
 
 #### Image
 
+<p>
+  <a href="https://codesandbox.io/s/l4klb"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/l4klb/screenshot.png" alt="Horizontal tiles"/></a>
+  <a href="https://codesandbox.io/s/gsm1y"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png" alt="useIntersect"/></a>
+  <a href="https://codesandbox.io/s/x8gvs"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/x8gvs/screenshot.png" alt="Infinite scroll"/></a>
+  <a href="https://codesandbox.io/s/yjhzv"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/yjhzv/screenshot.png" alt="Vertical scroll"/></a>
+</p>
+
 A shader-based image component with auto-cover (similar to css/background: cover).
 
 ```jsx
@@ -413,9 +429,13 @@ function Foo() {
 
 #### Text
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
+
+<p>
+  <a href="https://codesandbox.io/s/yup2o"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/yup2o/screenshot.png" alt="Demo"/></a>
+</p>
 
-Hi-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!
+Hi-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!
 
 ```jsx
 <Text color="black" anchorX="center" anchorY="middle">
@@ -445,6 +465,10 @@ Renders a THREE.Line2.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--quadratic-bezier)
 
+<p>
+  <a href="https://codesandbox.io/s/2ij9u"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2ij9u/screenshot.png" alt="Demo"/></a>
+</p>
+
 Renders a THREE.Line2 using THREE.QuadraticBezierCurve3 for interpolation.
 
 ```jsx
@@ -499,6 +523,10 @@ Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.
 
 #### PositionalAudio
 
+<p>
+  <a href="https://codesandbox.io/s/gkfhr"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/gkfhr/screenshot.png" alt="Demo"/></a>
+</p>
+
 [![](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)
 
 A 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.
@@ -531,7 +559,7 @@ Adds a `<group />` that always faces the camera.
 
 #### GizmoHelper
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/gizmos-gizmohelper--default-story)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/gizmos-gizmohelper--gizmo-helper-story)
 
 Used by widgets that visualize and control camera position.
 
@@ -564,12 +592,16 @@ Abstraction around threes own [EffectComposer](https://threejs.org/docs/#example
 
 #### GradientTexture
 
+<p>
+  <a href="https://codesandbox.io/s/l03yb"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/l03yb/screenshot.png" alt="Demo"/></a>
+</p>
+
 A declarative THREE.Texture which attaches to "map" by default. You can use this to create gradient backgrounds.
 
 ```jsx
 <mesh>
   <planeGeometry />
-  <meshBasicMaterial depthWrite={false}>
+  <meshBasicMaterial>
     <GradientTexture
       stops={[0, 1]} // As many stops as you want
       colors={['aquamarine', 'hotpink']} // Colors need to match the number of stops
@@ -581,6 +613,10 @@ A declarative THREE.Texture which attaches to "map" by default. You can use this
 
 #### Edges
 
+<p>
+  <a href="https://codesandbox.io/s/ny3p4"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ny3p4/screenshot.png" alt="Demo"/></a>
+</p>
+
 Abstracts [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.
 
 ```jsx
@@ -599,6 +635,10 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-useanimations--use-animations-st)
 
+<p>
+  <a href="https://codesandbox.io/s/pecl6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/pecl6/screenshot.png" alt="Demo"/></a>
+</p>
+
 A hook that abstracts [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer).
 
 ```jsx
@@ -625,6 +665,11 @@ return <primitive object={scene} />
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-meshreflectormaterial--reflector-st)
 
+<p>
+  <a href="https://codesandbox.io/s/lx2h8"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/lx2h8/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/l900i"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/l900i/screenshot.png" alt="Demo"/></a>
+</p>
+
 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](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial) and accepts all its props.
 
 ```jsx
@@ -650,6 +695,7 @@ Easily add reflections and/or blur to any mesh. It takes surface roughness into
       3 = distortion channel
       4 = lod channel (based on the roughness)
     */
+   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)
   >
 </mesh>
 ```
@@ -671,6 +717,10 @@ This material makes your geometry wobble and wave around. It was taken from the
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-meshdistortmaterial--mesh-distort-material-st)
 
+<p>
+  <a href="https://codesandbox.io/s/l03yb"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/l03yb/screenshot.png" alt="Demo"/></a>
+</p>
+
 This material makes your geometry distort following simplex noise.
 
 ```jsx
@@ -694,6 +744,10 @@ An antialiased round dot that always keeps the same size.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-softshadows--soft-shadows-st)
 
+<p>
+  <a href="https://codesandbox.io/s/dh2jc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/dh2jc/screenshot.png" alt="Demo"/></a>
+</p>
+
 Injects [percent closer soft shadows (pcss)](https://threejs.org/examples/#webgl_shadowmap_pcss) into threes shader chunk.
 
 ```jsx
@@ -710,6 +764,10 @@ softShadows({
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-shadermaterial--shader-material-story)
 
+<p>
+  <a href="https://codesandbox.io/s/ni6v4"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ni6v4/screenshot.png" alt="Demo"/></a>
+</p>
+
 Creates a THREE.ShaderMaterial for you with easier handling of uniforms, which are also automatically declared as setter/getters on the object.
 
 ```jsx
@@ -804,6 +862,12 @@ function Scene() {
 
 [![](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)
 
+<p>
+  <a href="https://codesandbox.io/s/qyz5r"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/qyz5r/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/9keg6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/9keg6/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/6oei7"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/6oei7/screenshot.png" alt="Demo"/></a>
+</p>
+
 Allows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically.
 
 ```jsx
@@ -857,6 +921,10 @@ const [hidden, set] = useState()
 
 ![](https://img.shields.io/badge/-Dom only-red)
 
+<p>
+  <a href="https://codesandbox.io/s/ls503"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ls503/screenshot.png" alt="Demo"/></a>
+</p>
+
 This 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.
 
 For 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.
@@ -874,10 +942,14 @@ For this to work properly your event handler have to call `event.stopPropagation
 
 ![](https://img.shields.io/badge/-Dom only-red)
 
-This 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.
+<p>
+  <a href="https://codesandbox.io/s/ny3p4"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/ny3p4/screenshot.png" alt="Demo"/></a>
+</p>
+
+This 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.
 
 ```jsx
-<Select box multiple onChange={console.log}>
+<Select box multiple onChange={console.log} filter={items => items}>
   <Foo />
   <Bar />
 </Select>
@@ -944,6 +1016,10 @@ The rendertarget is automatically disposed when unmounted.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-usecamera--use-camera-st)
 
+<p>
+  <a href="https://codesandbox.io/s/py4db"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/py4db/screenshot.png" alt="Demo"/></a>
+</p>
+
 A 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).
 
 ```jsx
@@ -959,6 +1035,7 @@ A hook for a quick way to add helpers to existing nodes in the scene. It handles
 ```jsx
 const mesh = useRef()
 useHelper(mesh, BoxHelper, 'cyan')
+useHelper(condition && mesh, BoxHelper, 'red') // you can passe false instead of the object ref to hide the helper
 
 <mesh ref={mesh} ... />
 ```
@@ -1015,6 +1092,10 @@ return (
 
 #### useIntersect
 
+<p>
+  <a href="https://codesandbox.io/s/gsm1y"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/gsm1y/screenshot.png" alt="Demo"/></a>
+</p>
+
 A 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.
 
 ```jsx
@@ -1028,6 +1109,10 @@ return <mesh ref={ref} />
 
 ![](https://img.shields.io/badge/-Dom only-red)
 
+<p>
+  <a href="https://codesandbox.io/s/0buje"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/0buje/screenshot.png" alt="Demo"/></a>
+</p>
+
 A 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.
 
 ```jsx
@@ -1156,6 +1241,11 @@ const envMap = useCubeTexture(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png',
 
 #### Instances
 
+<p>
+  <a href="https://codesandbox.io/s/h8o2d"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/h8o2d/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/i6t0j"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/i6t0j/screenshot.png" alt="Demo"/></a>
+</p>
+
 A 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!
 
 ```jsx
@@ -1197,8 +1287,14 @@ You can define events on them!
 <Instance onClick={...} onPointerOver={...} />
 ```
 
+👉 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).
+
 #### Merged
 
+<p>
+  <a href="https://codesandbox.io/s/l900i"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/l900i/screenshot.png" alt="Demo"/></a>
+</p>
+
 This 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.
 
 ```jsx
@@ -1310,6 +1406,10 @@ useFrame(() => {
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-detailed--detailed-st)
 
+<p>
+  <a href="https://codesandbox.io/s/12nmp"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/12nmp/screenshot.png" alt="Demo"/></a>
+</p>
+
 A wrapper around [THREE.LOD](https://threejs.org/docs/#api/en/objects/LOD) (Level of detail).
 
 ```jsx
@@ -1387,7 +1487,7 @@ useBVH(mesh)
 
 #### Center
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-center--default-story)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-center--default-story)
 
 Calculates a boundary box and centers its children accordingly. `alignTop` makes adjusts it so that it's sits flush on y=0.
 
@@ -1399,6 +1499,10 @@ Calculates a boundary box and centers its children accordingly. `alignTop` makes
 
 #### Bounds
 
+<p>
+  <a href="https://codesandbox.io/s/rz2g0"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/rz2g0/screenshot.png" alt="Demo"/></a>
+</p>
+
 Calculates a boundary box and centers the camera accordingly. If you are using controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes.
 
 ```jsx
@@ -1425,7 +1529,12 @@ function Foo() {
 
 #### CameraShake
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/camera-camerashake--camera-shake-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-camerashake--camera-shake-story)
+
+<p>
+  <a href="https://codesandbox.io/s/t4l0f"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/t4l0f/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/0ycwe"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/0ycwe/screenshot.png" alt="Demo"/></a>
+</p>
 
 A component for applying a configurable camera shake effect. Currently only supports rotational camera shake. Pass a ref to recieve the `ShakeController` API.
 
@@ -1457,6 +1566,10 @@ interface ShakeController {
 
 #### Float
 
+<p>
+  <a href="https://codesandbox.io/s/2ij9u"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2ij9u/screenshot.png" alt="Demo"/></a>
+</p>
+
 This component makes its contents float or hover.
 
 ```js
@@ -1471,7 +1584,7 @@ This component makes its contents float or hover.
 
 #### Stage
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/prototyping-stage--stage-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stage--stage-st)
 
 Creates a "stage" with proper studio lighting, content centered and planar, shadows and ground-contact shadows.
 
@@ -1485,6 +1598,10 @@ Make sure to set the `makeDefault` prop on your controls, in that case you do no
 
 #### Backdrop
 
+<p>
+  <a href="https://codesandbox.io/s/8yfnd"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/8yfnd/screenshot.png" alt="Demo"/></a>
+</p>
+
 A curved plane, like a studio backdrop. This is for presentational purposes, to break up light and shadows more interestingly.
 
 ```jsx
@@ -1513,7 +1630,11 @@ A cheap canvas-texture-based circular gradient.
 
 #### ContactShadows
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-contactshadows--contact-shadow-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-contactshadows--contact-shadow-st)
+
+<p>
+  <a href="https://codesandbox.io/s/qxjoj"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/qxjoj/screenshot.png" alt="Demo"/></a>
+</p>
 
 A [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]`.
 
@@ -1529,6 +1650,11 @@ Since this is a rather expensive effect you can limit the amount of frames it re
 
 #### SpotLight
 
+<p>
+  <a href="https://codesandbox.io/s/tx1pq"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/tx1pq/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/wdzv4"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/wdzv4/screenshot.png" alt="Demo"/></a>
+</p>
+
 A Volumetric spotlight.
 
 ```jsx
@@ -1550,10 +1676,16 @@ function Foo() {
 
 #### Environment
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/abstractions-environment--environment-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-environment--environment-story)
+
+<p>
+  <a href="https://codesandbox.io/s/t4l0f"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/t4l0f/screenshot.png" alt="Demo"/></a>
+</p>
 
 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](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.
 
+👉 Note: `preset` property is not meant to be used in production environments. Consider using `files` property together with local files or a CDN of your choice instead.
+
 ```jsx
 <Environment
   background={false}
@@ -1572,7 +1704,11 @@ If you provide a single string it will use THREE.RGBELoader.
 
 #### Sky
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-sky--sky-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-sky--sky-st)
+
+<p>
+  <a href="https://codesandbox.io/s/vkgi6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/vkgi6/screenshot.png" alt="Demo"/></a>
+</p>
 
 Adds a [sky](https://threejs.org/examples/#webgl_shaders_sky) to your scene.
 
@@ -1582,7 +1718,7 @@ Adds a [sky](https://threejs.org/examples/#webgl_shaders_sky) to your scene.
 
 #### Stars
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-stars--stars-st)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stars--stars-st)
 
 Adds a blinking shader-based starfield to your scene.
 
@@ -1594,8 +1730,14 @@ Adds a blinking shader-based starfield to your scene.
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-cloud--cloud-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
 
+<p>
+  <a href="https://codesandbox.io/s/mbfzf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/mbfzf/screenshot.png" alt="Demo"/></a>
+</p>
+
 Particle based cloud.
 
+👉 Note: `<Cloud />` component is not meant to be used in production environments as it relies on third-party CDN.
+
 ```jsx
 <Cloud
   opacity={0.5}
@@ -1608,12 +1750,14 @@ Particle based cloud.
 
 #### useMatcapTexture
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/prototyping-usematcaptexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
+[![](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)
 
 Loads matcap textures from this repository: https://github.com/emmelleppi/matcaps
 
 (It is a fork of this repository: https://github.com/nidorx/matcaps)
 
+👉 Note: `useMatcapTexture` hook is not meant to be used in production environments as it relies on third-party CDN.
+
 ```jsx
 const [matcap, url] = useMatcapTexture(
  0, // index of the matcap texture https://github.com/emmelleppi/matcaps/blob/master/matcap-list.json
@@ -1637,10 +1781,12 @@ const [matcap] = useMatcapTexture('3E2335_D36A1B_8E4A2E_2842A5')
 
 #### useNormalTexture
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/prototyping-usenormaltexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
+[![](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)
 
 Loads normal textures from this repository: https://github.com/emmelleppi/normal-maps
 
+👉 Note: `useNormalTexture` hook is not meant to be used in production environments as it relies on third-party CDN.
+
 ```jsx
 const [normalMap, url] = useNormalTexture(
   1, // index of the normal texture - https://github.com/emmelleppi/normal-maps/blob/master/normals.json

package/core/ArcballControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=o(e),c=s(t);const u=c.forwardRef((({makeDefault:e,camera:t,regress:o,domElement:s,onChange:u,onStart:i,onEnd:l,...d},f)=>{const b=r.useThree((({invalidate:e})=>e)),m=r.useThree((({camera:e})=>e)),v=r.useThree((({gl:e})=>e)),h=r.useThree((({events:e})=>e)),p=r.useThree((({set:e})=>e)),E=r.useThree((({get:e})=>e)),g=r.useThree((({performance:e})=>e)),j=t||m,O=s||("boolean"!=typeof h.connected?h.connected:v.domElement),T=c.useMemo((()=>new n.ArcballControls(j)),[j]);return r.useFrame((()=>{T.enabled&&T.update()})),c.useEffect((()=>{const e=e=>{b(),o&&g.regress(),u&&u(e)};return T.connect(O),T.addEventListener("change",e),i&&T.addEventListener("start",i),l&&T.addEventListener("end",l),()=>{T.removeEventListener("change",e),i&&T.removeEventListener("start",i),l&&T.removeEventListener("end",l),T.dispose()}}),[O,u,i,l,o,T,b]),c.useEffect((()=>{if(e){const e=E().controls;return p({controls:T}),()=>p({controls:e})}}),[e,T]),c.createElement("primitive",a.default({ref:f,object:T},d))}));exports.ArcballControls=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=o(e),c=s(t);const u=t.forwardRef((({camera:e,makeDefault:o,regress:s,domElement:u,onChange:i,onStart:l,onEnd:d,...f},b)=>{const m=r.useThree((({invalidate:e})=>e)),v=r.useThree((({camera:e})=>e)),h=r.useThree((({gl:e})=>e)),p=r.useThree((({events:e})=>e)),E=r.useThree((({set:e})=>e)),g=r.useThree((({get:e})=>e)),j=r.useThree((({performance:e})=>e)),O=e||v,T=u||("boolean"!=typeof p.connected?p.connected:h.domElement),y=t.useMemo((()=>new n.ArcballControls(O)),[O]);return r.useFrame((()=>{y.enabled&&y.update()})),t.useEffect((()=>{const e=e=>{m(),s&&j.regress(),i&&i(e)};return y.connect(T),y.addEventListener("change",e),l&&y.addEventListener("start",l),d&&y.addEventListener("end",d),()=>{y.removeEventListener("change",e),l&&y.removeEventListener("start",l),d&&y.removeEventListener("end",d),y.dispose()}}),[T,i,l,d,s,y,m]),t.useEffect((()=>{if(o){const e=g().controls;return E({controls:y}),()=>E({controls:e})}}),[o,y]),c.createElement("primitive",a.default({ref:b,object:y},f))}));exports.ArcballControls=u;

package/core/ArcballControls.d.ts

@@ -1,15 +1,15 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 import * as React from 'react';
-import * as THREE from 'three';
 import { ArcballControls as ArcballControlsImpl } from 'three-stdlib';
-export declare type ArcballControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
+import type { Event, OrthographicCamera, PerspectiveCamera } from 'three';
+export declare type ArcballControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
     target?: ReactThreeFiber.Vector3;
-    camera?: THREE.Camera;
+    camera?: OrthographicCamera | PerspectiveCamera;
     domElement?: HTMLElement;
     regress?: boolean;
     makeDefault?: boolean;
-    onChange?: (e?: THREE.Event) => void;
-    onStart?: (e?: THREE.Event) => void;
-    onEnd?: (e?: THREE.Event) => void;
-}>;
-export declare const ArcballControls: React.ForwardRefExoticComponent<Pick<ArcballControlsProps, string | number | symbol> & React.RefAttributes<ArcballControlsImpl>>;
+    onChange?: (e?: Event) => void;
+    onStart?: (e?: Event) => void;
+    onEnd?: (e?: Event) => void;
+}>, 'ref'>;
+export declare const ArcballControls: React.ForwardRefExoticComponent<ArcballControlsProps & React.RefAttributes<ArcballControlsImpl>>;

package/core/ArcballControls.js

@@ -1,11 +1,12 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import { useThree, useFrame } from '@react-three/fiber';
 import * as React from 'react';
+import { forwardRef, useMemo, useEffect } from 'react';
 import { ArcballControls as ArcballControls$1 } from 'three-stdlib';
 
-const ArcballControls = /*#__PURE__*/React.forwardRef(({
-  makeDefault,
+const ArcballControls = /*#__PURE__*/forwardRef(({
   camera,
+  makeDefault,
   regress,
   domElement,
   onChange,
@@ -36,11 +37,11 @@ const ArcballControls = /*#__PURE__*/React.forwardRef(({
   }) => performance);
   const explCamera = camera || defaultCamera;
   const explDomElement = domElement || (typeof events.connected !== 'boolean' ? events.connected : gl.domElement);
-  const controls = React.useMemo(() => new ArcballControls$1(explCamera), [explCamera]);
+  const controls = useMemo(() => new ArcballControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
   });
-  React.useEffect(() => {
+  useEffect(() => {
     const callback = e => {
       invalidate();
       if (regress) performance.regress();
@@ -58,7 +59,7 @@ const ArcballControls = /*#__PURE__*/React.forwardRef(({
       controls.dispose();
     };
   }, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
       set({

package/core/Cloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,...l}){const d=c.useRef(),h=n.useTexture("https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png"),m=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=d.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=m[t].rotation,r.children[0].scale.setScalar(m[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",l,c.createElement("group",{position:[0,0,u/2*o],ref:d},m.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:h,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,texture:l="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",...d}){const h=c.useRef(),m=n.useTexture(l),p=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=h.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=p[t].rotation,r.children[0].scale.setScalar(p[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",d,c.createElement("group",{position:[0,0,u/2*o],ref:h},p.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:m,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};

package/core/Cloud.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-export declare function Cloud({ opacity, speed, width, depth, segments, ...props }: {
+export declare function Cloud({ opacity, speed, width, depth, segments, texture, ...props }: {
     [x: string]: any;
     opacity?: number | undefined;
     speed?: number | undefined;
     width?: number | undefined;
     depth?: number | undefined;
     segments?: number | undefined;
+    texture?: string | undefined;
 }): JSX.Element;

package/core/Cloud.js

@@ -11,10 +11,11 @@ function Cloud({
   width = 10,
   depth = 1.5,
   segments = 20,
+  texture = CLOUD_URL,
   ...props
 }) {
   const group = React.useRef();
-  const texture = useTexture(CLOUD_URL);
+  const cloudTexture = useTexture(texture);
   const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
     x: width / 2 - Math.random() * width,
     y: width / 2 - Math.random() * width,
@@ -45,7 +46,7 @@ function Cloud({
     scale: scale,
     rotation: [0, 0, 0]
   }, /*#__PURE__*/React.createElement("meshStandardMaterial", {
-    map: texture,
+    map: cloudTexture,
     transparent: true,
     opacity: scale / 6 * density * opacity,
     depthTest: false

package/core/ContactShadows.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),s=o(r),l=o(t);const c=s.forwardRef((({scale:e,frames:r=1/0,opacity:t=1,width:u=1,height:o=1,blur:c=1,far:d=10,resolution:f=256,...h},m)=>{const p=a.useThree((({scene:e})=>e)),g=a.useThree((({gl:e})=>e)),b=s.useRef();u*=Array.isArray(e)?e[0]:e||1,o*=Array.isArray(e)?e[1]:e||1;const[M,y,v,w,T,x,R]=s.useMemo((()=>{const e=new l.WebGLRenderTarget(f,f),r=new l.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new l.PlaneBufferGeometry(u,o).rotateX(Math.PI/2),a=new l.Mesh(t),i=new l.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>e.fragmentShader=e.fragmentShader.replace("1.0 - fragCoordZ ), opacity );","0.0 ), ( 1.0 - fragCoordZ ) * 1.0 );");const s=new l.ShaderMaterial(n.HorizontalBlurShader),c=new l.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=s.depthTest=!1,[e,t,i,a,s,c,r]}),[f,u,o,e]);let j=0;return a.useFrame((()=>{if(b.current&&(r===1/0||j<r)){const e=p.background;p.background=null,p.overrideMaterial=v,g.setRenderTarget(M),g.render(p,b.current),p.overrideMaterial=null,w.material=T,w.material.uniforms.tDiffuse.value=M.texture,T.uniforms.h.value=c/256,g.setRenderTarget(R),g.render(w,b.current),w.material=x,w.material.uniforms.tDiffuse.value=R.texture,x.uniforms.v.value=c/256,g.setRenderTarget(M),g.render(w,b.current),g.setRenderTarget(null),p.background=e,j++}})),s.createElement("group",i.default({"rotation-x":Math.PI/2},h,{ref:m}),s.createElement("mesh",{geometry:y,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},s.createElement("meshBasicMaterial",{map:M.texture,transparent:!0,opacity:t})),s.createElement("orthographicCamera",{ref:b,args:[-u/2,u/2,o/2,-o/2,0,d]}))}));exports.ContactShadows=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),s=o(r),l=o(t);const c=s.forwardRef((({scale:e,frames:r=1/0,opacity:t=1,width:u=1,height:o=1,blur:c=1,far:d=10,resolution:f=256,smooth:h=!0,...m},p)=>{const g=a.useThree((({scene:e})=>e)),b=a.useThree((({gl:e})=>e)),M=s.useRef(null);u*=Array.isArray(e)?e[0]:e||1,o*=Array.isArray(e)?e[1]:e||1;const[v,y,w,T,x,R,j]=s.useMemo((()=>{const e=new l.WebGLRenderTarget(f,f),r=new l.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new l.PlaneBufferGeometry(u,o).rotateX(Math.PI/2),a=new l.Mesh(t),i=new l.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>e.fragmentShader=e.fragmentShader.replace("1.0 - fragCoordZ ), opacity );","0.0 ), ( 1.0 - fragCoordZ ) * 1.0 );");const s=new l.ShaderMaterial(n.HorizontalBlurShader),c=new l.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=s.depthTest=!1,[e,t,i,a,s,c,r]}),[f,u,o,e]),O=s.useCallback((e=>{T.visible=!0,T.material=x,x.uniforms.tDiffuse.value=v.texture,x.uniforms.h.value=1*e/256,b.setRenderTarget(j),b.render(T,M.current),T.material=R,R.uniforms.tDiffuse.value=j.texture,R.uniforms.v.value=1*e/256,b.setRenderTarget(v),b.render(T,M.current),T.visible=!1}),[]);let P=0;return a.useFrame((()=>{if(M.current&&(r===1/0||P<r)){const e=g.background;g.background=null,g.overrideMaterial=w,b.setRenderTarget(v),b.render(g,M.current),g.overrideMaterial=null,O(c),h&&O(.4*c),b.setRenderTarget(null),g.background=e,P++}})),s.createElement("group",i.default({"rotation-x":Math.PI/2},m,{ref:p}),s.createElement("mesh",{geometry:y,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},s.createElement("meshBasicMaterial",{map:v.texture,transparent:!0,opacity:t})),s.createElement("orthographicCamera",{ref:M,args:[-u/2,u/2,o/2,-o/2,0,d]}))}));exports.ContactShadows=c;