@react-three/drei 9.41.0 → 9.41.2

package/README.md

@@ -2635,16 +2635,48 @@ 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: "contact" */
+  shadows?: boolean | 'contact' | 'accumulative' | StageShadows
+  /** Optionally wraps and thereby centers the models using <Bounds>, can also be a margin, default: true */
+  adjustCamera?: boolean | number
+  /** The default environment, default: "city" */
+  environment?: PresetsType | null
+  /** The lighting intensity, default: 0.5 */
+  intensity?: number
+}
+```
+
+By default it gives you contact shadows and auto-centering.
 
 ```jsx
-<Stage contactShadow shadows adjustCamera intensity={1} environment="city" preset="rembrandt" controls={controlsRef}>
+<Stage>
   <mesh />
 </Stage>
 ```
 
+For a little more realistic results enable accumulative shadows, which requires that the canvas, and models, can handle shadows.
+
+```jsx
+<Canvas shadows>
+  <Stage shadows="accumulative">
+    <mesh castShadows />
+  </Stage>
+</Canvas>
+```
+
 #### Backdrop
 
 <p>

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/Stage.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"),n=require("@react-three/fiber"),i=require("./Environment.cjs.js"),a=require("./ContactShadows.cjs.js");function o(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)}require("three-stdlib"),require("../helpers/environment-assets.cjs.js");var u=o(e),c=s(t),l=s(r);const f={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};exports.Stage=function({children:e,controls:t,shadows:r=!0,adjustCamera:o=!0,environment:s="city",intensity:d=1,preset:m="rembrandt",shadowBias:h=0,contactShadow:p={blur:2,opacity:.5,position:[0,0,0]},...b}){const g=f[m],y=n.useThree((e=>e.camera)),j=n.useThree((e=>e.controls)),w=c.useRef(null),E=c.useRef(null),[{radius:x,width:v,height:q},O]=c.useState({radius:0,width:0,height:0});return c.useLayoutEffect((()=>{w.current.position.set(0,0,0),w.current.updateWorldMatrix(!0,!0);const e=(new l.Box3).setFromObject(E.current),t=new l.Vector3,r=new l.Sphere,n=e.max.y-e.min.y,i=e.max.x-e.min.x;e.getCenter(t),e.getBoundingSphere(r),O({radius:r.radius,width:i,height:n}),w.current.position.set(-t.x,-t.y+n/2,-t.z)}),[e]),c.useLayoutEffect((()=>{if(o){const e=x/(q>v?1.5:2.5);y.position.set(0,.5*x,2.5*x),y.near=.1,y.far=Math.max(5e3,4*x),y.lookAt(0,e,0);const r=j||(null==t?void 0:t.current);r&&(r.target.set(0,e,0),r.update())}}),[j,x,q,v,o]),c.createElement("group",b,c.createElement("group",{ref:w},c.createElement("group",{ref:E},e)),p&&c.createElement(a.ContactShadows,u.default({scale:2*x,far:x/2},p)),s&&c.createElement(i.Environment,{preset:s}),c.createElement("ambientLight",{intensity:d/3}),c.createElement("spotLight",{penumbra:1,position:[g.main[0]*x,g.main[1]*x,g.main[2]*x],intensity:2*d,castShadow:r,"shadow-bias":h}),c.createElement("pointLight",{position:[g.fill[0]*x,g.fill[1]*x,g.fill[2]*x],intensity:d}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("./Environment.cjs.js"),i=require("./ContactShadows.cjs.js"),n=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.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 i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("../helpers/environment-assets.cjs.js"),require("./shaderMaterial.cjs.js");var o=u(e),c=l(t);const d={rembrandt:{main:[1,2,1],fill:[-2,-.5,-2]},portrait:{main:[-1,2,.5],fill:[-1,.5,-1.5]},upfront:{main:[0,2,1],fill:[-1,.5,-1.5]},soft:{main:[-2,4,4],fill:[-1,.5,-1.5]}};function m({radius:e,adjustCamera:t}){const r=s.useBounds();return c.useEffect((()=>{t&&r.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,adjustCamera:t=!0,intensity:u=.5,shadows:l="contact",environment:f="city",preset:h="rembrandt",...p}){var b,j,v;const g=d[h],[{radius:E,height:y},q]=c.useState({radius:0,width:0,height:0,depth:0}),w=null!==(b=null==l?void 0:l.bias)&&void 0!==b?b:-1e-4,S=null!==(j=null==l?void 0:l.size)&&void 0!==j?j:1024,C=null!==(v=null==l?void 0:l.offset)&&void 0!==v?v:0,O="contact"===l||"contact"===(null==l?void 0:l.type),z="accumulative"===l||"accumulative"===(null==l?void 0:l.type),L={..."object"==typeof l?l:{}};return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[g.main[0]*E,g.main[1]*E,g.main[2]*E],intensity:2*u,castShadow:!!l,"shadow-bias":w,"shadow-mapSize":S}),c.createElement("pointLight",{position:[g.fill[0]*E,g.fill[1]*E,g.fill[2]*E],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!t,clip:!!t,margin:Number(t),observe:!0},p),c.createElement(m,{radius:E,adjustCamera:t}),c.createElement(n.Center,{onCentered:({width:e,height:t,depth:r,boundingSphere:i,...n})=>q({radius:i.radius,width:e,height:t,depth:r})},e)),c.createElement("group",{position:[0,-y/2-C,0]},O&&c.createElement(i.ContactShadows,o.default({scale:4*E,far:E,blur:2},L)),z&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*E},L),c.createElement(a.RandomizedLight,{amount:8,radius:E,ambient:.5,intensity:1,position:[g.main[0]*E,g.main[1]*E,g.main[2]*E],size:4*E,bias:-w,mapSize:S}))),f&&c.createElement(r.Environment,{preset:f}))};

package/core/Stage.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import * as THREE from 'three';
+/// <reference types="react" />
+import { ContactShadowsProps } from './ContactShadows';
+import { AccumulativeShadowsProps } from './AccumulativeShadows';
 import { PresetsType } from '../helpers/environment-assets';
 declare const presets: {
     rembrandt: {
@@ -19,24 +20,18 @@ declare const presets: {
         fill: number[];
     };
 };
-declare type ControlsProto = {
-    update(): void;
-    target: THREE.Vector3;
+declare type StageShadows = Partial<AccumulativeShadowsProps> & Partial<ContactShadowsProps> & {
+    type: 'contact' | 'accumulative';
+    offset?: number;
+    bias?: number;
+    size?: number;
 };
-declare type Props = JSX.IntrinsicElements['group'] & {
-    shadows?: boolean;
-    adjustCamera?: boolean;
+declare type StageProps = JSX.IntrinsicElements['group'] & {
+    preset?: keyof typeof presets;
+    shadows?: boolean | 'contact' | 'accumulative' | StageShadows;
+    adjustCamera?: boolean | number;
     environment?: PresetsType | null;
     intensity?: number;
-    ambience?: number;
-    controls?: React.MutableRefObject<ControlsProto>;
-    preset?: keyof typeof presets;
-    shadowBias?: number;
-    contactShadow?: {
-        blur: number;
-        opacity?: number;
-        position?: [x: number, y: number, z: number];
-    } | false;
 };
-export declare function Stage({ children, controls, shadows, adjustCamera, environment, intensity, preset, shadowBias, contactShadow, ...props }: Props): JSX.Element;
+export declare function Stage({ children, adjustCamera, intensity, shadows, environment, preset, ...props }: StageProps): JSX.Element;
 export {};

package/core/Stage.js

@@ -1,9 +1,10 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import * as THREE from 'three';
-import { useThree } from '@react-three/fiber';
 import { Environment } from './Environment.js';
 import { ContactShadows } from './ContactShadows.js';
+import { Center } from './Center.js';
+import { AccumulativeShadows, RandomizedLight } from './AccumulativeShadows.js';
+import { Bounds, useBounds } from './Bounds.js';
 
 const presets = {
   rembrandt: {
@@ -23,89 +24,102 @@ const presets = {
     fill: [-1, 0.5, -1.5]
   }
 };
+
+function Refit({
+  radius,
+  adjustCamera
+}) {
+  const api = useBounds();
+  React.useEffect(() => {
+    if (adjustCamera) api.refresh().clip().fit();
+  }, [radius, adjustCamera]);
+  return null;
+}
+
 function Stage({
   children,
-  controls,
-  shadows = true,
   adjustCamera = true,
+  intensity = 0.5,
+  shadows = 'contact',
   environment = 'city',
-  intensity = 1,
   preset = 'rembrandt',
-  shadowBias = 0,
-  contactShadow = {
-    blur: 2,
-    opacity: 0.5,
-    position: [0, 0, 0]
-  },
   ...props
 }) {
-  const config = presets[preset];
-  const camera = useThree(state => state.camera); // @ts-expect-error new in @react-three/fiber@7.0.5
+  var _bias, _size, _offset;
 
-  const defaultControls = useThree(state => state.controls);
-  const outer = React.useRef(null);
-  const inner = React.useRef(null);
+  const config = presets[preset];
   const [{
     radius,
-    width,
     height
   }, set] = React.useState({
     radius: 0,
     width: 0,
-    height: 0
+    height: 0,
+    depth: 0
   });
-  React.useLayoutEffect(() => {
-    outer.current.position.set(0, 0, 0);
-    outer.current.updateWorldMatrix(true, true);
-    const box3 = new THREE.Box3().setFromObject(inner.current);
-    const center = new THREE.Vector3();
-    const sphere = new THREE.Sphere();
-    const height = box3.max.y - box3.min.y;
-    const width = box3.max.x - box3.min.x;
-    box3.getCenter(center);
-    box3.getBoundingSphere(sphere);
-    set({
-      radius: sphere.radius,
-      width,
-      height
-    });
-    outer.current.position.set(-center.x, -center.y + height / 2, -center.z);
-  }, [children]);
-  React.useLayoutEffect(() => {
-    if (adjustCamera) {
-      const y = radius / (height > width ? 1.5 : 2.5);
-      camera.position.set(0, radius * 0.5, radius * 2.5);
-      camera.near = 0.1;
-      camera.far = Math.max(5000, radius * 4);
-      camera.lookAt(0, y, 0);
-      const ctrl = defaultControls || (controls == null ? void 0 : controls.current);
-
-      if (ctrl) {
-        ctrl.target.set(0, y, 0);
-        ctrl.update();
-      }
-    }
-  }, [defaultControls, radius, height, width, adjustCamera]);
-  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
-    ref: outer
-  }, /*#__PURE__*/React.createElement("group", {
-    ref: inner
-  }, children)), contactShadow && /*#__PURE__*/React.createElement(ContactShadows, _extends({
-    scale: radius * 2,
-    far: radius / 2
-  }, contactShadow)), environment && /*#__PURE__*/React.createElement(Environment, {
-    preset: environment
-  }), /*#__PURE__*/React.createElement("ambientLight", {
+  const shadowBias = (_bias = shadows == null ? void 0 : shadows.bias) !== null && _bias !== void 0 ? _bias : -0.0001;
+  const shadowSize = (_size = shadows == null ? void 0 : shadows.size) !== null && _size !== void 0 ? _size : 1024;
+  const shadowOffset = (_offset = shadows == null ? void 0 : shadows.offset) !== null && _offset !== void 0 ? _offset : 0;
+  const contactShadow = shadows === 'contact' || (shadows == null ? void 0 : shadows.type) === 'contact';
+  const accumulativeShadow = shadows === 'accumulative' || (shadows == null ? void 0 : shadows.type) === 'accumulative';
+  const shadowSpread = { ...(typeof shadows === 'object' ? shadows : {})
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ambientLight", {
     intensity: intensity / 3
   }), /*#__PURE__*/React.createElement("spotLight", {
     penumbra: 1,
     position: [config.main[0] * radius, config.main[1] * radius, config.main[2] * radius],
     intensity: intensity * 2,
-    castShadow: shadows,
-    "shadow-bias": shadowBias
+    castShadow: !!shadows,
+    "shadow-bias": shadowBias,
+    "shadow-mapSize": shadowSize
   }), /*#__PURE__*/React.createElement("pointLight", {
     position: [config.fill[0] * radius, config.fill[1] * radius, config.fill[2] * radius],
     intensity: intensity
+  }), /*#__PURE__*/React.createElement(Bounds, _extends({
+    fit: !!adjustCamera,
+    clip: !!adjustCamera,
+    margin: Number(adjustCamera),
+    observe: true
+  }, props), /*#__PURE__*/React.createElement(Refit, {
+    radius: radius,
+    adjustCamera: adjustCamera
+  }), /*#__PURE__*/React.createElement(Center, {
+    onCentered: ({
+      width,
+      height,
+      depth,
+      boundingSphere,
+      ...data
+    }) => set({
+      radius: boundingSphere.radius,
+      width,
+      height,
+      depth
+    })
+  }, children)), /*#__PURE__*/React.createElement("group", {
+    position: [0, -height / 2 - shadowOffset, 0]
+  }, contactShadow && /*#__PURE__*/React.createElement(ContactShadows, _extends({
+    scale: radius * 4,
+    far: radius,
+    blur: 2
+  }, shadowSpread)), accumulativeShadow && /*#__PURE__*/React.createElement(AccumulativeShadows, _extends({
+    temporal: true,
+    frames: 100,
+    alphaTest: 0.9,
+    toneMapped: true,
+    scale: radius * 4
+  }, shadowSpread), /*#__PURE__*/React.createElement(RandomizedLight, {
+    amount: 8,
+    radius: radius,
+    ambient: 0.5,
+    intensity: 1,
+    position: [config.main[0] * radius, config.main[1] * radius, config.main[2] * radius],
+    size: radius * 4,
+    bias: -shadowBias,
+    mapSize: shadowSize
+  }))), environment && /*#__PURE__*/React.createElement(Environment, {
+    preset: environment
   }));
 }