@react-three/drei 9.97.4 → 9.97.6

package/core/Cloud.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"),a=require("./useTexture.cjs.js"),o=require("uuid"),u=require("../helpers/deprecated.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 s=i(e),l=c(t);const d=new r.Matrix4,f=new r.Vector3,p=new r.Quaternion,m=new r.Vector3,g=new r.Quaternion,h=new r.Vector3,y=l.createContext(null),x=l.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:i,limit:c=200,...x},v)=>{var b,M;const w=l.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float opacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = opacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:w});const E=l.useRef(null),C=l.useRef([]),A=l.useMemo((()=>new Float32Array(Array.from({length:c},(()=>1)))),[c]),O=l.useMemo((()=>new Float32Array(Array.from({length:c},(()=>[1,1,1])).flat())),[c]),j=a.useTexture(o);let R,U=0,V=0;const _=new r.Quaternion,q=new r.Vector3(0,0,1),F=new r.Vector3;n.useFrame(((e,t)=>{for(U=e.clock.getElapsedTime(),d.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(m,g,h),V=0;V<C.current.length;V++)R=C.current[V],R.ref.current.matrixWorld.decompose(f,p,h),f.add(F.copy(R.position).applyQuaternion(p).multiply(h)),p.copy(g).multiply(_.setFromAxisAngle(q,R.rotation+=t*R.rotationFactor)),h.multiplyScalar(R.volume+(1+Math.sin(U*R.density*R.speed))/2*R.growth),R.matrix.compose(f,p,h).premultiply(d),R.dist=f.distanceTo(m);for(C.current.sort(((e,t)=>t.dist-e.dist)),V=0;V<C.current.length;V++)R=C.current[V],A[V]=R.opacity*(R.dist<R.fade-1?R.dist/R.fade:1),E.current.setMatrixAt(V,R.matrix),E.current.setColorAt(V,R.color);E.current.geometry.attributes.opacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),l.useLayoutEffect((()=>{const e=Math.min(c,void 0!==i?i:c,C.current.length);E.current.count=e,u.setUpdateRange(E.current.instanceMatrix,{offset:0,count:16*e}),E.current.instanceColor&&u.setUpdateRange(E.current.instanceColor,{offset:0,count:3*e}),u.setUpdateRange(E.current.geometry.attributes.opacity,{offset:0,count:e})}));let S=[null!==(b=j.image.width)&&void 0!==b?b:1,null!==(M=j.image.height)&&void 0!==M?M:1],D=Math.max(S[0],S[1]);return S=[S[0]/D,S[1]/D],l.createElement("group",s.default({ref:v},x),l.createElement(y.Provider,{value:C},e,l.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,c]},l.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[O,3]}),l.createElement("planeGeometry",{args:[...S]},l.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-opacity",args:[A,1]})),l.createElement("cloudMaterial",{key:t.name,map:j,transparent:!0,depthWrite:!1}))))})),v=l.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:i="#ffffff",fade:c=10,volume:d=6,smallestVolume:f=.25,distribute:p=null,growth:m=4,concentrate:g="inside",seed:h=Math.random(),...x},v)=>{function b(){const e=1e4*Math.sin(h++);return e-Math.floor(e)}const M=l.useContext(y),w=l.useRef(null),[E]=l.useState((()=>o.v4())),C=l.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:E,index:t,ref:w,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,E]);return l.useLayoutEffect((()=>{C.forEach(((r,o)=>{var s;n.applyProps(r,{volume:d,color:i,speed:t,growth:m,opacity:e,fade:c,bounds:a,density:Math.max(.5,b()),rotationFactor:Math.max(.2,.5*b())*t});const l=null==p?void 0:p(r,o);(l||u>1)&&r.position.copy(r.bounds).multiply(null!==(s=null==l?void 0:l.point)&&void 0!==s?s:{x:2*b()-1,y:2*b()-1,z:2*b()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),v=Math.max(h,y,x);r.length=1,h===v&&(r.length-=h/r.bounds.x),y===v&&(r.length-=y/r.bounds.y),x===v&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==l?void 0:l.volume)?l.volume:Math.max(Math.max(0,f),"random"===g?b():"inside"===g?r.length:1-r.length))*d}))}),[g,a,c,i,e,m,d,h,u,t]),l.useLayoutEffect((()=>{const e=C;return M.current=[...M.current,...e],()=>{M.current=M.current.filter((e=>e.uuid!==E))}}),[C]),l.useImperativeHandle(v,(()=>w.current),[]),l.createElement("group",s.default({ref:w},x))})),b=l.forwardRef(((e,t)=>l.useContext(y)?l.createElement(v,s.default({ref:t},e)):l.createElement(x,null,l.createElement(v,s.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=v,exports.Clouds=x;
+"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"),a=require("./useTexture.cjs.js"),o=require("uuid"),u=require("../helpers/deprecated.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 l=i(e),s=c(t);const d=new r.Matrix4,f=new r.Vector3,m=new r.Quaternion,p=new r.Vector3,g=new r.Quaternion,h=new r.Vector3,y=s.createContext(null),x=s.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:o="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:i,limit:c=200,frustumCulled:x,...v},b)=>{var M,w;const C=s.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float opacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = opacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=s.useRef(null),A=s.useRef([]),O=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>1)))),[c]),j=s.useMemo((()=>new Float32Array(Array.from({length:c},(()=>[1,1,1])).flat())),[c]),R=a.useTexture(o);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),S=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),d.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(p,g,h),_=0;_<A.current.length;_++)U=A.current[_],U.ref.current.matrixWorld.decompose(f,m,h),f.add(S.copy(U.position).applyQuaternion(m).multiply(h)),m.copy(g).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),h.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(f,m,h).premultiply(d),U.dist=f.distanceTo(p);for(A.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<A.current.length;_++)U=A.current[_],O[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.opacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),s.useLayoutEffect((()=>{const e=Math.min(c,void 0!==i?i:c,A.current.length);E.current.count=e,u.setUpdateRange(E.current.instanceMatrix,{offset:0,count:16*e}),E.current.instanceColor&&u.setUpdateRange(E.current.instanceColor,{offset:0,count:3*e}),u.setUpdateRange(E.current.geometry.attributes.opacity,{offset:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1],I=Math.max(D[0],D[1]);return D=[D[0]/I,D[1]/I],s.createElement("group",l.default({ref:b},v),s.createElement(y.Provider,{value:A},e,s.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,c],frustumCulled:x},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),s.createElement("planeGeometry",{args:[...D]},s.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-opacity",args:[O,1]})),s.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),v=s.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:u=20,color:i="#ffffff",fade:c=10,volume:d=6,smallestVolume:f=.25,distribute:m=null,growth:p=4,concentrate:g="inside",seed:h=Math.random(),...x},v)=>{function b(){const e=1e4*Math.sin(h++);return e-Math.floor(e)}const M=s.useContext(y),w=s.useRef(null),[C]=s.useState((()=>o.v4())),E=s.useMemo((()=>[...new Array(u)].map(((e,t)=>({segments:u,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:C,index:t,ref:w,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/u)})))),[u,C]);return s.useLayoutEffect((()=>{E.forEach(((r,o)=>{var l;n.applyProps(r,{volume:d,color:i,speed:t,growth:p,opacity:e,fade:c,bounds:a,density:Math.max(.5,b()),rotationFactor:Math.max(.2,.5*b())*t});const s=null==m?void 0:m(r,o);(s||u>1)&&r.position.copy(r.bounds).multiply(null!==(l=null==s?void 0:s.point)&&void 0!==l?l:{x:2*b()-1,y:2*b()-1,z:2*b()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),v=Math.max(h,y,x);r.length=1,h===v&&(r.length-=h/r.bounds.x),y===v&&(r.length-=y/r.bounds.y),x===v&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==s?void 0:s.volume)?s.volume:Math.max(Math.max(0,f),"random"===g?b():"inside"===g?r.length:1-r.length))*d}))}),[g,a,c,i,e,p,d,h,u,t]),s.useLayoutEffect((()=>{const e=E;return M.current=[...M.current,...e],()=>{M.current=M.current.filter((e=>e.uuid!==C))}}),[E]),s.useImperativeHandle(v,(()=>w.current),[]),s.createElement("group",l.default({ref:w},x))})),b=s.forwardRef(((e,t)=>s.useContext(y)?s.createElement(v,l.default({ref:t},e)):s.createElement(x,null,s.createElement(v,l.default({ref:t},e)))));exports.Cloud=b,exports.CloudInstance=v,exports.Clouds=x;

package/core/Cloud.d.ts

@@ -51,6 +51,7 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
     fade?: number;
     opacity?: number;
     color?: ReactThreeFiber.Color;
+    frustumCulled?: boolean;
 };
 export declare const Clouds: React.ForwardRefExoticComponent<Omit<CloudsProps, "ref"> & React.RefAttributes<Group>>;
 export declare const CloudInstance: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;

package/core/Cloud.js

@@ -20,6 +20,7 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
   texture = CLOUD_URL,
   range,
   limit = 200,
+  frustumCulled,
   ...props
 }, fref) => {
   var _image$width, _image$height;
@@ -116,7 +117,8 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
   }, children, /*#__PURE__*/React.createElement("instancedMesh", {
     matrixAutoUpdate: false,
     ref: instance,
-    args: [null, null, limit]
+    args: [null, null, limit],
+    frustumCulled: frustumCulled
   }, /*#__PURE__*/React.createElement("instancedBufferAttribute", {
     usage: DynamicDrawUsage,
     attach: "instanceColor",

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-merge-refs"),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=o.forwardRef((({startFrame:e,endFrame:r,fps:n,frameName:c,textureDataURL:s,textureImageURL:m,loop:p,numberOfFrames:d,autoPlay:h,animationNames:y,onStart:E,onEnd:w,onLoopEnd:v,onFrame:b,play:g,pause:x,flipX:F,alphaTest:S,children:j,asSprite:R,offset:M,playBackwards:O,resetOnEnd:A,maxItems:z,instanceItems:N,spriteDataset:q,...L},T)=>{const k=o.useRef(),I=o.useRef(null),D=o.useRef(),P=o.useRef(),_=o.useRef(window.performance.now()),U=o.useRef(e||0),B=o.useRef(c||""),C=1e3/(n||30),[G,H]=o.useState(new f.Texture),J=o.useRef(0),[W,X]=o.useState([1,1,1]),K=F?-1:1,[Q,V]=o.useState(null==R||R),Y=o.useRef(x),Z=o.useRef(M),$=o.useRef(!1),ee=o.useRef([]),{spriteObj:re,loadJsonAndTexture:te}=a.useSpriteLoader(null,null,y,d);function ne(){}const ue=o.useMemo((()=>({current:Z.current,offset:Z.current,imageUrl:m,reset:ne,hasEnded:!1,ref:T})),[m,q]);o.useImperativeHandle(T,(()=>k.current),[]),o.useLayoutEffect((()=>{Z.current=M}),[M]);const ae=(e,r)=>{const t=r/e;return P.current&&P.current.scale.set(1,t,1),[1,t,1]};o.useEffect((()=>{var e;q?ce(null==q||null==(e=q.spriteTexture)?void 0:e.clone(),q.spriteData):te(m,s)}),[q]),o.useEffect((()=>{var e;re&&ce(null==re||null==(e=re.spriteTexture)?void 0:e.clone(),null==re?void 0:re.spriteData)}),[re]),o.useEffect((()=>{V(null==R||R)}),[R]),o.useEffect((()=>{ue.hasEnded=!1,I.current&&!0===O?U.current=I.current.frames.length-1:U.current=0}),[O]),o.useLayoutEffect((()=>{se()}),[G,F]),o.useEffect((()=>{h&&(Y.current=!1)}),[h]),o.useLayoutEffect((()=>{if(B.current!==c&&c&&(U.current=0,B.current=c,ue.hasEnded=!1,I.current)){const{w:e,h:r}=oe(I.current.frames).sourceSize,t=ae(e,r);X(t)}}),[c]);const ce=(e,r=null)=>{if(null===r){if(d){const t=e.image.width,n=e.image.height;J.current=d,O&&(U.current=d-1),I.current={frames:[],meta:{version:"1.0",size:{w:t,h:n},scale:"1"}},I.current.frames=r}}else{I.current=r,J.current=I.current.frames.length,O&&(U.current=J.current-1);const{w:t,h:n}=oe(I.current.frames).sourceSize,u=ae(t,n);X(u),D.current&&(D.current.map=e)}if(N)for(var t=0;t<N.length;t++){const e=Object.keys(I.current.frames),r=e[Math.floor(Math.random()*e.length)];ee.current.push({key:t,frames:I.current.frames,selectedFrame:r,offset:{x:0,y:0}})}H(e)},se=()=>{if(!I.current)return;const{meta:{size:e},frames:r}=I.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:c&&r[c]?r[c][0].sourceSize:{w:0,h:0};D.current.map.wrapS=D.current.map.wrapT=f.RepeatWrapping,D.current.map.center.set(0,0),D.current.map.repeat.set(1*K/(e.w/t),1/(e.h/n));const u=1/((e.h-1)/n);D.current.map.offset.x=0,D.current.map.offset.y=1-u,E&&E({currentFrameName:c,currentFrame:U.current})},le=(e,r,t,n)=>{var u=void 0===M?ue.current:M;const a=U.current;let c=0,s=0;ae(e,r);const l=(t.w-1)/e,o=(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=K>0?d*(f/m):d*(f/m)-D.current.map.repeat.x,s=Math.abs(1-h)-h*(i/p),D.current.map.offset.x=c,D.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),U.current=e}else O?U.current-=1:U.current+=1};t.useFrame(((t,n)=>{var u,a;null!=(u=I.current)&&u.frames&&null!=(a=D.current)&&a.map&&(Y.current||ue.hasEnded||!h&&!g||((()=>{const t=window.performance.now(),n=t-_.current,{meta:{size:u},frames:a}=I.current,{w:s,h:l}=oe(a).sourceSize,o=Array.isArray(a)?a:c?a[c]:[],f=r||o.length-1;var i=void 0===M?ue.current:M,m=O?U.current<0:U.current>f,d=O?U.current===f:0===U.current,h=O?U.current<0:U.current>=f;if(m){if(U.current=p&&null!=e?e:0,O&&(U.current=f),p?null==v||v({currentFrameName:c,currentFrame:U.current}):(null==w||w({currentFrameName:c,currentFrame:U.current}),ue.hasEnded=!A,A&&(Y.current=!0)),!p)return}else d&&(null==E||E({currentFrameName:c,currentFrame:U.current}));void 0!==i&&h?!1===$.current&&(null==w||w({currentFrameName:c,currentFrame:U.current}),$.current=!0):$.current=!1,n<=C||(_.current=t-n%C,le(s,l,u,o))})(),b&&b({currentFrameName:B.current,currentFrame:U.current})))}));const oe=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({},L,{ref:k}),o.createElement(i.Provider,{value:ue},o.createElement(o.Suspense,{fallback:null},Q&&o.createElement("sprite",{ref:P,scale:W},o.createElement("spriteMaterial",{premultipliedAlpha:!1,toneMapped:!1,ref:D,map:G,transparent:!0,alphaTest:null!=S?S:0})),!Q&&o.createElement(u.Instances,{limit:null!=z?z:1},o.createElement("planeGeometry",{args:[1,1]}),o.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:f.DoubleSide,ref:D,map:G,transparent:!0,alphaTest:null!=S?S:0}),(null!=N?N:[0]).map(((e,r)=>o.createElement(u.Instance,{key:r,ref:P,position:e,scale:W}))))),j))}));exports.SpriteAnimator=m,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("./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-merge-refs"),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=o.forwardRef((({startFrame:e,endFrame:r,fps:n,frameName:c,textureDataURL:s,textureImageURL:m,loop:p,numberOfFrames:d,autoPlay:h,animationNames:y,onStart:E,onEnd:v,onLoopEnd:w,onFrame:b,play:g,pause:x,flipX:F,alphaTest:S,children:j,asSprite:R,offset:A,playBackwards:M,resetOnEnd:O,maxItems:z,instanceItems:N,spriteDataset:q,...L},T)=>{var k;const I=o.useRef(),D=o.useRef(null),P=o.useRef(),_=o.useRef(),U=o.useRef(window.performance.now()),B=o.useRef(e||0),C=o.useRef(c||""),G=1e3/(n||30),[H,J]=o.useState(new f.Texture),V=o.useRef(0),[W,X]=o.useState([1,1,1]),K=F?-1:1,[Q,Y]=o.useState(null==R||R),Z=o.useRef(x),$=o.useRef(A),ee=o.useRef(!1),re=o.useRef([]),{spriteObj:te,loadJsonAndTexture:ne}=a.useSpriteLoader(null,null,y,d);function ue(){}const ae=o.useMemo((()=>({current:$.current,offset:$.current,imageUrl:m,reset:ue,hasEnded:!1,ref:T})),[m,q]);o.useImperativeHandle(T,(()=>I.current),[]),o.useLayoutEffect((()=>{$.current=A}),[A]);const ce=(e,r)=>{const t=r/e;return _.current&&_.current.scale.set(1,t,1),[1,t,1]};o.useEffect((()=>{var e;q?se(null==q||null==(e=q.spriteTexture)?void 0:e.clone(),q.spriteData):ne(m,s)}),[q]),o.useEffect((()=>{var e;te&&se(null==te||null==(e=te.spriteTexture)?void 0:e.clone(),null==te?void 0:te.spriteData)}),[te]),o.useEffect((()=>{Y(null==R||R)}),[R]),o.useEffect((()=>{ae.hasEnded=!1,D.current&&!0===M?B.current=D.current.frames.length-1:B.current=0}),[M]),o.useLayoutEffect((()=>{le()}),[H,F]),o.useEffect((()=>{h&&(Z.current=!1)}),[h]),o.useLayoutEffect((()=>{if(C.current!==c&&c&&(B.current=0,C.current=c,ae.hasEnded=!1,D.current)){const{w:e,h:r}=fe(D.current.frames).sourceSize,t=ce(e,r);X(t)}}),[c]);const se=(e,r=null)=>{if(null===r){if(d){const t=e.image.width,n=e.image.height;V.current=d,M&&(B.current=d-1),D.current={frames:[],meta:{version:"1.0",size:{w:t,h:n},scale:"1"}},D.current.frames=r}}else{D.current=r,V.current=D.current.frames.length,M&&(B.current=V.current-1);const{w:t,h:n}=fe(D.current.frames).sourceSize,u=ce(t,n);X(u),P.current&&(P.current.map=e)}if(N)for(var t=0;t<N.length;t++){const e=Object.keys(D.current.frames),r=e[Math.floor(Math.random()*e.length)];re.current.push({key:t,frames:D.current.frames,selectedFrame:r,offset:{x:0,y:0}})}J(e)},le=()=>{if(!D.current)return;const{meta:{size:e},frames:r}=D.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:c&&r[c]?r[c][0].sourceSize:{w:0,h:0};P.current.map.wrapS=P.current.map.wrapT=f.RepeatWrapping,P.current.map.center.set(0,0),P.current.map.repeat.set(1*K/(e.w/t),1/(e.h/n));const u=1/((e.h-1)/n);P.current.map.offset.x=0,P.current.map.offset.y=1-u,E&&E({currentFrameName:c,currentFrame:B.current})},oe=(e,r,t,n)=>{var u=void 0===A?ae.current:A;const a=B.current;let c=0,s=0;ce(e,r);const l=(t.w-1)/e,o=(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=K>0?d*(f/m):d*(f/m)-P.current.map.repeat.x,s=Math.abs(1-h)-h*(i/p),P.current.map.offset.x=c,P.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),B.current=e}else M?B.current-=1:B.current+=1};t.useFrame(((t,n)=>{var u,a;null!=(u=D.current)&&u.frames&&null!=(a=P.current)&&a.map&&(Z.current||ae.hasEnded||!h&&!g||((()=>{const t=window.performance.now(),n=t-U.current,{meta:{size:u},frames:a}=D.current,{w:s,h:l}=fe(a).sourceSize,o=Array.isArray(a)?a:c?a[c]:[],f=r||o.length-1;var i=void 0===A?ae.current:A,m=M?B.current<0:B.current>f,d=M?B.current===f:0===B.current,h=M?B.current<0:B.current>=f;if(m){if(B.current=p&&null!=e?e:0,M&&(B.current=f),p?null==w||w({currentFrameName:c,currentFrame:B.current}):(null==v||v({currentFrameName:c,currentFrame:B.current}),ae.hasEnded=!O,O&&(Z.current=!0)),!p)return}else d&&(null==E||E({currentFrameName:c,currentFrame:B.current}));void 0!==i&&h?!1===ee.current&&(null==v||v({currentFrameName:c,currentFrame:B.current}),ee.current=!0):ee.current=!1,n<=G||(U.current=t-n%G,oe(s,l,u,o))})(),b&&b({currentFrameName:C.current,currentFrame:B.current})))}));const fe=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({},L,{ref:I,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!=W?W:[1,1,1],null!==(k=L.scale)&&void 0!==k?k:1)}),o.createElement(i.Provider,{value:ae},o.createElement(o.Suspense,{fallback:null},Q&&o.createElement("sprite",{ref:_,scale:1},o.createElement("spriteMaterial",{premultipliedAlpha:!1,toneMapped:!1,ref:P,map:H,transparent:!0,alphaTest:null!=S?S:0})),!Q&&o.createElement(u.Instances,{limit:null!=z?z:1},o.createElement("planeGeometry",{args:[1,1]}),o.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:f.DoubleSide,ref:P,map:H,transparent:!0,alphaTest:null!=S?S:0}),(null!=N?N:[0]).map(((e,r)=>o.createElement(u.Instance,{key:r,ref:1===(null==N?void 0:N.length)?_:null,position:e,scale:1}))))),j))}));exports.SpriteAnimator=m,exports.useSpriteAnimator=function(){return o.useContext(i)};

package/core/SpriteAnimator.js

@@ -38,6 +38,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   spriteDataset,
   ...props
 }, fref) => {
+  var _props$scale;
   const ref = React.useRef();
   const spriteData = React.useRef(null);
   const matRef = React.useRef();
@@ -223,10 +224,12 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     const frameOffsetY = 1 / framesV;
     matRef.current.map.offset.x = 0.0; //-matRef.current.map.repeat.x
     matRef.current.map.offset.y = 1 - frameOffsetY;
-    if (onStart) onStart({
-      currentFrameName: frameName,
-      currentFrame: currentFrame.current
-    });
+    if (onStart) {
+      onStart({
+        currentFrameName: frameName,
+        currentFrame: currentFrame.current
+      });
+    }
   };
 
   // run the animation on each frame
@@ -385,15 +388,34 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       };
     }
   };
+  function multiplyScale(initialScale, newScale) {
+    let _newScale = [];
+
+    // If newScale is a single number, convert it to a Vector3
+    if (typeof newScale === 'number') {
+      _newScale = [newScale, newScale, newScale];
+    } else if (Array.isArray(newScale)) {
+      // If newScale is an array, convert it to a Vector3
+      _newScale = newScale;
+    } else if (newScale instanceof THREE.Vector3) {
+      _newScale = [newScale.x, newScale.y, newScale.z];
+    }
+
+    // Multiply the scale values element-wise
+    const result = initialScale.map((value, index) => value * _newScale[index]);
+    // Convert the result to an array of numbers
+    return result;
+  }
   return /*#__PURE__*/React.createElement("group", _extends({}, props, {
-    ref: ref
+    ref: ref,
+    scale: multiplyScale(aspect !== null && aspect !== void 0 ? aspect : [1, 1, 1], (_props$scale = props.scale) !== null && _props$scale !== void 0 ? _props$scale : 1.0)
   }), /*#__PURE__*/React.createElement(context.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
   }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {
     ref: spriteRef,
-    scale: aspect
+    scale: 1.0
   }, /*#__PURE__*/React.createElement("spriteMaterial", {
     premultipliedAlpha: false,
     toneMapped: false,
@@ -416,9 +438,9 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   }), (instanceItems !== null && instanceItems !== void 0 ? instanceItems : [0]).map((item, index) => {
     return /*#__PURE__*/React.createElement(Instance, {
       key: index,
-      ref: spriteRef,
+      ref: (instanceItems == null ? void 0 : instanceItems.length) === 1 ? spriteRef : null,
       position: item,
-      scale: aspect
+      scale: 1.0
     });
   }))), children));
 });

package/core/useSpriteLoader.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");function n(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)}var s=n(e),o=n(t);const u=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){return e[Object.keys(e)[0]][0]}return{w:0,h:0}},a=(e,r,t,n)=>{const o=r*(n.aspect>e/r?n.width/e:n.height/r),u=e*(n.aspect>e/r?n.width/e:n.height/r)*t,a=o*t;let c=Math.min(1,u),i=Math.min(1,a);return u>1&&(c=1,i=a/u*1),new s.Vector3(c,i,1)};function c(n,c,i,f,l){const h=r.useThree((e=>e.viewport)),d=o.useRef(null),m=o.useRef(0),[p,w]=t.useState(null),[y,g]=o.useState(new s.Texture),x=new s.TextureLoader,[b,L]=t.useState(null);function S(e){(e||n)&&new Promise((r=>{x.load(null!=e?e:n,r)})).then((e=>{O(null,e)}))}function j(e,r,t){const n=fetch(e).then((e=>e.json())),s=new Promise((e=>{x.load(r,e)}));Promise.all([n,s]).then((e=>{t(e[0],e[1])}))}o.useLayoutEffect((()=>(c&&n?j(c,n,O):n&&S(),()=>{n&&r.useLoader.clear(e.TextureLoader,n)})),[]);const O=(e,r)=>{let t=new s.Vector3(1,1,1);if(null===e){if(r&&f){const e=r.image.width,n=r.image.height,s=e/f,o=n;if(m.current=f,d.current={frames:[],meta:{version:"1.0",size:{w:e,h:n},scale:"1"}},parseInt(s.toString(),10)===s)for(let e=0;e<f;e++)d.current.frames.push({frame:{x:e*s,y:0,w:s,h:o},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:o},sourceSize:{w:s,h:n}});t=a(s,o,.1,h)}}else if(r){d.current=e,d.current.frames=Array.isArray(e.frames)?e.frames:z(),m.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:n}=u(e.frames).sourceSize;t=a(r,n,.1,h)}w(d.current),r.encoding=s.sRGBEncoding,g(r),L({spriteTexture:r,spriteData:d.current,aspect:t})},z=()=>{const e={},r=d.current,t=i;if(t){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const s in r.frames){const o=r.frames[s],u=o.frame,a=u.x,c=u.y,i=u.w,f=u.h,l=o.sourceSize.w,h=o.sourceSize.h;"string"==typeof s&&-1!==s.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:a,y:c,w:i,h:f,frame:u,sourceSize:{w:l,h:h}})}}return e}{const e=[];for(const t in r.frames)e.push(r.frames[t]);return e}};return o.useLayoutEffect((()=>{null==l||l(y,p)}),[y,p]),{spriteObj:b,loadJsonAndTexture:function(e,r){r&&e?j(r,e,O):S(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=a,exports.getFirstItem=u,exports.useSpriteLoader=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");function n(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)}var s=n(e),o=n(t);const a=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){return e[Object.keys(e)[0]][0]}return{w:0,h:0}},u=(e,r,t,n)=>{const o=r*(n.aspect>e/r?n.width/e:n.height/r),a=e*(n.aspect>e/r?n.width/e:n.height/r)*t,u=o*t;let c=Math.min(1,a),i=Math.min(1,u);return a>1&&(c=1,i=u/a*1),new s.Vector3(c,i,1)};function c(n,c,i,f,l){const h=r.useThree((e=>e.viewport)),m=o.useRef(null),d=o.useRef(0),[p,w]=t.useState(null),[y,x]=o.useState(new s.Texture),g=new s.TextureLoader,[S,L]=t.useState(null);function b(e){(e||n)&&new Promise((r=>{g.load(null!=e?e:n,r)})).then((e=>{O(null,e)}))}function j(e,r,t){const n=fetch(e).then((e=>e.json())),s=new Promise((e=>{g.load(r,e)}));Promise.all([n,s]).then((e=>{t(e[0],e[1])}))}o.useLayoutEffect((()=>(c&&n?j(c,n,O):n&&b(),()=>{n&&r.useLoader.clear(e.TextureLoader,n)})),[]);const O=(e,r)=>{let t=new s.Vector3(1,1,1);if(null===e){if(r&&f){const e=r.image.width,n=r.image.height,s=e/f,o=n;if(d.current=f,m.current={frames:[],meta:{version:"1.0",size:{w:e,h:n},scale:"1"}},parseInt(s.toString(),10)===s)for(let e=0;e<f;e++)m.current.frames.push({frame:{x:e*s,y:0,w:s,h:o},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:o},sourceSize:{w:s,h:n}});t=u(s,o,.1,h)}}else if(r){m.current=e,m.current.frames=z(),d.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:n}=a(e.frames).sourceSize;t=u(r,n,.1,h)}w(m.current),r.encoding=s.sRGBEncoding,x(r),L({spriteTexture:r,spriteData:m.current,aspect:t})},z=()=>{const e={},r=m.current,t=i;if(t&&Array.isArray(r.frames)){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const s of r.frames){const r=s.frame,o=r.x,a=r.y,u=r.w,c=r.h,i=s.sourceSize.w,f=s.sourceSize.h;"string"==typeof s.filename&&-1!==s.filename.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:o,y:a,w:u,h:c,frame:r,sourceSize:{w:i,h:f}})}}return e}if(t&&"object"==typeof r.frames){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const s in r.frames){const o=r.frames[s],a=o.frame,u=a.x,c=a.y,i=a.w,f=a.h,l=o.sourceSize.w,h=o.sourceSize.h;"string"==typeof s&&-1!==s.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:u,y:c,w:i,h:f,frame:a,sourceSize:{w:l,h:h}})}}return e}{const e=[];for(const t in r.frames)e.push(r.frames[t]);return e}};return o.useLayoutEffect((()=>{null==l||l(y,p)}),[y,p]),{spriteObj:S,loadJsonAndTexture:function(e,r){r&&e?j(r,e,O):b(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=u,exports.getFirstItem=a,exports.useSpriteLoader=c;

package/core/useSpriteLoader.js

@@ -137,7 +137,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
       }
     } else if (_spriteTexture) {
       spriteDataRef.current = json;
-      spriteDataRef.current.frames = Array.isArray(json.frames) ? json.frames : parseFrames();
+      spriteDataRef.current.frames = parseFrames();
       totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
       const {
         w,
@@ -160,7 +160,35 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
     const sprites = {};
     const data = spriteDataRef.current;
     const delimiters = animationNames;
-    if (delimiters) {
+    if (delimiters && Array.isArray(data['frames'])) {
+      for (let i = 0; i < delimiters.length; i++) {
+        // we convert each named animation group into an array
+        sprites[delimiters[i]] = [];
+        for (const value of data['frames']) {
+          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 value['filename'] === 'string' && value['filename'].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;
+    } else if (delimiters && typeof data['frames'] === 'object') {
       for (let i = 0; i < delimiters.length; i++) {
         // we convert each named animation group into an array
         sprites[delimiters[i]] = [];