@ohos-ports/react-three-drei 10.7.7-beta.0

package/core/SpriteAnimator.js

@@ -0,0 +1,413 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { Instances, Instance } from './Instances.js';
+import { Billboard } from './Billboard.js';
+import { useSpriteLoader, getFirstFrame } from './useSpriteLoader.js';
+
+// Frame-related types
+
+const context = /*#__PURE__*/React.createContext(null);
+function useSpriteAnimator() {
+  return React.useContext(context);
+}
+
+// Type guard for SpriteData
+function isSpriteData(data) {
+  return data !== null && 'meta' in data && 'frames' in data;
+}
+const geometry = /* @__PURE__ */new THREE.PlaneGeometry(1, 1);
+const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
+  startFrame = 0,
+  endFrame,
+  fps = 30,
+  frameName = '',
+  textureDataURL,
+  textureImageURL,
+  loop = false,
+  numberOfFrames = 1,
+  autoPlay = true,
+  animationNames,
+  onStart,
+  onEnd,
+  onLoopEnd,
+  onFrame,
+  play,
+  pause = false,
+  flipX = false,
+  alphaTest = 0.0,
+  children,
+  asSprite = false,
+  offset,
+  playBackwards = false,
+  resetOnEnd = false,
+  maxItems = 1,
+  instanceItems = [[0, 0, 0]],
+  spriteDataset,
+  canvasRenderingContext2DSettings,
+  roundFramePosition = false,
+  meshProps = {},
+  ...props
+}, fref) => {
+  const ref = React.useRef(new THREE.Group());
+  const spriteData = React.useRef(null);
+  const matRef = React.useRef(null);
+  const spriteRef = React.useRef(null);
+  const timerOffset = React.useRef(window.performance.now());
+  const currentFrame = React.useRef(startFrame);
+  const currentFrameName = React.useRef(frameName);
+  const fpsInterval = fps > 0 ? 1000 / fps : 0;
+  const [spriteTexture, setSpriteTexture] = React.useState(new THREE.Texture());
+  const totalFrames = React.useRef(0);
+  const [aspect, setAspect] = React.useState(new THREE.Vector3(1, 1, 1));
+  const flipOffset = flipX ? -1 : 1;
+  const pauseRef = React.useRef(pause);
+  const pos = React.useRef(offset);
+  const softEnd = React.useRef(false);
+  const {
+    spriteObj,
+    loadJsonAndTexture
+  } = useSpriteLoader(null, null, animationNames, numberOfFrames, undefined, canvasRenderingContext2DSettings);
+  const frameNameRef = React.useRef(frameName);
+
+  // lite version for pre-loaded assets
+  const parseSpriteDataLite = React.useCallback((textureData, data) => {
+    if (data === null) {
+      if (numberOfFrames) {
+        //get size from texture
+
+        totalFrames.current = numberOfFrames;
+        if (playBackwards) {
+          currentFrame.current = numberOfFrames - 1;
+        }
+        spriteData.current = data;
+      }
+    } else {
+      var _spriteData$current$f, _spriteData$current;
+      spriteData.current = data;
+      if (spriteData.current && Array.isArray(spriteData.current.frames)) {
+        totalFrames.current = spriteData.current.frames.length;
+      } else if (spriteData.current && typeof spriteData.current === 'object' && frameNameRef.current) {
+        totalFrames.current = spriteData.current.frames[frameNameRef.current].length;
+      } else {
+        totalFrames.current = 0;
+      }
+      if (playBackwards) {
+        currentFrame.current = totalFrames.current - 1;
+      }
+      const {
+        w,
+        h
+      } = getFirstFrame((_spriteData$current$f = (_spriteData$current = spriteData.current) == null ? void 0 : _spriteData$current.frames) !== null && _spriteData$current$f !== void 0 ? _spriteData$current$f : [], frameNameRef.current).sourceSize;
+      const aspect = calculateAspectRatio(w, h);
+      setAspect(aspect);
+      if (matRef.current) {
+        matRef.current.map = textureData;
+      }
+    }
+    setSpriteTexture(textureData);
+  }, [numberOfFrames, playBackwards]);
+
+  // modify the sprite material after json is parsed and state updated
+  const modifySpritePosition = React.useCallback(() => {
+    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
+    };
+    if (matRef.current && matRef.current.map) {
+      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;
+    if (matRef.current && matRef.current.map) {
+      matRef.current.map.offset.x = 0.0; //-matRef.current.map.repeat.x
+      matRef.current.map.offset.y = 1 - frameOffsetY;
+    }
+    if (onStart) {
+      onStart({
+        currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
+        currentFrame: currentFrame.current
+      });
+    }
+  }, [flipOffset, frameName, onStart]);
+  const state = React.useMemo(() => ({
+    current: pos.current,
+    offset: pos.current,
+    imageUrl: textureImageURL,
+    hasEnded: false,
+    ref: fref
+  }), [textureImageURL, fref]);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useLayoutEffect(() => {
+    pos.current = offset;
+  }, [offset]);
+  const calculateAspectRatio = (width, height) => {
+    var _spriteRef$current;
+    const ret = new THREE.Vector3();
+    const aspectRatio = height / width;
+    ret.set(1, aspectRatio, 1);
+    (_spriteRef$current = spriteRef.current) == null || _spriteRef$current.scale.copy(ret);
+    return ret;
+  };
+
+  // initial loads
+  React.useEffect(() => {
+    if (spriteDataset) {
+      var _spriteDataset$sprite;
+      parseSpriteDataLite(spriteDataset == null || (_spriteDataset$sprite = spriteDataset.spriteTexture) == null ? void 0 : _spriteDataset$sprite.clone(), spriteDataset.spriteData);
+    } else {
+      if (textureImageURL && textureDataURL) {
+        loadJsonAndTexture(textureImageURL, textureDataURL);
+      }
+    }
+  }, [loadJsonAndTexture, spriteDataset, textureDataURL, textureImageURL, parseSpriteDataLite]);
+  React.useEffect(() => {
+    if (spriteObj) {
+      var _spriteObj$spriteText;
+      parseSpriteDataLite(spriteObj == null || (_spriteObj$spriteText = spriteObj.spriteTexture) == null ? void 0 : _spriteObj$spriteText.clone(), spriteObj == null ? void 0 : spriteObj.spriteData);
+    }
+  }, [spriteObj, parseSpriteDataLite]);
+
+  // support backwards play
+  React.useEffect(() => {
+    state.hasEnded = false;
+    if (spriteData.current && playBackwards === true) {
+      var _ref;
+      currentFrame.current = ((_ref = spriteData.current.frames.length) !== null && _ref !== void 0 ? _ref : 0) - 1;
+    } else {
+      currentFrame.current = 0;
+    }
+  }, [playBackwards, state]);
+  React.useLayoutEffect(() => {
+    modifySpritePosition();
+  }, [spriteTexture, flipX, modifySpritePosition]);
+  React.useEffect(() => {
+    if (autoPlay) {
+      pauseRef.current = false;
+    }
+  }, [autoPlay]);
+  React.useLayoutEffect(() => {
+    if (currentFrameName.current !== frameName && frameName) {
+      currentFrame.current = 0;
+      currentFrameName.current = frameName;
+      state.hasEnded = false;
+      if (fpsInterval <= 0) {
+        currentFrame.current = endFrame || startFrame || 0;
+      }
+      // modifySpritePosition()
+      if (spriteData.current) {
+        const {
+          w,
+          h
+        } = getFirstFrame(spriteData.current.frames, frameName).sourceSize;
+        const _aspect = calculateAspectRatio(w, h);
+        setAspect(_aspect);
+      }
+    }
+  }, [frameName, fpsInterval, state, endFrame, startFrame]);
+
+  // run the animation on each frame
+  const runAnimation = () => {
+    if (!isSpriteData(spriteData.current)) return;
+    const {
+      meta: {
+        size: metaInfo
+      },
+      frames
+    } = spriteData.current;
+    const {
+      w: frameW,
+      h: frameH
+    } = getFirstFrame(frames, frameName).sourceSize;
+    const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : [];
+    const _endFrame = endFrame || spriteFrames.length - 1;
+    var _offset = offset === undefined ? state.current : offset;
+    if (fpsInterval <= 0) {
+      currentFrame.current = endFrame || startFrame || 0;
+      calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames);
+      return;
+    }
+    const now = window.performance.now();
+    const diff = now - timerOffset.current;
+    if (diff <= fpsInterval) return;
+
+    // conditionals to support backwards play
+    var endCondition = playBackwards ? currentFrame.current < 0 : currentFrame.current > _endFrame;
+    var onStartCondition = playBackwards ? currentFrame.current === _endFrame : currentFrame.current === 0;
+    var manualProgressEndCondition = playBackwards ? currentFrame.current < 0 : currentFrame.current >= _endFrame;
+    if (endCondition) {
+      currentFrame.current = loop ? startFrame !== null && startFrame !== void 0 ? startFrame : 0 : 0;
+      if (playBackwards) {
+        currentFrame.current = _endFrame;
+      }
+      if (loop) {
+        onLoopEnd == null || onLoopEnd({
+          currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
+          currentFrame: currentFrame.current
+        });
+      } else {
+        onEnd == null || onEnd({
+          currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
+          currentFrame: currentFrame.current
+        });
+        state.hasEnded = !resetOnEnd;
+        if (resetOnEnd) {
+          pauseRef.current = true;
+          //calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames)
+        }
+      }
+      if (!loop) return;
+    } else if (onStartCondition) {
+      onStart == null || onStart({
+        currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
+        currentFrame: currentFrame.current
+      });
+    }
+
+    // for manual update
+    if (_offset !== undefined && manualProgressEndCondition) {
+      if (softEnd.current === false) {
+        onEnd == null || onEnd({
+          currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
+          currentFrame: currentFrame.current
+        });
+        softEnd.current = true;
+      }
+    } else {
+      // same for start?
+      softEnd.current = false;
+    }
+
+    // clock to limit fps
+    if (diff <= fpsInterval) return;
+    timerOffset.current = now - diff % fpsInterval;
+    calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames);
+  };
+  const calculateFinalPosition = (frameW, frameH, metaInfo, spriteFrames) => {
+    // get the manual update offset to find the next frame
+    var _offset = offset === undefined ? state.current : offset;
+    const targetFrame = currentFrame.current;
+    let finalValX = 0;
+    let finalValY = 0;
+    calculateAspectRatio(frameW, frameH);
+    const framesH = roundFramePosition ? Math.round((metaInfo.w - 1) / frameW) : (metaInfo.w - 1) / frameW;
+    const framesV = roundFramePosition ? Math.round((metaInfo.h - 1) / frameH) : (metaInfo.h - 1) / frameH;
+    if (!spriteFrames[targetFrame]) {
+      return;
+    }
+    const {
+      frame: {
+        x: frameX,
+        y: frameY
+      },
+      sourceSize: {
+        w: originalSizeX,
+        h: originalSizeY
+      }
+    } = spriteFrames[targetFrame];
+    const frameOffsetX = 1 / framesH;
+    const frameOffsetY = 1 / framesV;
+    if (matRef.current && matRef.current.map) {
+      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;
+    }
+
+    // if manual update is active
+    if (_offset !== undefined && _offset !== null) {
+      // Calculate the frame index, based on offset given from the provider
+      let frameIndex = Math.floor(_offset * spriteFrames.length);
+
+      // Ensure the frame index is within the valid range
+      frameIndex = Math.max(0, Math.min(frameIndex, spriteFrames.length - 1));
+      if (isNaN(frameIndex)) {
+        frameIndex = 0; //fallback
+      }
+      currentFrame.current = frameIndex;
+    } else {
+      // auto update
+      if (playBackwards) {
+        currentFrame.current -= 1;
+      } else {
+        currentFrame.current += 1;
+      }
+    }
+  };
+
+  // *** Warning! It runs on every frame! ***
+  useFrame((_state, _delta) => {
+    var _spriteData$current2, _matRef$current;
+    if (!((_spriteData$current2 = spriteData.current) != null && _spriteData$current2.frames) || !((_matRef$current = matRef.current) != null && _matRef$current.map)) {
+      return;
+    }
+    if (pauseRef.current) {
+      return;
+    }
+    if (!state.hasEnded && (autoPlay || play)) {
+      runAnimation();
+      onFrame == null || onFrame({
+        currentFrameName: currentFrameName.current,
+        currentFrame: currentFrame.current
+      });
+    }
+  });
+  function multiplyScale(initialScale = new THREE.Vector3(1, 1, 1), newScale = 1) {
+    if (typeof newScale === 'number') return initialScale.multiplyScalar(newScale);
+    if (Array.isArray(newScale)) return initialScale.multiply(new THREE.Vector3(...newScale));
+    if (newScale instanceof THREE.Vector3) return initialScale.multiply(newScale);
+  }
+  return /*#__PURE__*/React.createElement("group", _extends({}, props, {
+    ref: ref,
+    scale: multiplyScale(aspect, props.scale)
+  }), /*#__PURE__*/React.createElement(context.Provider, {
+    value: state
+  }, asSprite && /*#__PURE__*/React.createElement(Billboard, null, /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: spriteRef,
+    scale: 1.0,
+    geometry: geometry
+  }, meshProps), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    premultipliedAlpha: false,
+    toneMapped: false,
+    side: THREE.DoubleSide,
+    ref: matRef,
+    map: spriteTexture,
+    transparent: true,
+    alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
+  }))), !asSprite && /*#__PURE__*/React.createElement(Instances, _extends({
+    geometry: geometry,
+    limit: maxItems !== null && maxItems !== void 0 ? maxItems : 1
+  }, meshProps), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    premultipliedAlpha: false,
+    toneMapped: false,
+    side: THREE.DoubleSide,
+    ref: matRef,
+    map: spriteTexture,
+    transparent: true,
+    alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
+  }), (instanceItems !== null && instanceItems !== void 0 ? instanceItems : [0]).map((item, index) => /*#__PURE__*/React.createElement(Instance, _extends({
+    key: index,
+    ref: (instanceItems == null ? void 0 : instanceItems.length) === 1 ? spriteRef : null,
+    position: item,
+    scale: 1.0
+  }, meshProps)))), children));
+});
+
+export { SpriteAnimator, useSpriteAnimator };

package/core/Stage.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),i=require("./Environment.cjs.js"),n=require("./ContactShadows.cjs.js"),r=require("./Center.cjs.js"),a=require("./AccumulativeShadows.cjs.js"),s=require("./Bounds.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three"),require("three-stdlib"),require("./useEnvironment.cjs.js"),require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("./shaderMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=l(e),c=u(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 i=s.useBounds();return c.useEffect((()=>{t&&i.refresh().clip().fit()}),[e,t]),null}exports.Stage=function({children:e,center:t,adjustCamera:l=!0,intensity:u=.5,shadows:f="contact",environment:p="city",preset:h="rembrandt",...j}){var v,b,g,y,E,q,w,C;const S="string"==typeof h?d[h]:h,[{radius:O,height:z},B]=c.useState({radius:0,width:0,height:0,depth:0}),M=null!==(v=null==f?void 0:f.bias)&&void 0!==v?v:-1e-4,L=null!==(b=null==f?void 0:f.normalBias)&&void 0!==b?b:0,_=null!==(g=null==f?void 0:f.size)&&void 0!==g?g:1024,x=null!==(y=null==f?void 0:f.offset)&&void 0!==y?y:0,P="contact"===f||"contact"===(null==f?void 0:f.type),k="accumulative"===f||"accumulative"===(null==f?void 0:f.type),A={..."object"==typeof f?f:{}},D=p?"string"==typeof p?{preset:p}:p:null,F=c.useCallback((e=>{const{width:i,height:n,depth:r,boundingSphere:a}=e;B({radius:a.radius,width:i,height:n,depth:r}),null!=t&&t.onCentered&&t.onCentered(e)}),[]);return c.createElement(c.Fragment,null,c.createElement("ambientLight",{intensity:u/3}),c.createElement("spotLight",{penumbra:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],intensity:2*u,castShadow:!!f,"shadow-bias":M,"shadow-normalBias":L,"shadow-mapSize":_}),c.createElement("pointLight",{position:[S.fill[0]*O,S.fill[1]*O,S.fill[2]*O],intensity:u}),c.createElement(s.Bounds,o.default({fit:!!l,clip:!!l,margin:Number(l),observe:!0},j),c.createElement(m,{radius:O,adjustCamera:l}),c.createElement(r.Center,o.default({},t,{position:[0,x/2,0],onCentered:F}),e)),c.createElement("group",{position:[0,-z/2-x/2,0]},P&&c.createElement(n.ContactShadows,o.default({scale:4*O,far:O,blur:2},A)),k&&c.createElement(a.AccumulativeShadows,o.default({temporal:!0,frames:100,alphaTest:.9,toneMapped:!0,scale:4*O},A),c.createElement(a.RandomizedLight,{amount:null!==(E=A.amount)&&void 0!==E?E:8,radius:null!==(q=A.radius)&&void 0!==q?q:O,ambient:null!==(w=A.ambient)&&void 0!==w?w:.5,intensity:null!==(C=A.intensity)&&void 0!==C?C:1,position:[S.main[0]*O,S.main[1]*O,S.main[2]*O],size:4*O,bias:-M,mapSize:_}))),p&&c.createElement(i.Environment,D))};

package/core/Stage.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { EnvironmentProps } from './Environment';
+import { ContactShadowsProps } from './ContactShadows';
+import { CenterProps } from './Center';
+import { AccumulativeShadowsProps, RandomizedLightProps } from './AccumulativeShadows';
+import { PresetsType } from '../helpers/environment-assets';
+import { ThreeElements } from '@react-three/fiber';
+type StageShadows = Partial<AccumulativeShadowsProps> & Partial<RandomizedLightProps> & Partial<ContactShadowsProps> & {
+    type: 'contact' | 'accumulative';
+    offset?: number;
+    bias?: number;
+    normalBias?: number;
+    size?: number;
+};
+export type StageProps = Omit<ThreeElements['group'], 'ref'> & {
+    preset?: 'rembrandt' | 'portrait' | 'upfront' | 'soft' | {
+        main: [x: number, y: number, z: number];
+        fill: [x: number, y: number, z: number];
+    };
+    shadows?: boolean | 'contact' | 'accumulative' | StageShadows;
+    adjustCamera?: boolean | number;
+    environment?: PresetsType | Partial<EnvironmentProps> | null;
+    intensity?: number;
+    center?: Partial<CenterProps>;
+};
+export declare function Stage({ children, center, adjustCamera, intensity, shadows, environment, preset, ...props }: StageProps): React.JSX.Element;
+export {};

package/core/Stage.js

@@ -0,0 +1,133 @@
+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 };

package/core/Stars.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three"),n=require("../helpers/constants.cjs.js");function a(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=a(e);class i extends r.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},fade:{value:1}},vertexShader:"\n      uniform float time;\n      attribute float size;\n      varying vec3 vColor;\n      void main() {\n        vColor = color;\n        vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);\n        gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));\n        gl_Position = projectionMatrix * mvPosition;\n      }",fragmentShader:`\n      uniform sampler2D pointTexture;\n      uniform float fade;\n      varying vec3 vColor;\n      void main() {\n        float opacity = 1.0;\n        if (fade == 1.0) {\n          float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n          opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));\n        }\n        gl_FragColor = vec4(vColor, opacity);\n\n        #include <tonemapping_fragment>\n\t      #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n      }`})}}const c=e=>(new r.Vector3).setFromSpherical(new r.Spherical(e,Math.acos(1-2*Math.random()),2*Math.random()*Math.PI)),s=o.forwardRef((({radius:e=100,depth:n=50,count:a=5e3,saturation:s=0,factor:l=4,fade:u=!1,speed:f=1},m)=>{const d=o.useRef(null),[p,v,h]=o.useMemo((()=>{const t=[],o=[],i=Array.from({length:a},(()=>(.5+.5*Math.random())*l)),u=new r.Color;let f=e+n;const m=n/a;for(let e=0;e<a;e++)f-=m*Math.random(),t.push(...c(f).toArray()),u.setHSL(e/a,s,.9),o.push(u.r,u.g,u.b);return[new Float32Array(t),new Float32Array(o),new Float32Array(i)]}),[a,n,l,e,s]);t.useFrame((e=>d.current&&(d.current.uniforms.time.value=e.clock.elapsedTime*f)));const[g]=o.useState((()=>new i));return o.createElement("points",{ref:m},o.createElement("bufferGeometry",null,o.createElement("bufferAttribute",{attach:"attributes-position",args:[p,3]}),o.createElement("bufferAttribute",{attach:"attributes-color",args:[v,3]}),o.createElement("bufferAttribute",{attach:"attributes-size",args:[h,1]})),o.createElement("primitive",{ref:d,object:g,attach:"material",blending:r.AdditiveBlending,"uniforms-fade-value":u,depthWrite:!1,transparent:!0,vertexColors:!0}))}));exports.Stars=s;

package/core/Stars.d.ts

@@ -0,0 +1,22 @@
+import { ThreeElement } from '@react-three/fiber';
+import { Points, ShaderMaterial } from 'three';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type StarsProps = {
+    radius?: number;
+    depth?: number;
+    count?: number;
+    factor?: number;
+    saturation?: number;
+    fade?: boolean;
+    speed?: number;
+};
+declare class StarfieldMaterial extends ShaderMaterial {
+    constructor();
+}
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        starfieldMaterial: ThreeElement<typeof StarfieldMaterial>;
+    }
+}
+export declare const Stars: ForwardRefComponent<StarsProps, Points>;
+export {};