@react-three/drei 9.116.1 → 9.116.3

package/core/Environment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),r=require("@react-three/fiber"),t=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var c=a(e),s=i(n);function l(e,n,t,o,u={}){var a,i,c,s,l;u={backgroundBlurriness:null!==(a=u.blur)&&void 0!==a?a:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const d=(e=>{return(n=e).current&&n.current.isScene?e.current:e;var n})(n||t),m=d.background,b=d.environment,g={backgroundBlurriness:d.backgroundBlurriness,backgroundIntensity:d.backgroundIntensity,backgroundRotation:null!==(i=null==(c=d.backgroundRotation)||null==c.clone?void 0:c.clone())&&void 0!==i?i:[0,0,0],environmentIntensity:d.environmentIntensity,environmentRotation:null!==(s=null==(l=d.environmentRotation)||null==l.clone?void 0:l.clone())&&void 0!==s?s:[0,0,0]};return"only"!==e&&(d.environment=o),e&&(d.background=o),r.applyProps(d,u),()=>{"only"!==e&&(d.environment=b),e&&(d.background=m),r.applyProps(d,g)}}function d({scene:e,background:n=!1,map:t,...o}){const u=r.useThree((e=>e.scene));return s.useLayoutEffect((()=>{if(t)return l(n,e,u,t,o)})),null}function m({background:e=!1,scene:n,blur:t,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d,...m}){const b=u.useEnvironment(m),g=r.useThree((e=>e.scene));return s.useLayoutEffect((()=>l(e,n,g,b,{blur:t,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d}))),null}function b({children:e,near:n=1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:c=!1,blur:b,backgroundBlurriness:g,backgroundIntensity:v,backgroundRotation:p,environmentIntensity:f,environmentRotation:k,scene:y,files:E,path:h,preset:j,extensions:I}){const R=r.useThree((e=>e.gl)),x=r.useThree((e=>e.scene)),P=s.useRef(null),[q]=s.useState((()=>new t.Scene)),B=s.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(u);return e.texture.type=t.HalfFloatType,e}),[u]);s.useLayoutEffect((()=>(1===a&&P.current.update(R,q),l(c,y,x,B.texture,{blur:b,backgroundBlurriness:g,backgroundIntensity:v,backgroundRotation:p,environmentIntensity:f,environmentRotation:k}))),[e,q,B.texture,y,x,c,a,R]);let O=1;return r.useFrame((()=>{(a===1/0||O<a)&&(P.current.update(R,q),O++)})),s.createElement(s.Fragment,null,r.createPortal(s.createElement(s.Fragment,null,e,s.createElement("cubeCamera",{ref:P,args:[n,o,B]}),E||j?s.createElement(m,{background:!0,files:E,preset:j,path:h,extensions:I}):i?s.createElement(d,{background:!0,map:i,extensions:I}):null),q))}function g(e){var n,t,a,i;const l=u.useEnvironment(e),m=e.map||l;s.useMemo((()=>r.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]);const b=s.useMemo((()=>[m]),[m]),g=null==(n=e.ground)?void 0:n.height,v=null==(t=e.ground)?void 0:t.radius,p=null!==(a=null==(i=e.ground)?void 0:i.scale)&&void 0!==a?a:1e3;return s.createElement(s.Fragment,null,s.createElement(d,c.default({},e,{map:m})),s.createElement("groundProjectedEnvImpl",{args:b,scale:p,height:g,radius:v}))}exports.Environment=function(e){return e.ground?s.createElement(g,e):e.map?s.createElement(d,e):e.children?s.createElement(b,e):s.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),t=require("@react-three/fiber"),r=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var c=a(e),s=i(n);function l(e,n,r,o,u={}){var a,i,c,s,l;u={backgroundBlurriness:null!==(a=u.blur)&&void 0!==a?a:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const d=(e=>{return(n=e).current&&n.current.isScene?e.current:e;var n})(n||r),m=d.background,b=d.environment,g={backgroundBlurriness:d.backgroundBlurriness,backgroundIntensity:d.backgroundIntensity,backgroundRotation:null!==(i=null==(c=d.backgroundRotation)||null==c.clone?void 0:c.clone())&&void 0!==i?i:[0,0,0],environmentIntensity:d.environmentIntensity,environmentRotation:null!==(s=null==(l=d.environmentRotation)||null==l.clone?void 0:l.clone())&&void 0!==s?s:[0,0,0]};return"only"!==e&&(d.environment=o),e&&(d.background=o),t.applyProps(d,u),()=>{"only"!==e&&(d.environment=b),e&&(d.background=m),t.applyProps(d,g)}}function d({scene:e,background:n=!1,map:r,...o}){const u=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>{if(r)return l(n,e,u,r,o)})),null}function m({background:e=!1,scene:n,blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d,...m}){const b=u.useEnvironment(m),g=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>l(e,n,g,b,{blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d}))),null}function b({children:e,near:n=.1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:c=!1,blur:b,backgroundBlurriness:g,backgroundIntensity:v,backgroundRotation:f,environmentIntensity:p,environmentRotation:k,scene:y,files:E,path:h,preset:j,extensions:I}){const R=t.useThree((e=>e.gl)),x=t.useThree((e=>e.scene)),P=s.useRef(null),[q]=s.useState((()=>new r.Scene)),C=s.useMemo((()=>{const e=new r.WebGLCubeRenderTarget(u);return e.texture.type=r.HalfFloatType,e}),[u]);s.useLayoutEffect((()=>{if(1===a){const e=R.autoClear;R.autoClear=!0,P.current.update(R,q),R.autoClear=e}return l(c,y,x,C.texture,{blur:b,backgroundBlurriness:g,backgroundIntensity:v,backgroundRotation:f,environmentIntensity:p,environmentRotation:k})}),[e,q,C.texture,y,x,c,a,R]);let B=1;return t.useFrame((()=>{if(a===1/0||B<a){const e=R.autoClear;R.autoClear=!0,P.current.update(R,q),R.autoClear=e,B++}})),s.createElement(s.Fragment,null,t.createPortal(s.createElement(s.Fragment,null,e,s.createElement("cubeCamera",{ref:P,args:[n,o,C]}),E||j?s.createElement(m,{background:!0,files:E,preset:j,path:h,extensions:I}):i?s.createElement(d,{background:!0,map:i,extensions:I}):null),q))}function g(e){var n,r,a,i;const l=u.useEnvironment(e),m=e.map||l;s.useMemo((()=>t.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]);const b=s.useMemo((()=>[m]),[m]),g=null==(n=e.ground)?void 0:n.height,v=null==(r=e.ground)?void 0:r.radius,f=null!==(a=null==(i=e.ground)?void 0:i.scale)&&void 0!==a?a:1e3;return s.createElement(s.Fragment,null,s.createElement(d,c.default({},e,{map:m})),s.createElement("groundProjectedEnvImpl",{args:b,scale:f,height:g,radius:v}))}exports.Environment=function(e){return e.ground?s.createElement(g,e):e.map?s.createElement(d,e):e.children?s.createElement(b,e):s.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=b;

package/core/Environment.js

@@ -81,7 +81,7 @@ function EnvironmentCube({
 }
 function EnvironmentPortal({
   children,
-  near = 1,
+  near = 0.1,
   far = 1000,
   resolution = 256,
   frames = 1,
@@ -109,7 +109,12 @@ function EnvironmentPortal({
     return fbo;
   }, [resolution]);
   React.useLayoutEffect(() => {
-    if (frames === 1) camera.current.update(gl, virtualScene);
+    if (frames === 1) {
+      const autoClear = gl.autoClear;
+      gl.autoClear = true;
+      camera.current.update(gl, virtualScene);
+      gl.autoClear = autoClear;
+    }
     return setEnvProps(background, scene, defaultScene, fbo.texture, {
       blur,
       backgroundBlurriness,
@@ -122,7 +127,10 @@ function EnvironmentPortal({
   let count = 1;
   useFrame(() => {
     if (frames === Infinity || count < frames) {
+      const autoClear = gl.autoClear;
+      gl.autoClear = true;
       camera.current.update(gl, virtualScene);
+      gl.autoClear = autoClear;
       count++;
     }
   });

package/core/Lightformer.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=n(e),u=l(t),i=l(a);const o=u.forwardRef((({args:e,map:t,toneMapped:a=!1,color:n="white",form:l="rect",intensity:o=1,scale:s=1,target:f,children:m,...p},d)=>{const y=u.useRef(null);return u.useImperativeHandle(d,(()=>y.current),[]),u.useLayoutEffect((()=>{m||p.material||(r.applyProps(y.current.material,{color:n}),y.current.material.color.multiplyScalar(o))}),[n,o,m,p.material]),u.useLayoutEffect((()=>{f&&y.current.lookAt(Array.isArray(f)?new i.Vector3(...f):f)}),[f]),s=Array.isArray(s)&&2===s.length?[s[0],s[1],1]:s,u.createElement("mesh",c.default({ref:y,scale:s},p),"circle"===l?u.createElement("ringGeometry",{args:[0,1,64]}):"ring"===l?u.createElement("ringGeometry",{args:[.5,1,64]}):"rect"===l?u.createElement("planeGeometry",null):u.createElement(l,{args:e}),m||(p.material?null:u.createElement("meshBasicMaterial",{toneMapped:a,map:t,side:i.DoubleSide})))}));exports.Lightformer=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),a=require("three");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=n(e),l=o(t),i=o(a);const u=l.forwardRef((({light:e,args:t,map:a,toneMapped:n=!1,color:o="white",form:u="rect",intensity:s=1,scale:f=1,target:m=[0,0,0],children:p,...d},y)=>{const g=l.useRef(null);return l.useImperativeHandle(y,(()=>g.current),[]),l.useLayoutEffect((()=>{p||d.material||(r.applyProps(g.current.material,{color:o}),g.current.material.color.multiplyScalar(s))}),[o,s,p,d.material]),l.useLayoutEffect((()=>{d.rotation||g.current.quaternion.identity(),m&&!d.rotation&&("boolean"==typeof m?g.current.lookAt(0,0,0):g.current.lookAt(Array.isArray(m)?new i.Vector3(...m):m))}),[m,d.rotation]),f=Array.isArray(f)&&2===f.length?[f[0],f[1],1]:f,l.createElement("mesh",c.default({ref:g,scale:f},d),"circle"===u?l.createElement("ringGeometry",{args:t||[0,.5,64]}):"ring"===u?l.createElement("ringGeometry",{args:t||[.25,.5,64]}):"rect"===u||"plane"===u?l.createElement("planeGeometry",{args:t||[1,1]}):"box"===u?l.createElement("boxGeometry",{args:t||[1,1,1]}):l.createElement(u,{args:t}),p||l.createElement("meshBasicMaterial",{toneMapped:n,map:a,side:i.DoubleSide}),e&&l.createElement("pointLight",c.default({castShadow:!0},e)))}));exports.Lightformer=u;

package/core/Lightformer.d.ts

@@ -6,9 +6,10 @@ export type LightProps = JSX.IntrinsicElements['mesh'] & {
     map?: THREE.Texture;
     toneMapped?: boolean;
     color?: ReactThreeFiber.Color;
-    form?: 'circle' | 'ring' | 'rect' | any;
+    form?: 'circle' | 'ring' | 'rect' | 'plane' | 'box' | any;
     scale?: number | [number, number, number] | [number, number];
     intensity?: number;
-    target?: [number, number, number] | THREE.Vector3;
+    target?: boolean | [number, number, number] | THREE.Vector3;
+    light?: Partial<JSX.IntrinsicElements['pointLight']>;
 };
 export declare const Lightformer: ForwardRefComponent<LightProps, THREE.Mesh>;

package/core/Lightformer.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import * as THREE from 'three';
 
 const Lightformer = /* @__PURE__ */React.forwardRef(({
+  light,
   args,
   map,
   toneMapped = false,
@@ -11,7 +12,7 @@ const Lightformer = /* @__PURE__ */React.forwardRef(({
   form: Form = 'rect',
   intensity = 1,
   scale = 1,
-  target,
+  target = [0, 0, 0],
   children,
   ...props
 }, forwardRef) => {
@@ -29,8 +30,11 @@ const Lightformer = /* @__PURE__ */React.forwardRef(({
 
   // Target light
   React.useLayoutEffect(() => {
-    if (target) ref.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target);
-  }, [target]);
+    if (!props.rotation) ref.current.quaternion.identity();
+    if (target && !props.rotation) {
+      'boolean' === typeof target ? ref.current.lookAt(0, 0, 0) : ref.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target);
+    }
+  }, [target, props.rotation]);
 
   // Fix 2-dimensional scale
   scale = Array.isArray(scale) && scale.length === 2 ? [scale[0], scale[1], 1] : scale;
@@ -38,16 +42,22 @@ const Lightformer = /* @__PURE__ */React.forwardRef(({
     ref: ref,
     scale: scale
   }, props), Form === 'circle' ? /*#__PURE__*/React.createElement("ringGeometry", {
-    args: [0, 1, 64]
+    args: args ? args : [0, 0.5, 64]
   }) : Form === 'ring' ? /*#__PURE__*/React.createElement("ringGeometry", {
-    args: [0.5, 1, 64]
-  }) : Form === 'rect' ? /*#__PURE__*/React.createElement("planeGeometry", null) : /*#__PURE__*/React.createElement(Form, {
+    args: args ? args : [0.25, 0.5, 64]
+  }) : Form === 'rect' || Form === 'plane' ? /*#__PURE__*/React.createElement("planeGeometry", {
+    args: args ? args : [1, 1]
+  }) : Form === 'box' ? /*#__PURE__*/React.createElement("boxGeometry", {
+    args: args ? args : [1, 1, 1]
+  }) : /*#__PURE__*/React.createElement(Form, {
     args: args
-  }), children ? children : !props.material ? /*#__PURE__*/React.createElement("meshBasicMaterial", {
+  }), children ? children : /*#__PURE__*/React.createElement("meshBasicMaterial", {
     toneMapped: toneMapped,
     map: map,
     side: THREE.DoubleSide
-  }) : null);
+  }), light && /*#__PURE__*/React.createElement("pointLight", _extends({
+    castShadow: true
+  }, light)));
 });
 
 export { Lightformer };

package/core/SpriteAnimator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three"),u=require("./Instances.cjs.js"),a=require("./useSpriteLoader.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("react-composer"),require("../helpers/deprecated.cjs.js");var l=c(e),o=s(r),f=s(n);const i=o.createContext(null);const m=new f.PlaneGeometry(1,1),p=o.forwardRef((({startFrame:e,endFrame:r,fps:n,frameName:c,textureDataURL:s,textureImageURL:p,loop:d,numberOfFrames:h,autoPlay:y,animationNames:v,onStart:w,onEnd:E,onLoopEnd:g,onFrame:x,play:b,pause:F,flipX:S,alphaTest:j,children:R,asSprite:M,offset:A,playBackwards:O,resetOnEnd:z,maxItems:N,instanceItems:q,spriteDataset:L,canvasRenderingContext2DSettings:P,roundFramePosition:T=!1,meshProps:k={},...D},I)=>{var _;const C=o.useRef(),U=o.useRef(null),B=o.useRef(),G=o.useRef(),H=o.useRef(window.performance.now()),J=o.useRef(e||0),V=o.useRef(c||""),W=(null!=n?n:30)>0?1e3/(n||30):0,[X,K]=o.useState(new f.Texture),Q=o.useRef(0),[Y,Z]=o.useState([1,1,1]),$=S?-1:1,[ee,re]=o.useState(null==M||M),te=o.useRef(F),ne=o.useRef(A),ue=o.useRef(!1),ae=o.useRef([]),{spriteObj:ce,loadJsonAndTexture:se}=a.useSpriteLoader(null,null,v,h,void 0,P);function le(){}const oe=o.useMemo((()=>({current:ne.current,offset:ne.current,imageUrl:p,reset:le,hasEnded:!1,ref:I})),[p,L]);o.useImperativeHandle(I,(()=>C.current),[]),o.useLayoutEffect((()=>{ne.current=A}),[A]);const fe=(e,r)=>{const t=r/e;return G.current&&G.current.scale.set(1,t,1),[1,t,1]};o.useEffect((()=>{var e;L?ie(null==L||null==(e=L.spriteTexture)?void 0:e.clone(),L.spriteData):p&&s&&se(p,s)}),[L]),o.useEffect((()=>{var e;ce&&ie(null==ce||null==(e=ce.spriteTexture)?void 0:e.clone(),null==ce?void 0:ce.spriteData)}),[ce]),o.useEffect((()=>{re(null==M||M)}),[M]),o.useEffect((()=>{oe.hasEnded=!1,U.current&&!0===O?J.current=U.current.frames.length-1:J.current=0}),[O]),o.useLayoutEffect((()=>{me()}),[X,S]),o.useEffect((()=>{y&&(te.current=!1)}),[y]),o.useLayoutEffect((()=>{if(V.current!==c&&c&&(J.current=0,V.current=c,oe.hasEnded=!1,W<=0&&(J.current=r||e||0),U.current)){const{w:e,h:r}=de(U.current.frames).sourceSize,t=fe(e,r);Z(t)}}),[c,W]);const ie=(e,r=null)=>{if(null===r){if(h){const t=e.image.width,n=e.image.height;Q.current=h,O&&(J.current=h-1),U.current={frames:[],meta:{version:"1.0",size:{w:t,h:n},scale:"1"}},U.current.frames=r}}else{U.current=r,Q.current=U.current.frames.length,O&&(J.current=Q.current-1);const{w:t,h:n}=de(U.current.frames).sourceSize,u=fe(t,n);Z(u),B.current&&(B.current.map=e)}if(q)for(var t=0;t<q.length;t++){const e=Object.keys(U.current.frames),r=e[Math.floor(Math.random()*e.length)];ae.current.push({key:t,frames:U.current.frames,selectedFrame:r,offset:{x:0,y:0}})}K(e)},me=()=>{if(!U.current)return;const{meta:{size:e},frames:r}=U.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:c&&r[c]?r[c][0].sourceSize:{w:0,h:0};B.current.map.wrapS=B.current.map.wrapT=f.RepeatWrapping,B.current.map.center.set(0,0),B.current.map.repeat.set(1*$/(e.w/t),1/(e.h/n));const u=1/((e.h-1)/n);B.current.map.offset.x=0,B.current.map.offset.y=1-u,w&&w({currentFrameName:c,currentFrame:J.current})},pe=(e,r,t,n)=>{var u=void 0===A?oe.current:A;const a=J.current;let c=0,s=0;fe(e,r);const l=T?Math.round((t.w-1)/e):(t.w-1)/e,o=T?Math.round((t.h-1)/r):(t.h-1)/r;if(!n[a])return;const{frame:{x:f,y:i},sourceSize:{w:m,h:p}}=n[a],d=1/l,h=1/o;if(c=$>0?d*(f/m):d*(f/m)-B.current.map.repeat.x,s=Math.abs(1-h)-h*(i/p),B.current.map.offset.x=c,B.current.map.offset.y=s,null!=u){let e=Math.floor(u*n.length);e=Math.max(0,Math.min(e,n.length-1)),isNaN(e)&&(e=0),J.current=e}else O?J.current-=1:J.current+=1};t.useFrame(((t,n)=>{var u,a;null!=(u=U.current)&&u.frames&&null!=(a=B.current)&&a.map&&(te.current||oe.hasEnded||!y&&!b||((()=>{const{meta:{size:t},frames:n}=U.current,{w:u,h:a}=de(n).sourceSize,s=Array.isArray(n)?n:c?n[c]:[],l=r||s.length-1;var o=void 0===A?oe.current:A;if(W<=0)return J.current=r||e||0,void pe(u,a,t,s);const f=window.performance.now(),i=f-H.current;if(!(i<=W)){var m=O?J.current<0:J.current>l,p=O?J.current===l:0===J.current,h=O?J.current<0:J.current>=l;if(m){if(J.current=d&&null!=e?e:0,O&&(J.current=l),d?null==g||g({currentFrameName:c,currentFrame:J.current}):(null==E||E({currentFrameName:c,currentFrame:J.current}),oe.hasEnded=!z,z&&(te.current=!0)),!d)return}else p&&(null==w||w({currentFrameName:c,currentFrame:J.current}));void 0!==o&&h?!1===ue.current&&(null==E||E({currentFrameName:c,currentFrame:J.current}),ue.current=!0):ue.current=!1,i<=W||(H.current=f-i%W,pe(u,a,t,s))}})(),x&&x({currentFrameName:V.current,currentFrame:J.current})))}));const de=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){const r=Object.keys(e);return c?e[c][0]:e[r[0]][0]}return{w:0,h:0}};return o.createElement("group",l.default({},D,{ref:C,scale:function(e,r){let t=[];return"number"==typeof r?t=[r,r,r]:Array.isArray(r)?t=r:r instanceof f.Vector3&&(t=[r.x,r.y,r.z]),e.map(((e,r)=>e*t[r]))}(null!=Y?Y:[1,1,1],null!==(_=D.scale)&&void 0!==_?_:1)}),o.createElement(i.Provider,{value:oe},o.createElement(o.Suspense,{fallback:null},ee&&o.createElement("sprite",l.default({ref:G,scale:1,geometry:m},k),o.createElement("spriteMaterial",{premultipliedAlpha:!1,toneMapped:!1,ref:B,map:X,transparent:!0,alphaTest:null!=j?j:0})),!ee&&o.createElement(u.Instances,l.default({geometry:m,limit:null!=N?N:1},k),o.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:f.DoubleSide,ref:B,map:X,transparent:!0,alphaTest:null!=j?j:0}),(null!=q?q:[0]).map(((e,r)=>o.createElement(u.Instance,l.default({key:r,ref:1===(null==q?void 0:q.length)?G:null,position:e,scale:1},k)))))),R))}));exports.SpriteAnimator=p,exports.useSpriteAnimator=function(){return o.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three"),u=require("./Instances.cjs.js"),a=require("./Billboard.cjs.js"),c=require("./useSpriteLoader.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("react-composer"),require("../helpers/deprecated.cjs.js");var o=l(e),i=s(r),m=s(n);const f=i.createContext(null);const p=new m.PlaneGeometry(1,1),d=i.forwardRef((({startFrame:e=0,endFrame:r,fps:n=30,frameName:l="",textureDataURL:s,textureImageURL:d,loop:h=!1,numberOfFrames:v=1,autoPlay:y=!0,animationNames:w,onStart:E,onEnd:F,onLoopEnd:b,onFrame:g,play:x,pause:S=!1,flipX:j=!1,alphaTest:R=0,children:A,asSprite:M=!1,offset:N,playBackwards:O=!1,resetOnEnd:q=!1,maxItems:z=1,instanceItems:D=[[0,0,0]],spriteDataset:L,canvasRenderingContext2DSettings:P,roundFramePosition:T=!1,meshProps:I={},...k},B)=>{const C=i.useRef(new m.Group),V=i.useRef(null),_=i.useRef(null),U=i.useRef(null),G=i.useRef(window.performance.now()),H=i.useRef(e),J=i.useRef(l),W=n>0?1e3/n:0,[X,K]=i.useState(new m.Texture),Q=i.useRef(0),[Y,Z]=i.useState(new m.Vector3(1,1,1)),$=j?-1:1,ee=i.useRef(S),re=i.useRef(N),te=i.useRef(!1),{spriteObj:ne,loadJsonAndTexture:ue}=c.useSpriteLoader(null,null,w,v,void 0,P),ae=i.useRef(l),ce=i.useCallback(((e,r)=>{if(null===r)v&&(Q.current=v,O&&(H.current=v-1),V.current=r);else{var t,n;V.current=r,V.current&&Array.isArray(V.current.frames)?Q.current=V.current.frames.length:V.current&&"object"==typeof V.current&&ae.current?Q.current=V.current.frames[ae.current].length:Q.current=0,O&&(H.current=Q.current-1);const{w:u,h:a}=c.getFirstFrame(null!==(t=null==(n=V.current)?void 0:n.frames)&&void 0!==t?t:[],ae.current).sourceSize,l=oe(u,a);Z(l),_.current&&(_.current.map=e)}K(e)}),[v,O]),le=i.useCallback((()=>{if(!V.current)return;const{meta:{size:e},frames:r}=V.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:l&&r[l]?r[l][0].sourceSize:{w:0,h:0};_.current&&_.current.map&&(_.current.map.wrapS=_.current.map.wrapT=m.RepeatWrapping,_.current.map.center.set(0,0),_.current.map.repeat.set(1*$/(e.w/t),1/(e.h/n)));const u=1/((e.h-1)/n);_.current&&_.current.map&&(_.current.map.offset.x=0,_.current.map.offset.y=1-u),E&&E({currentFrameName:null!=l?l:"",currentFrame:H.current})}),[$,l,E]),se=i.useMemo((()=>({current:re.current,offset:re.current,imageUrl:d,hasEnded:!1,ref:B})),[d,B]);i.useImperativeHandle(B,(()=>C.current),[]),i.useLayoutEffect((()=>{re.current=N}),[N]);const oe=(e,r)=>{var t;const n=new m.Vector3,u=r/e;return n.set(1,u,1),null==(t=U.current)||t.scale.copy(n),n};i.useEffect((()=>{var e;L?ce(null==L||null==(e=L.spriteTexture)?void 0:e.clone(),L.spriteData):d&&s&&ue(d,s)}),[ue,L,s,d,ce]),i.useEffect((()=>{var e;ne&&ce(null==ne||null==(e=ne.spriteTexture)?void 0:e.clone(),null==ne?void 0:ne.spriteData)}),[ne,ce]),i.useEffect((()=>{var e;(se.hasEnded=!1,V.current&&!0===O)?H.current=(null!==(e=V.current.frames.length)&&void 0!==e?e:0)-1:H.current=0}),[O,se]),i.useLayoutEffect((()=>{le()}),[X,j,le]),i.useEffect((()=>{y&&(ee.current=!1)}),[y]),i.useLayoutEffect((()=>{if(J.current!==l&&l&&(H.current=0,J.current=l,se.hasEnded=!1,W<=0&&(H.current=r||e||0),V.current)){const{w:e,h:r}=c.getFirstFrame(V.current.frames,l).sourceSize,t=oe(e,r);Z(t)}}),[l,W,se,r,e]);const ie=(e,r,t,n)=>{var u=void 0===N?se.current:N;const a=H.current;let c=0,l=0;oe(e,r);const s=T?Math.round((t.w-1)/e):(t.w-1)/e,o=T?Math.round((t.h-1)/r):(t.h-1)/r;if(!n[a])return;const{frame:{x:i,y:m},sourceSize:{w:f,h:p}}=n[a],d=1/s,h=1/o;if(_.current&&_.current.map&&(c=$>0?d*(i/f):d*(i/f)-_.current.map.repeat.x,l=Math.abs(1-h)-h*(m/p),_.current.map.offset.x=c,_.current.map.offset.y=l),null!=u){let e=Math.floor(u*n.length);e=Math.max(0,Math.min(e,n.length-1)),isNaN(e)&&(e=0),H.current=e}else O?H.current-=1:H.current+=1};return t.useFrame(((t,n)=>{var u,a;null!=(u=V.current)&&u.frames&&null!=(a=_.current)&&a.map&&(ee.current||se.hasEnded||!y&&!x||((()=>{if(null===(t=V.current)||!("meta"in t)||!("frames"in t))return;var t;const{meta:{size:n},frames:u}=V.current,{w:a,h:s}=c.getFirstFrame(u,l).sourceSize,o=Array.isArray(u)?u:l?u[l]:[],i=r||o.length-1;var m=void 0===N?se.current:N;if(W<=0)return H.current=r||e||0,void ie(a,s,n,o);const f=window.performance.now(),p=f-G.current;if(!(p<=W)){var d=O?H.current<0:H.current>i,v=O?H.current===i:0===H.current,y=O?H.current<0:H.current>=i;if(d){if(H.current=h&&null!=e?e:0,O&&(H.current=i),h?null==b||b({currentFrameName:null!=l?l:"",currentFrame:H.current}):(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),se.hasEnded=!q,q&&(ee.current=!0)),!h)return}else v&&(null==E||E({currentFrameName:null!=l?l:"",currentFrame:H.current}));void 0!==m&&y?!1===te.current&&(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),te.current=!0):te.current=!1,p<=W||(G.current=f-p%W,ie(a,s,n,o))}})(),null==g||g({currentFrameName:J.current,currentFrame:H.current})))})),i.createElement("group",o.default({},k,{ref:C,scale:function(e=new m.Vector3(1,1,1),r=1){return"number"==typeof r?e.multiplyScalar(r):Array.isArray(r)?e.multiply(new m.Vector3(...r)):r instanceof m.Vector3?e.multiply(r):void 0}(Y,k.scale)}),i.createElement(f.Provider,{value:se},M&&i.createElement(a.Billboard,null,i.createElement("mesh",o.default({ref:U,scale:1,geometry:p},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}))),!M&&i.createElement(u.Instances,o.default({geometry:p,limit:null!=z?z:1},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}),(null!=D?D:[0]).map(((e,r)=>i.createElement(u.Instance,o.default({key:r,ref:1===(null==D?void 0:D.length)?U:null,position:e,scale:1},I))))),A))}));exports.SpriteAnimator=d,exports.useSpriteAnimator=function(){return i.useContext(f)};

package/core/SpriteAnimator.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
-type CommonMeshProps = {
-    frustumCulled?: boolean;
-    renderOrder?: number;
-    visible?: boolean;
-    userData?: any;
-    matrixAutoUpdate?: boolean;
+import { Vector3 } from '@react-three/fiber';
+import * as THREE from 'three';
+import { Instances, Instance } from './Instances';
+import { SpriteData } from './useSpriteLoader';
+type AnimationEventData = {
+    currentFrameName: string;
+    currentFrame: number;
 };
+type CommonProps<T, U, V> = Pick<T & U & V, keyof T & keyof U & keyof V>;
+type CommonMeshProps = CommonProps<React.ComponentProps<'mesh'>, React.ComponentProps<typeof Instance>, React.ComponentProps<typeof Instances>>;
 export type SpriteAnimatorProps = {
     startFrame?: number;
     endFrame?: number;
@@ -17,32 +20,36 @@ export type SpriteAnimatorProps = {
     numberOfFrames?: number;
     autoPlay?: boolean;
     animationNames?: Array<string>;
-    onStart?: Function;
-    onEnd?: Function;
-    onLoopEnd?: Function;
-    onFrame?: Function;
+    onStart?: (data: AnimationEventData) => void;
+    onEnd?: (data: AnimationEventData) => void;
+    onLoopEnd?: (data: AnimationEventData) => void;
+    onFrame?: (data: AnimationEventData) => void;
     play?: boolean;
     pause?: boolean;
     flipX?: boolean;
-    position?: Array<number>;
     alphaTest?: number;
     asSprite?: boolean;
     offset?: number;
     playBackwards?: boolean;
     resetOnEnd?: boolean;
+    instanceItems?: Vector3[];
     maxItems?: number;
-    instanceItems?: any[];
-    spriteDataset?: any;
+    spriteDataset?: {
+        spriteTexture: THREE.Texture;
+        spriteData: SpriteData | null;
+        aspect: Vector3;
+    } | null;
     canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings;
     roundFramePosition?: boolean;
     meshProps?: CommonMeshProps;
 } & JSX.IntrinsicElements['group'];
 type SpriteAnimatorState = {
-    current: number | undefined;
-    offset: number | undefined;
-    hasEnded: boolean | undefined;
-    ref: React.MutableRefObject<any> | undefined | null | ((instance: any) => void);
+    current?: number;
+    offset?: number;
+    imageUrl?: string;
+    hasEnded: boolean;
+    ref: React.Ref<THREE.Group>;
 };
 export declare function useSpriteAnimator(): SpriteAnimatorState | null;
-export declare const SpriteAnimator: React.FC<SpriteAnimatorProps>;
+export declare const SpriteAnimator: React.ForwardRefExoticComponent<Omit<SpriteAnimatorProps, "ref"> & React.RefAttributes<THREE.Group>>;
 export {};