@react-three/drei 9.40.5 → 9.41.1

package/README.md

@@ -475,7 +475,7 @@ enum Controls {
   jump = 'jump',
 }
 function App() {
-  const map = useMemo<KeyboardControlsEntry<Controls>>(()=>[
+  const map = useMemo<KeyboardControlsEntry<Controls>[]>(()=>[
     { name: Controls.forward, keys: ['ArrowUp', 'w', 'W'] },
     { name: Controls.back, keys: ['ArrowDown', 's', 'S'] },
     { name: Controls.left, keys: ['ArrowLeft', 'a', 'A'] },
@@ -1027,7 +1027,7 @@ You can either pass a Mesh and InstancedMesh as children:
 ```tsx
 // This simple example scatters 1000 spheres on the surface of the sphere mesh.
 <Sampler
-  weight={"normal"} // the name of the attribute to be used as sampling weight
+  weight={'normal'} // the name of the attribute to be used as sampling weight
   transform={transformPoint} // a function that transforms each instance given a sample. See the examples for more.
   count={16} // Number of samples
 >
@@ -1036,7 +1036,7 @@ You can either pass a Mesh and InstancedMesh as children:
   </mesh>
 
   <instancedMesh args={[null, null, 1_000]}>
-    <sphereGeometry args={[0.1]}/>
+    <sphereGeometry args={[0.1]} />
   </instancedMesh>
 </Sampler>
 ```
@@ -1950,7 +1950,7 @@ A convenience hook that returns a `THREE.VideoTexture` and integrates loading in
 
 ```tsx
 type VideoTextureProps = {
-  unsuspend?: 'canplay' | 'canplaythrough'
+  unsuspend?: 'canplay' | 'canplaythrough' | 'loadedmetadata'
   muted?: boolean
   loop?: boolean
   start?: boolean
@@ -2635,12 +2635,32 @@ This component makes its contents float or hover.
 
 [![](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.
+Creates a "stage" with proper studio lighting, content centered and planar, model-shadows and ground-shadows. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!
 
-Make sure to set the `makeDefault` prop on your controls, in that case you do not need to provide `controls` via prop.
+```tsx
+type StageShadows = Partial<AccumulativeShadowsProps> &
+  Partial<ContactShadowsProps> & {
+    type: 'contact' | 'accumulative'
+    bias?: number
+    size?: number
+  }
+
+type StageProps = JSX.IntrinsicElements['group'] & {
+  /** Lighting setup, default: "rembrandt" */
+  preset?: keyof typeof presets
+  /** Controls the ground shadows, default: "accumulative" */
+  shadows?: boolean | 'contact' | 'accumulative' | StageShadows
+  /** Optionally wraps and thereby centers the models using <Bounds>, can also be a margin, default: false */
+  adjustCamera?: boolean | number
+  /** The default environment, default: "city" */
+  environment?: PresetsType | null
+  /** The lighting intensity, default: 0.5 */
+  intensity?: number
+}
+```
 
 ```jsx
-<Stage contactShadow shadows adjustCamera intensity={1} environment="city" preset="rembrandt" controls={controlsRef}>
+<Stage>
   <mesh />
 </Stage>
 ```
@@ -2828,6 +2848,39 @@ function Foo() {
   return <SpotLight depthBuffer={depthBuffer} />
 ```
 
+#### SpotLightShadows
+
+A shadow caster that can help cast shadows of different patterns (textures) onto the scene.
+
+```jsx
+<SpotLight>
+  <SpotLightShadows
+    distance={0.4} // Distance between the shadow caster and light
+    alphaTest={0.5} // Sets the alpha value to be used when running an alpha test. See Material.alphaTest
+    scale={1} //  Scale of the shadow caster plane
+    map={undefined} // Texture - Pattern of the shadow
+    shader={undefined} // Optional shader to run. Lets you add effects to the shadow map. See bellow
+    width={512} // Width of the shadow map. The higher the more expnsive
+    height={512} // Height of the shadow map. The higher the more expnsive
+  />
+</SpotLight>
+```
+
+An 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.
+
+| 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.
+
+```glsl
+gl_FragColor = vec4(vec3(1.), 1.); // Opaque
+gl_FragColor = vec4(vec3(0.), 1.); // Transparnet
+```
+
 #### Environment
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-environment--environment-story)

package/core/AccumulativeShadows.d.ts

@@ -1,6 +1,19 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
+export declare type AccumulativeShadowsProps = {
+    frames?: number;
+    blend?: number;
+    limit?: number;
+    scale?: number;
+    temporal?: boolean;
+    opacity?: number;
+    alphaTest?: number;
+    color?: string;
+    colorBlend?: number;
+    resolution?: number;
+    toneMapped?: boolean;
+};
 interface AccumulativeContext {
     lights: Map<any, any>;
     temporal: boolean;
@@ -46,19 +59,7 @@ export declare const AccumulativeShadows: React.ForwardRefExoticComponent<Pick<O
     quaternion?: ReactThreeFiber.Quaternion | undefined;
     layers?: ReactThreeFiber.Layers | undefined;
     dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
-    frames?: number | undefined;
-    blend?: number | undefined;
-    limit?: number | undefined;
-    scale?: number | undefined;
-    temporal?: boolean | undefined;
-    opacity?: number | undefined;
-    alphaTest?: number | undefined;
-    color?: string | undefined;
-    colorBlend?: number | undefined;
-    resolution?: number | undefined;
-    toneMapped?: boolean | undefined;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "alphaTest" | "opacity" | "toneMapped" | "resolution" | "frames" | "blend" | "temporal" | "limit" | "colorBlend"> & React.RefAttributes<AccumulativeContext>>;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & AccumulativeShadowsProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | keyof AccumulativeShadowsProps> & React.RefAttributes<AccumulativeContext>>;
 export declare const RandomizedLight: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.Group>, ReactThreeFiber.NodeProps<THREE.Group, typeof THREE.Group>>>, ReactThreeFiber.NonFunctionKeys<{
     position?: ReactThreeFiber.Vector3 | undefined;
     up?: ReactThreeFiber.Vector3 | undefined;

package/core/Clone.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("lodash.pick");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=a(e),c=n(t),i=a(r);function l(e,{keys:t=["near","far","color","distance","decay","penumbra","angle","intensity","skeleton","visible","castShadow","receiveShadow","morphTargetDictionary","morphTargetInfluences","name","geometry","material","position","rotation","scale","up","userData"],deep:r,inject:a,castShadow:n,receiveShadow:o}){let l=i.default(e,t);return r&&(l.geometry&&"materialsOnly"!==r&&(l.geometry=l.geometry.clone()),l.material&&"geometriesOnly"!==r&&(l.material=l.material.clone())),a&&(l="function"==typeof a?{...l,children:a(e)}:c.isValidElement(a)?{...l,children:a}:{...l,...a}),"Mesh"===e.type&&(n&&(l.castShadow=!0),o&&(l.receiveShadow=!0)),l}const u=c.forwardRef((({object:e,children:t,deep:r,castShadow:a,receiveShadow:n,inject:i,keys:d,...s},f)=>{const p={keys:d,deep:r,inject:i,castShadow:a,receiveShadow:n};if(Array.isArray(e))return c.createElement("group",o.default({},s,{ref:f}),e.map((e=>c.createElement(u,o.default({key:e.uuid,object:e},p)))),t);const{children:y,...m}=l(e,p),h=e.type[0].toLowerCase()+e.type.slice(1);return c.createElement(h,o.default({},m,s,{ref:f}),(null==e?void 0:e.children).map((e=>{let t={},r=e.type[0].toLowerCase()+e.type.slice(1);return"group"===r||"object3D"===r?(r=u,t={object:e,...p}):t=l(e,p),c.createElement(r,o.default({key:e.uuid},t))})),t,y)}));exports.Clone=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("lodash.pick"),i=require("three-stdlib");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=n(e),l=o(t),d=o(r),u=n(a);const s=d.forwardRef((({isChild:e=!1,object:t,children:r,deep:a,castShadow:n,receiveShadow:o,inject:f,keys:y,...h},m)=>{var p;const b={keys:y,deep:a,inject:f,castShadow:n,receiveShadow:o};if(t=d.useMemo((()=>{if(!1===e&&!Array.isArray(t)){let e=!1;if(t.traverse((t=>{t.isSkinnedMesh&&(e=!0)})),e)return i.SkeletonUtils.clone(t)}return t}),[t,e]),Array.isArray(t))return d.createElement("group",c.default({},h,{ref:m}),t.map((e=>d.createElement(s,c.default({key:e.uuid,object:e},b)))),r);const{children:v,...j}=function(e,{keys:t=["near","far","color","distance","decay","penumbra","angle","intensity","skeleton","visible","castShadow","receiveShadow","morphTargetDictionary","morphTargetInfluences","name","geometry","material","position","rotation","scale","up","userData","bindMode","bindMatrix","bindMatrixInverse","skeleton"],deep:r,inject:a,castShadow:i,receiveShadow:n}){let o=u.default(e,t);return r&&(o.geometry&&"materialsOnly"!==r&&(o.geometry=o.geometry.clone()),o.material&&"geometriesOnly"!==r&&(o.material=o.material.clone())),a&&(o="function"==typeof a?{...o,children:a(e)}:d.isValidElement(a)?{...o,children:a}:{...o,...a}),e instanceof l.Mesh&&(i&&(o.castShadow=!0),n&&(o.receiveShadow=!0)),o}(t,b),w=t.type[0].toLowerCase()+t.type.slice(1);return d.createElement(w,c.default({},j,h,{ref:m}),(null==(p=t)?void 0:p.children).map((e=>"Bone"===e.type?d.createElement("primitive",c.default({key:e.uuid,object:e},b)):d.createElement(s,c.default({key:e.uuid,object:e},b,{isChild:!0})))),r,v)}));exports.Clone=s;

package/core/Clone.d.ts

@@ -1,3 +1,4 @@
+import * as THREE from 'three';
 import * as React from 'react';
 import { MeshProps } from '@react-three/fiber';
 export declare const Clone: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").GroupProps, "children"> & {
@@ -8,4 +9,5 @@ export declare const Clone: React.ForwardRefExoticComponent<Pick<Omit<import("@r
     inject?: React.ReactNode | MeshProps | ((object: THREE.Object3D) => React.ReactNode);
     castShadow?: boolean | undefined;
     receiveShadow?: boolean | undefined;
-}, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "keys" | "deep" | "inject"> & React.RefAttributes<import("three").Group>>;
+    isChild?: boolean | undefined;
+}, "object" | "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "keys" | "deep" | "inject" | "isChild"> & React.RefAttributes<THREE.Group>>;

package/core/Clone.js

@@ -1,9 +1,11 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
 import * as React from 'react';
 import pick from 'lodash.pick';
+import { SkeletonUtils } from 'three-stdlib';
 
 function createSpread(child, {
-  keys = ['near', 'far', 'color', 'distance', 'decay', 'penumbra', 'angle', 'intensity', 'skeleton', 'visible', 'castShadow', 'receiveShadow', 'morphTargetDictionary', 'morphTargetInfluences', 'name', 'geometry', 'material', 'position', 'rotation', 'scale', 'up', 'userData'],
+  keys = ['near', 'far', 'color', 'distance', 'decay', 'penumbra', 'angle', 'intensity', 'skeleton', 'visible', 'castShadow', 'receiveShadow', 'morphTargetDictionary', 'morphTargetInfluences', 'name', 'geometry', 'material', 'position', 'rotation', 'scale', 'up', 'userData', 'bindMode', 'bindMatrix', 'bindMatrixInverse', 'skeleton'],
   deep,
   inject,
   castShadow,
@@ -26,7 +28,7 @@ function createSpread(child, {
     };
   }
 
-  if (child.type === 'Mesh') {
+  if (child instanceof THREE.Mesh) {
     if (castShadow) spread.castShadow = true;
     if (receiveShadow) spread.receiveShadow = true;
   }
@@ -35,6 +37,7 @@ function createSpread(child, {
 }
 
 const Clone = /*#__PURE__*/React.forwardRef(({
+  isChild = false,
   object,
   children,
   deep,
@@ -44,13 +47,26 @@ const Clone = /*#__PURE__*/React.forwardRef(({
   keys,
   ...props
 }, forwardRef) => {
+  var _object;
+
   const config = {
     keys,
     deep,
     inject,
     castShadow,
     receiveShadow
-  }; // Deal with arrayed clones
+  };
+  object = React.useMemo(() => {
+    if (isChild === false && !Array.isArray(object)) {
+      let isSkinned = false;
+      object.traverse(object => {
+        if (object.isSkinnedMesh) isSkinned = true;
+      });
+      if (isSkinned) return SkeletonUtils.clone(object);
+    }
+
+    return object;
+  }, [object, isChild]); // Deal with arrayed clones
 
   if (Array.isArray(object)) {
     return /*#__PURE__*/React.createElement("group", _extends({}, props, {
@@ -69,23 +85,17 @@ const Clone = /*#__PURE__*/React.forwardRef(({
   const Element = object.type[0].toLowerCase() + object.type.slice(1);
   return /*#__PURE__*/React.createElement(Element, _extends({}, spread, props, {
     ref: forwardRef
-  }), (object == null ? void 0 : object.children).map(child => {
-    let spread = {};
-    let Element = child.type[0].toLowerCase() + child.type.slice(1);
-
-    if (Element === 'group' || Element === 'object3D') {
-      Element = Clone;
-      spread = {
-        object: child,
-        ...config
-      };
-    } else {
-      spread = createSpread(child, config);
-    }
-
-    return /*#__PURE__*/React.createElement(Element, _extends({
-      key: child.uuid
-    }, spread));
+  }), ((_object = object) == null ? void 0 : _object.children).map(child => {
+    if (child.type === 'Bone') return /*#__PURE__*/React.createElement("primitive", _extends({
+      key: child.uuid,
+      object: child
+    }, config));
+    return /*#__PURE__*/React.createElement(Clone, _extends({
+      key: child.uuid,
+      object: child
+    }, config, {
+      isChild: true
+    }));
   }), children, injectChildren);
 });
 

package/core/ContactShadows.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import * as THREE from 'three';
-export declare const ContactShadows: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").GroupProps, "scale"> & {
-    opacity?: number | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-    blur?: number | undefined;
-    far?: number | undefined;
-    smooth?: boolean | undefined;
-    resolution?: number | undefined;
-    frames?: number | undefined;
-    scale?: number | [x: number, y: number] | undefined;
-    color?: THREE.ColorRepresentation | undefined;
-    depthWrite?: boolean | undefined;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "smooth" | "far" | "depthWrite" | "opacity" | "width" | "height" | "blur" | "resolution" | "frames"> & React.RefAttributes<unknown>>;
+export declare type ContactShadowsProps = {
+    opacity?: number;
+    width?: number;
+    height?: number;
+    blur?: number;
+    far?: number;
+    smooth?: boolean;
+    resolution?: number;
+    frames?: number;
+    scale?: number | [x: number, y: number];
+    color?: THREE.ColorRepresentation;
+    depthWrite?: boolean;
+};
+export declare const ContactShadows: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").GroupProps, "scale"> & ContactShadowsProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | keyof ContactShadowsProps> & React.RefAttributes<unknown>>;

package/core/Instances.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=i(e),u=s(t),l=s(r),f=i(a),d=i(c);const m=new u.Matrix4,y=new u.Matrix4,p=[],h=new u.Mesh;class x extends u.Group{constructor(){super(),this.color=new u.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;h.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,m),y.multiplyMatrices(n,m),h.matrixWorld=y,h.raycast(e,p);for(let e=0,r=p.length;e<r;e++){const r=p[e];r.instanceId=a,r.object=this,t.push(r)}p.length=0}}}const g=l.createContext(null),M=new u.Matrix4,b=new u.Matrix4,w=new u.Matrix4,v=new u.Vector3,E=new u.Quaternion,A=new u.Vector3,j=l.forwardRef((({context:e,children:t,...r},a)=>{l.useMemo((()=>n.extend({PositionMesh:x})),[]);const c=l.useRef(),{subscribe:i,getParent:s}=l.useContext(e||g);return l.useLayoutEffect((()=>i(c)),[]),l.createElement("positionMesh",o.default({instance:s(),instanceKey:c,ref:f.default([a,c])},r),t)})),O=l.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},i)=>{const[{context:s,instance:d}]=l.useState((()=>{const e=l.createContext(null);return{context:e,instance:l.forwardRef(((t,r)=>l.createElement(j,o.default({context:e},t,{ref:r}))))}})),m=l.useRef(null),[y,p]=l.useState([]),[[h,x]]=l.useState((()=>{const e=new Float32Array(16*r);for(let t=0;t<r;t++)w.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));l.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let O=0,P=0;n.useFrame((()=>{if(a===1/0||O<a){m.current.updateMatrix(),m.current.updateMatrixWorld(),M.copy(m.current.matrixWorld).invert(),P=Math.min(r,void 0!==t?t:r,y.length),m.current.count=P,m.current.instanceMatrix.updateRange.count=16*P,m.current.instanceColor.updateRange.count=3*P;for(let e=0;e<y.length;e++){const t=y[e].current;t.matrixWorld.decompose(v,E,A),b.compose(v,E,A).premultiply(M),b.toArray(h,16*e),m.current.instanceMatrix.needsUpdate=!0,t.color.toArray(x,3*e),m.current.instanceColor.needsUpdate=!0}O++}}));const R=l.useMemo((()=>({getParent:()=>m,subscribe:e=>(p((t=>[...t,e])),()=>p((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("instancedMesh",o.default({userData:{instances:y},matrixAutoUpdate:!1,ref:f.default([i,m]),args:[null,null,0],raycast:()=>null},c),l.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:h.length/16,array:h,itemSize:16,usage:u.DynamicDrawUsage}),l.createElement("instancedBufferAttribute",{attach:"instanceColor",count:x.length/3,array:x,itemSize:3,usage:u.DynamicDrawUsage}),"function"==typeof e?l.createElement(s.Provider,{value:R},e(d)):l.createElement(g.Provider,{value:R},e))})),P=l.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement("group",{ref:n},l.createElement(d.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(O,o.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));exports.Instance=j,exports.Instances=O,exports.Merged=P;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-merge-refs"),c=require("react-composer");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=i(e),u=s(t),l=s(r),f=i(a),d=i(c);const m=new u.Matrix4,y=new u.Matrix4,p=[],h=new u.Mesh;class x extends u.Group{constructor(){super(),this.color=new u.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;h.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,m),y.multiplyMatrices(n,m),h.matrixWorld=y,r.material instanceof u.Material?h.material.side=r.material.side:h.material.side=r.material[0].side,h.raycast(e,p);for(let e=0,r=p.length;e<r;e++){const r=p[e];r.instanceId=a,r.object=this,t.push(r)}p.length=0}}}const g=l.createContext(null),M=new u.Matrix4,b=new u.Matrix4,w=new u.Matrix4,v=new u.Vector3,E=new u.Quaternion,A=new u.Vector3,j=l.forwardRef((({context:e,children:t,...r},a)=>{l.useMemo((()=>n.extend({PositionMesh:x})),[]);const c=l.useRef(),{subscribe:i,getParent:s}=l.useContext(e||g);return l.useLayoutEffect((()=>i(c)),[]),l.createElement("positionMesh",o.default({instance:s(),instanceKey:c,ref:f.default([a,c])},r),t)})),O=l.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},i)=>{const[{context:s,instance:d}]=l.useState((()=>{const e=l.createContext(null);return{context:e,instance:l.forwardRef(((t,r)=>l.createElement(j,o.default({context:e},t,{ref:r}))))}})),m=l.useRef(null),[y,p]=l.useState([]),[[h,x]]=l.useState((()=>{const e=new Float32Array(16*r);for(let t=0;t<r;t++)w.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));l.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let O=0,P=0;n.useFrame((()=>{if(a===1/0||O<a){m.current.updateMatrix(),m.current.updateMatrixWorld(),M.copy(m.current.matrixWorld).invert(),P=Math.min(r,void 0!==t?t:r,y.length),m.current.count=P,m.current.instanceMatrix.updateRange.count=16*P,m.current.instanceColor.updateRange.count=3*P;for(let e=0;e<y.length;e++){const t=y[e].current;t.matrixWorld.decompose(v,E,A),b.compose(v,E,A).premultiply(M),b.toArray(h,16*e),m.current.instanceMatrix.needsUpdate=!0,t.color.toArray(x,3*e),m.current.instanceColor.needsUpdate=!0}O++}}));const R=l.useMemo((()=>({getParent:()=>m,subscribe:e=>(p((t=>[...t,e])),()=>p((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("instancedMesh",o.default({userData:{instances:y},matrixAutoUpdate:!1,ref:f.default([i,m]),args:[null,null,0],raycast:()=>null},c),l.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:h.length/16,array:h,itemSize:16,usage:u.DynamicDrawUsage}),l.createElement("instancedBufferAttribute",{attach:"instanceColor",count:x.length/3,array:x,itemSize:3,usage:u.DynamicDrawUsage}),"function"==typeof e?l.createElement(s.Provider,{value:R},e(d)):l.createElement(g.Provider,{value:R},e))})),P=l.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement("group",{ref:n},l.createElement(d.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(O,o.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));exports.Instance=j,exports.Instances=O,exports.Merged=P;

package/core/Instances.js

@@ -48,7 +48,9 @@ class PositionMesh extends THREE.Group {
     _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix); // the mesh represents this single instance
 
 
-    _mesh.matrixWorld = _instanceWorldMatrix;
+    _mesh.matrixWorld = _instanceWorldMatrix; // raycast side according to instance material
+
+    if (parent.material instanceof THREE.Material) _mesh.material.side = parent.material.side;else _mesh.material.side = parent.material[0].side;
 
     _mesh.raycast(raycaster, _instanceIntersects); // process the result of raycast
 

package/core/SpotLight.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),o=require("../materials/SpotLightMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(e),l=n(t);const s=new r.Vector3,c=l.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:i,depthBuffer:n,color:c="white",distance:f=5,angle:m=.15,attenuation:p=5,anglePower:d=5,...h},v)=>{const g=l.useRef(null),y=a.useThree((e=>e.size)),b=a.useThree((e=>e.camera)),w=a.useThree((e=>e.viewport.dpr)),[j]=l.useState((()=>new o.SpotLightMaterial));t=void 0===t?.1:t,i=void 0===i?7*m:i,a.useFrame((()=>{j.uniforms.spotPosition.value.copy(g.current.getWorldPosition(s)),g.current.lookAt(g.current.parent.target.getWorldPosition(s))}));const M=l.useMemo((()=>{const e=new r.CylinderGeometry(t,i,f,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-f/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[m,f,t,i]);return l.createElement("spotLight",u.default({ref:v,angle:m,color:c,distance:f},h),l.createElement("mesh",{ref:g,geometry:M,raycast:()=>null},l.createElement("primitive",{object:j,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":c,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":n,"uniforms-cameraNear-value":b.near,"uniforms-cameraFar-value":b.far,"uniforms-resolution-value":n?[y.width*w,y.height*w]:[0,0]})))}));exports.SpotLight=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),o=require("react-merge-refs"),i=require("../materials/SpotLightMaterial.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),s=l(t),p=u(o);function d({opacity:e=1,radiusTop:t,radiusBottom:n,depthBuffer:o,color:u="white",distance:l=5,angle:c=.15,attenuation:p=5,anglePower:d=5}){const m=s.useRef(null),h=a.useThree((e=>e.size)),f=a.useThree((e=>e.camera)),g=a.useThree((e=>e.viewport.dpr)),[v]=s.useState((()=>new i.SpotLightMaterial)),[w]=s.useState((()=>new r.Vector3));t=void 0===t?.1:t,n=void 0===n?7*c:n,a.useFrame((()=>{v.uniforms.spotPosition.value.copy(m.current.getWorldPosition(w)),m.current.lookAt(m.current.parent.target.getWorldPosition(w))}));const S=s.useMemo((()=>{const e=new r.CylinderGeometry(t,n,l,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-l/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[l,t,n]);return s.createElement(s.Fragment,null,s.createElement("mesh",{ref:m,geometry:S,raycast:()=>null},s.createElement("primitive",{object:v,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":u,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":o,"uniforms-cameraNear-value":f.near,"uniforms-cameraFar-value":f.far,"uniforms-resolution-value":o?[h.width*g,h.height*g]:[0,0]})))}function m(e,t,n,o,i){const[[u,l]]=s.useState((()=>[new r.Vector3,new r.Vector3]));s.useLayoutEffect((()=>{if(!(null==(t=e.current)?void 0:t.isSpotLight))throw new Error("SpotlightShadow must be a child of a SpotLight");var t;console.log(e.current),e.current.shadow.mapSize.set(n,o),e.current.shadow.needsUpdate=!0}),[e,n,o]),a.useFrame((()=>{if(!e.current)return;const r=e.current.position,a=e.current.target.position;l.copy(a).sub(r);var n=l.length();l.normalize().multiplyScalar(n*i),u.copy(r).add(l),t.current.position.copy(u),t.current.lookAt(e.current.target.position)}))}function h({distance:e=.4,alphaTest:t=.5,map:o,shader:i="#define GLSLIFY 1\nvarying vec2 vUv;uniform sampler2D uShadowMap;uniform float uTime;void main(){vec3 color=texture2D(uShadowMap,vUv).xyz;gl_FragColor=vec4(color,1.);}",width:u=512,height:l=512,scale:c=1,children:p,...d}){const h=s.useRef(null),f=d.spotlightRef,g=d.debug;m(f,h,u,l,e);const v=s.useMemo((()=>new r.WebGLRenderTarget(u,l,{format:r.RGBAFormat,encoding:r.LinearEncoding,stencilBuffer:!1})),[u,l]),w=s.useRef({uShadowMap:{value:o},uTime:{value:0}});s.useEffect((()=>{w.current.uShadowMap.value=o}),[o]);const S=s.useMemo((()=>new n.FullScreenQuad(new r.ShaderMaterial({uniforms:w.current,vertexShader:"\n          varying vec2 vUv;\n\n          void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n          }\n          ",fragmentShader:i}))),[i]);return s.useEffect((()=>()=>{S.material.dispose(),S.dispose()}),[S]),s.useEffect((()=>()=>v.dispose()),[v]),a.useFrame((({gl:e},t)=>{w.current.uTime.value+=t,e.setRenderTarget(v),S.render(e),e.setRenderTarget(null)})),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:h,scale:c,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:v.texture,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:g?1:0},p)))}function f({distance:e=.4,alphaTest:t=.5,map:a,width:n=512,height:o=512,scale:i,children:u,...l}){const c=s.useRef(null),p=l.spotlightRef,d=l.debug;return m(p,c,n,o,e),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:c,scale:i,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:a,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:d?1:0},u)))}const g=s.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n="white",distance:o=5,angle:i=.15,attenuation:u=5,anglePower:l=5,volumetric:m=!0,debug:h=!1,children:f,...g},v)=>{const w=s.useRef(null);return s.createElement("group",null,h&&w.current&&s.createElement("spotLightHelper",{args:[w.current]}),s.createElement("spotLight",c.default({ref:p.default([v,w]),angle:i,color:n,distance:o,castShadow:!0},g),m&&s.createElement(d,{debug:h,opacity:e,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n,distance:o,angle:i,attenuation:u,anglePower:l})),f&&s.cloneElement(f,{spotlightRef:w,debug:h}))}));exports.SpotLight=g,exports.SpotLightShadow=function(e){return e.shader?s.createElement(h,e):s.createElement(f,e)};

package/core/SpotLight.d.ts

@@ -1,30 +1,25 @@
 import * as React from 'react';
-import { DepthTexture, SpotLight as SpotLightImpl } from 'three';
-declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<SpotLightImpl>, import("@react-three/fiber").NodeProps<SpotLightImpl, typeof SpotLightImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: import("@react-three/fiber").Vector3 | undefined;
-    up?: import("@react-three/fiber").Vector3 | undefined;
-    scale?: import("@react-three/fiber").Vector3 | undefined;
-    rotation?: import("@react-three/fiber").Euler | undefined;
-    matrix?: import("@react-three/fiber").Matrix4 | undefined;
-    quaternion?: import("@react-three/fiber").Quaternion | undefined;
-    layers?: import("@react-three/fiber").Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
-    depthBuffer?: DepthTexture | undefined;
-    attenuation?: number | undefined;
-    anglePower?: number | undefined;
-    radiusTop?: number | undefined;
-    radiusBottom?: number | undefined;
-    opacity?: number | undefined;
-    color?: string | number | undefined;
-}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "opacity" | "target" | "distance" | "angle" | "decay" | "power" | "penumbra" | "isSpotLight" | "depthBuffer" | "attenuation" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
+import { DepthTexture, SpotLight as SpotLightImpl, Texture } from 'three';
+declare type SpotLightProps = JSX.IntrinsicElements['spotLight'] & {
+    depthBuffer?: DepthTexture;
+    attenuation?: number;
+    anglePower?: number;
+    radiusTop?: number;
+    radiusBottom?: number;
+    opacity?: number;
+    color?: string | number;
+    volumetric?: boolean;
+    debug?: boolean;
+};
+interface ShadowMeshProps {
+    distance?: number;
+    alphaTest?: number;
+    scale?: number;
+    map?: Texture;
+    shader?: string;
+    width?: number;
+    height?: number;
+}
+export declare function SpotLightShadow(props: React.PropsWithChildren<ShadowMeshProps>): JSX.Element;
+declare const SpotLight: React.ForwardRefExoticComponent<Pick<SpotLightProps, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "opacity" | "target" | "distance" | "angle" | "decay" | "power" | "penumbra" | "isSpotLight" | "depthBuffer" | "attenuation" | "debug" | "anglePower" | "volumetric" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
 export { SpotLight };