@react-three/drei 9.74.11 → 9.74.13

package/src/core/SpotLight.js

@@ -0,0 +1,231 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Vector3, CylinderGeometry, Matrix4, WebGLRenderTarget, RGBAFormat, LinearEncoding, ShaderMaterial, DoubleSide, RepeatWrapping } from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { FullScreenQuad } from 'three-stdlib';
+import mergeRefs from 'react-merge-refs';
+import { SpotLightMaterial } from '../materials/SpotLightMaterial.js';
+import SpotlightShadowShader from '../helpers/glsl/DefaultSpotlightShadowShadows.glsl.js';
+
+const isSpotLight = child => {
+  return child == null ? void 0 : child.isSpotLight;
+};
+
+function VolumetricMesh({
+  opacity = 1,
+  radiusTop,
+  radiusBottom,
+  depthBuffer,
+  color = 'white',
+  distance = 5,
+  angle = 0.15,
+  attenuation = 5,
+  anglePower = 5
+}) {
+  const mesh = React.useRef(null);
+  const size = useThree(state => state.size);
+  const camera = useThree(state => state.camera);
+  const dpr = useThree(state => state.viewport.dpr);
+  const [material] = React.useState(() => new SpotLightMaterial());
+  const [vec] = React.useState(() => new Vector3());
+  radiusTop = radiusTop === undefined ? 0.1 : radiusTop;
+  radiusBottom = radiusBottom === undefined ? angle * 7 : radiusBottom;
+  useFrame(() => {
+    material.uniforms.spotPosition.value.copy(mesh.current.getWorldPosition(vec));
+    mesh.current.lookAt(mesh.current.parent.target.getWorldPosition(vec));
+  });
+  const geom = React.useMemo(() => {
+    const geometry = new CylinderGeometry(radiusTop, radiusBottom, distance, 128, 64, true);
+    geometry.applyMatrix4(new Matrix4().makeTranslation(0, -distance / 2, 0));
+    geometry.applyMatrix4(new Matrix4().makeRotationX(-Math.PI / 2));
+    return geometry;
+  }, [distance, radiusTop, radiusBottom]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
+    ref: mesh,
+    geometry: geom,
+    raycast: () => null
+  }, /*#__PURE__*/React.createElement("primitive", {
+    object: material,
+    attach: "material",
+    "uniforms-opacity-value": opacity,
+    "uniforms-lightColor-value": color,
+    "uniforms-attenuation-value": attenuation,
+    "uniforms-anglePower-value": anglePower,
+    "uniforms-depth-value": depthBuffer,
+    "uniforms-cameraNear-value": camera.near,
+    "uniforms-cameraFar-value": camera.far,
+    "uniforms-resolution-value": depthBuffer ? [size.width * dpr, size.height * dpr] : [0, 0]
+  })));
+}
+
+function useCommon(spotlight, mesh, width, height, distance) {
+  const [[pos, dir]] = React.useState(() => [new Vector3(), new Vector3()]);
+  React.useLayoutEffect(() => {
+    if (isSpotLight(spotlight.current)) {
+      spotlight.current.shadow.mapSize.set(width, height);
+      spotlight.current.shadow.needsUpdate = true;
+    } else {
+      throw new Error('SpotlightShadow must be a child of a SpotLight');
+    }
+  }, [spotlight, width, height]);
+  useFrame(() => {
+    if (!spotlight.current) return;
+    const A = spotlight.current.position;
+    const B = spotlight.current.target.position;
+    dir.copy(B).sub(A);
+    var len = dir.length();
+    dir.normalize().multiplyScalar(len * distance);
+    pos.copy(A).add(dir);
+    mesh.current.position.copy(pos);
+    mesh.current.lookAt(spotlight.current.target.position);
+  });
+}
+
+function SpotlightShadowWithShader({
+  distance = 0.4,
+  alphaTest = 0.5,
+  map,
+  shader = SpotlightShadowShader,
+  width = 512,
+  height = 512,
+  scale = 1,
+  children,
+  ...rest
+}) {
+  const mesh = React.useRef(null);
+  const spotlight = rest.spotlightRef;
+  const debug = rest.debug;
+  useCommon(spotlight, mesh, width, height, distance);
+  const renderTarget = React.useMemo(() => new WebGLRenderTarget(width, height, {
+    format: RGBAFormat,
+    encoding: LinearEncoding,
+    stencilBuffer: false // depthTexture: null!
+
+  }), [width, height]);
+  const uniforms = React.useRef({
+    uShadowMap: {
+      value: map
+    },
+    uTime: {
+      value: 0
+    }
+  });
+  React.useEffect(() => void (uniforms.current.uShadowMap.value = map), [map]);
+  const fsQuad = React.useMemo(() => new FullScreenQuad(new ShaderMaterial({
+    uniforms: uniforms.current,
+    vertexShader:
+    /* glsl */
+    `
+          varying vec2 vUv;
+
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+          `,
+    fragmentShader: shader
+  })), [shader]);
+  React.useEffect(() => () => {
+    fsQuad.material.dispose();
+    fsQuad.dispose();
+  }, [fsQuad]);
+  React.useEffect(() => () => renderTarget.dispose(), [renderTarget]);
+  useFrame(({
+    gl
+  }, dt) => {
+    uniforms.current.uTime.value += dt;
+    gl.setRenderTarget(renderTarget);
+    fsQuad.render(gl);
+    gl.setRenderTarget(null);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
+    ref: mesh,
+    scale: scale,
+    castShadow: true
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    side: DoubleSide,
+    alphaTest: alphaTest,
+    alphaMap: renderTarget.texture,
+    "alphaMap-wrapS": RepeatWrapping,
+    "alphaMap-wrapT": RepeatWrapping,
+    opacity: debug ? 1 : 0
+  }, children)));
+}
+
+function SpotlightShadowWithoutShader({
+  distance = 0.4,
+  alphaTest = 0.5,
+  map,
+  width = 512,
+  height = 512,
+  scale,
+  children,
+  ...rest
+}) {
+  const mesh = React.useRef(null);
+  const spotlight = rest.spotlightRef;
+  const debug = rest.debug;
+  useCommon(spotlight, mesh, width, height, distance);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
+    ref: mesh,
+    scale: scale,
+    castShadow: true
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    side: DoubleSide,
+    alphaTest: alphaTest,
+    alphaMap: map,
+    "alphaMap-wrapS": RepeatWrapping,
+    "alphaMap-wrapT": RepeatWrapping,
+    opacity: debug ? 1 : 0
+  }, children)));
+}
+
+function SpotLightShadow(props) {
+  if (props.shader) return /*#__PURE__*/React.createElement(SpotlightShadowWithShader, props);
+  return /*#__PURE__*/React.createElement(SpotlightShadowWithoutShader, props);
+}
+const SpotLight = /*#__PURE__*/React.forwardRef(({
+  // Volumetric
+  opacity = 1,
+  radiusTop,
+  radiusBottom,
+  depthBuffer,
+  color = 'white',
+  distance = 5,
+  angle = 0.15,
+  attenuation = 5,
+  anglePower = 5,
+  volumetric = true,
+  debug = false,
+  children,
+  ...props
+}, ref) => {
+  const spotlight = React.useRef(null);
+  return /*#__PURE__*/React.createElement("group", null, debug && spotlight.current && /*#__PURE__*/React.createElement("spotLightHelper", {
+    args: [spotlight.current]
+  }), /*#__PURE__*/React.createElement("spotLight", _extends({
+    ref: mergeRefs([ref, spotlight]),
+    angle: angle,
+    color: color,
+    distance: distance,
+    castShadow: true
+  }, props), volumetric && /*#__PURE__*/React.createElement(VolumetricMesh, {
+    debug: debug,
+    opacity: opacity,
+    radiusTop: radiusTop,
+    radiusBottom: radiusBottom,
+    depthBuffer: depthBuffer,
+    color: color,
+    distance: distance,
+    angle: angle,
+    attenuation: attenuation,
+    anglePower: anglePower
+  })), children && /*#__PURE__*/React.cloneElement(children, {
+    spotlightRef: spotlight,
+    debug: debug
+  }));
+});
+
+export { SpotLight, SpotLightShadow };

package/src/core/SpriteAnimator.js

@@ -0,0 +1,342 @@
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+const SpriteAnimator = ({
+  startFrame,
+  endFrame,
+  fps,
+  frameName,
+  textureDataURL,
+  textureImageURL,
+  loop,
+  numberOfFrames,
+  autoPlay,
+  animationNames,
+  onStart,
+  onEnd,
+  onLoopEnd,
+  onFrame,
+  play,
+  pause,
+  flipX,
+  alphaTest,
+  children,
+  ...props
+}, fref) => {
+  useThree(state => state.viewport);
+  const spriteData = React.useRef(null);
+  const [isJsonReady, setJsonReady] = React.useState(false);
+  const matRef = React.useRef();
+  const spriteRef = React.useRef();
+  const timerOffset = React.useRef(window.performance.now());
+  const textureData = React.useRef();
+  const currentFrame = React.useRef(startFrame || 0);
+  const currentFrameName = React.useRef(frameName || '');
+  const fpsInterval = 1000 / (fps || 30);
+  const [spriteTexture, setSpriteTexture] = React.useState(new THREE.Texture());
+  const totalFrames = React.useRef(0);
+  const [aspect, setAspect] = React.useState([1, 1, 1]);
+  const flipOffset = flipX ? -1 : 1;
+
+  function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
+    const textureLoader = new THREE.TextureLoader();
+    const jsonPromise = fetch(jsonUrl).then(response => response.json());
+    const texturePromise = new Promise(resolve => {
+      textureLoader.load(textureUrl, resolve);
+    });
+    Promise.all([jsonPromise, texturePromise]).then(response => {
+      callback(response[0], response[1]);
+    });
+  }
+
+  const calculateAspectRatio = (width, height) => {
+    const aspectRatio = height / width;
+    spriteRef.current.scale.set(1, aspectRatio, 1);
+    return [1, aspectRatio, 1];
+  }; // initial loads
+
+
+  React.useEffect(() => {
+    if (textureDataURL && textureImageURL) {
+      loadJsonAndTextureAndExecuteCallback(textureDataURL, textureImageURL, parseSpriteData);
+    } else if (textureImageURL) {
+      // only load the texture, this is an image sprite only
+      const textureLoader = new THREE.TextureLoader();
+      new Promise(resolve => {
+        textureLoader.load(textureImageURL, resolve);
+      }).then(texture => {
+        parseSpriteData(null, texture);
+      });
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    modifySpritePosition();
+  }, [spriteTexture]);
+  React.useEffect(() => {
+  }, [pause]);
+  React.useEffect(() => {
+    if (currentFrameName.current !== frameName && frameName) {
+      currentFrame.current = 0;
+      currentFrameName.current = frameName;
+    }
+  }, [frameName]);
+
+  const parseSpriteData = (json, _spriteTexture) => {
+    // sprite only case
+    if (json === null) {
+      if (_spriteTexture && numberOfFrames) {
+        //get size from texture
+        const width = _spriteTexture.image.width;
+        const height = _spriteTexture.image.height;
+        const frameWidth = width / numberOfFrames;
+        const frameHeight = height;
+        textureData.current = _spriteTexture;
+        totalFrames.current = numberOfFrames;
+        spriteData.current = {
+          frames: [],
+          meta: {
+            version: '1.0',
+            size: {
+              w: width,
+              h: height
+            },
+            scale: '1'
+          }
+        };
+
+        if (parseInt(frameWidth.toString(), 10) === frameWidth) {
+          // if it fits
+          for (let i = 0; i < numberOfFrames; i++) {
+            spriteData.current.frames.push({
+              frame: {
+                x: i * frameWidth,
+                y: 0,
+                w: frameWidth,
+                h: frameHeight
+              },
+              rotated: false,
+              trimmed: false,
+              spriteSourceSize: {
+                x: 0,
+                y: 0,
+                w: frameWidth,
+                h: frameHeight
+              },
+              sourceSize: {
+                w: frameWidth,
+                h: height
+              }
+            });
+          }
+        }
+      }
+    } else if (_spriteTexture) {
+      spriteData.current = json;
+      spriteData.current.frames = Array.isArray(json.frames) ? json.frames : parseFrames();
+      totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
+      textureData.current = _spriteTexture;
+      const {
+        w,
+        h
+      } = getFirstItem(json.frames).sourceSize;
+      const aspect = calculateAspectRatio(w, h);
+      setAspect(aspect);
+
+      if (matRef.current) {
+        matRef.current.map = _spriteTexture;
+      }
+    }
+
+    _spriteTexture.premultiplyAlpha = false;
+    setSpriteTexture(_spriteTexture);
+  }; // for frame based JSON Hash sprite data
+
+
+  const parseFrames = () => {
+    const sprites = {};
+    const data = spriteData.current;
+    const delimiters = animationNames;
+
+    if (delimiters) {
+      for (let i = 0; i < delimiters.length; i++) {
+        sprites[delimiters[i]] = [];
+
+        for (let innerKey in data['frames']) {
+          const value = data['frames'][innerKey];
+          const frameData = value['frame'];
+          const x = frameData['x'];
+          const y = frameData['y'];
+          const width = frameData['w'];
+          const height = frameData['h'];
+          const sourceWidth = value['sourceSize']['w'];
+          const sourceHeight = value['sourceSize']['h'];
+
+          if (typeof innerKey === 'string' && innerKey.toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
+            sprites[delimiters[i]].push({
+              x: x,
+              y: y,
+              w: width,
+              h: height,
+              frame: frameData,
+              sourceSize: {
+                w: sourceWidth,
+                h: sourceHeight
+              }
+            });
+          }
+        }
+      }
+    }
+
+    return sprites;
+  }; // modify the sprite material after json is parsed and state updated
+
+
+  const modifySpritePosition = () => {
+    if (!spriteData.current) return;
+    const {
+      meta: {
+        size: metaInfo
+      },
+      frames
+    } = spriteData.current;
+    const {
+      w: frameW,
+      h: frameH
+    } = Array.isArray(frames) ? frames[0].sourceSize : frameName ? frames[frameName] ? frames[frameName][0].sourceSize : {
+      w: 0,
+      h: 0
+    } : {
+      w: 0,
+      h: 0
+    };
+    matRef.current.map.wrapS = matRef.current.map.wrapT = THREE.RepeatWrapping;
+    matRef.current.map.center.set(0, 0);
+    matRef.current.map.repeat.set(1 * flipOffset / (metaInfo.w / frameW), 1 / (metaInfo.h / frameH)); //const framesH = (metaInfo.w - 1) / frameW
+
+    const framesV = (metaInfo.h - 1) / frameH;
+    const frameOffsetY = 1 / framesV;
+    matRef.current.map.offset.x = 0.0; //-matRef.current.map.repeat.x
+
+    matRef.current.map.offset.y = 1 - frameOffsetY;
+    setJsonReady(true);
+    if (onStart) onStart({
+      currentFrameName: frameName,
+      currentFrame: currentFrame.current
+    });
+  }; // run the animation on each frame
+
+
+  const runAnimation = () => {
+    //if (!frameName) return
+    const now = window.performance.now();
+    const diff = now - timerOffset.current;
+    const {
+      meta: {
+        size: metaInfo
+      },
+      frames
+    } = spriteData.current;
+    const {
+      w: frameW,
+      h: frameH
+    } = getFirstItem(frames).sourceSize;
+    const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : [];
+    let finalValX = 0;
+    let finalValY = 0;
+
+    const _endFrame = endFrame || spriteFrames.length - 1;
+
+    if (currentFrame.current > _endFrame) {
+      currentFrame.current = loop ? startFrame !== null && startFrame !== void 0 ? startFrame : 0 : 0;
+
+      if (loop) {
+        onLoopEnd == null ? void 0 : onLoopEnd({
+          currentFrameName: frameName,
+          currentFrame: currentFrame.current
+        });
+      } else {
+        onEnd == null ? void 0 : onEnd({
+          currentFrameName: frameName,
+          currentFrame: currentFrame.current
+        });
+      }
+
+      if (!loop) return;
+    }
+
+    if (diff <= fpsInterval) return;
+    timerOffset.current = now - diff % fpsInterval;
+    calculateAspectRatio(frameW, frameH);
+    const framesH = (metaInfo.w - 1) / frameW;
+    const framesV = (metaInfo.h - 1) / frameH;
+    const {
+      frame: {
+        x: frameX,
+        y: frameY
+      },
+      sourceSize: {
+        w: originalSizeX,
+        h: originalSizeY
+      }
+    } = spriteFrames[currentFrame.current];
+    const frameOffsetX = 1 / framesH;
+    const frameOffsetY = 1 / framesV;
+    finalValX = flipOffset > 0 ? frameOffsetX * (frameX / originalSizeX) : frameOffsetX * (frameX / originalSizeX) - matRef.current.map.repeat.x;
+    finalValY = Math.abs(1 - frameOffsetY) - frameOffsetY * (frameY / originalSizeY);
+    matRef.current.map.offset.x = finalValX;
+    matRef.current.map.offset.y = finalValY;
+    currentFrame.current += 1;
+  }; // *** Warning! It runs on every frame! ***
+
+
+  useFrame((state, delta) => {
+    var _spriteData$current, _matRef$current;
+
+    if (!((_spriteData$current = spriteData.current) != null && _spriteData$current.frames) || !((_matRef$current = matRef.current) != null && _matRef$current.map)) {
+      return;
+    }
+
+    if (pause) {
+      return;
+    }
+
+    if (autoPlay || play) {
+      runAnimation();
+      onFrame && onFrame({
+        currentFrameName: currentFrameName.current,
+        currentFrame: currentFrame.current
+      });
+    }
+  }); // utils
+
+  const getFirstItem = param => {
+    if (Array.isArray(param)) {
+      return param[0];
+    } else if (typeof param === 'object' && param !== null) {
+      const keys = Object.keys(param);
+      return param[keys[0]][0];
+    } else {
+      return {
+        w: 0,
+        h: 0
+      };
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement("sprite", {
+    ref: spriteRef,
+    scale: aspect
+  }, /*#__PURE__*/React.createElement("spriteMaterial", {
+    toneMapped: false,
+    ref: matRef,
+    map: spriteTexture,
+    transparent: true,
+    alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
+  }))), children);
+};
+
+export { SpriteAnimator };

package/src/core/Stage.js

@@ -0,0 +1,135 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+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: {
+    main: [1, 2, 1],
+    fill: [-2, -0.5, -2]
+  },
+  portrait: {
+    main: [-1, 2, 0.5],
+    fill: [-1, 0.5, -1.5]
+  },
+  upfront: {
+    main: [0, 2, 1],
+    fill: [-1, 0.5, -1.5]
+  },
+  soft: {
+    main: [-2, 4, 4],
+    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,
+  center,
+  adjustCamera = true,
+  intensity = 0.5,
+  shadows = 'contact',
+  environment = 'city',
+  preset = 'rembrandt',
+  ...props
+}) {
+  var _bias, _normalBias, _size, _offset, _amount, _radius, _ambient, _intensity;
+
+  const config = typeof preset === 'string' ? presets[preset] : preset;
+  const [{
+    radius,
+    height
+  }, set] = React.useState({
+    radius: 0,
+    width: 0,
+    height: 0,
+    depth: 0
+  });
+  const shadowBias = (_bias = shadows == null ? void 0 : shadows.bias) !== null && _bias !== void 0 ? _bias : -0.0001;
+  const normalBias = (_normalBias = shadows == null ? void 0 : shadows.normalBias) !== null && _normalBias !== void 0 ? _normalBias : 0;
+  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 : {})
+  };
+  const environmentProps = !environment ? null : typeof environment === 'string' ? {
+    preset: environment
+  } : environment;
+  const onCentered = React.useCallback(props => {
+    const {
+      width,
+      height,
+      depth,
+      boundingSphere
+    } = props;
+    set({
+      radius: boundingSphere.radius,
+      width,
+      height,
+      depth
+    });
+    if (center != null && center.onCentered) center.onCentered(props);
+  }, []);
+  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,
+    "shadow-normalBias": normalBias,
+    "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, _extends({}, center, {
+    position: [0, shadowOffset / 2, 0],
+    onCentered: onCentered
+  }), children)), /*#__PURE__*/React.createElement("group", {
+    position: [0, -height / 2 - shadowOffset / 2, 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: (_amount = shadowSpread.amount) !== null && _amount !== void 0 ? _amount : 8,
+    radius: (_radius = shadowSpread.radius) !== null && _radius !== void 0 ? _radius : radius,
+    ambient: (_ambient = shadowSpread.ambient) !== null && _ambient !== void 0 ? _ambient : 0.5,
+    intensity: (_intensity = shadowSpread.intensity) !== null && _intensity !== void 0 ? _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, environmentProps));
+}
+
+export { Stage };