@react-three/drei 9.97.0 → 9.97.2

package/core/Line.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 s=o(e),c=a(t);const l=c.forwardRef((function({points:e,color:t="black",vertexColors:o,linewidth:a,lineWidth:l,segments:u,dashed:f,...d},m){var h;const p=n.useThree((e=>e.size)),b=c.useMemo((()=>u?new i.LineSegments2:new i.Line2),[u]),[y]=c.useState((()=>new i.LineMaterial)),v=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,g=c.useMemo((()=>{const t=u?new i.LineSegmentsGeometry:new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(t.setPositions(n.flat()),o){const e=o.map((e=>e instanceof r.Color?e.toArray():e));t.setColors(e.flat(),v)}return t}),[e,u,o,v]);return c.useLayoutEffect((()=>{b.computeLineDistances()}),[e,b]),c.useLayoutEffect((()=>{f?y.defines.USE_DASH="":delete y.defines.USE_DASH,y.needsUpdate=!0}),[f,y]),c.useEffect((()=>()=>g.dispose()),[g]),c.createElement("primitive",s.default({object:b,ref:m},d),c.createElement("primitive",{object:g,attach:"geometry"}),c.createElement("primitive",s.default({object:y,attach:"material",color:t,vertexColors:Boolean(o),resolution:[p.width,p.height],linewidth:null!=a?a:l,dashed:f,transparent:4===v},d)))}));exports.Line=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),c=s(t);const u=c.forwardRef((function({points:e,color:t=16777215,vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){var h;const p=n.useThree((e=>e.size)),b=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[y]=c.useState((()=>new i.LineMaterial)),v=4===(null==o||null==(h=o[0])?void 0:h.length)?4:3,g=c.useMemo((()=>{const n=l?new i.LineSegmentsGeometry:new i.LineGeometry,s=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(n.setPositions(s.flat()),o){t=16777215;const e=o.map((e=>e instanceof r.Color?e.toArray():e));n.setColors(e.flat(),v)}return n}),[e,l,o,v]);return c.useLayoutEffect((()=>{b.computeLineDistances()}),[e,b]),c.useLayoutEffect((()=>{f?y.defines.USE_DASH="":delete y.defines.USE_DASH,y.needsUpdate=!0}),[f,y]),c.useEffect((()=>()=>g.dispose()),[g]),c.createElement("primitive",a.default({object:b,ref:m},d),c.createElement("primitive",{object:g,attach:"geometry"}),c.createElement("primitive",a.default({object:y,attach:"material",color:t,vertexColors:Boolean(o),resolution:[p.width,p.height],linewidth:null!=s?s:u,dashed:f,transparent:4===v},d)))}));exports.Line=u;

package/core/Line.js

@@ -6,7 +6,7 @@ import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry
 
 const Line = /* @__PURE__ */React.forwardRef(function Line({
   points,
-  color = 'black',
+  color = 0xffffff,
   vertexColors,
   linewidth,
   lineWidth,
@@ -27,6 +27,8 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
     });
     geom.setPositions(pValues.flat());
     if (vertexColors) {
+      // using vertexColors requires the color value to be white see #1813
+      color = 0xffffff;
       const cValues = vertexColors.map(c => c instanceof Color ? c.toArray() : c);
       geom.setColors(cValues.flat(), itemSize);
     }

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:g,play:b,pause:x,flipX:F,alphaTest:S,children:j,asSprite:R,offset:M,playBackwards:O,resetOnEnd:A,maxItems:z,instanceItems:N,spriteDataset:q,...T},k)=>{const I=o.useRef(),L=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:k})),[m,q]);o.useImperativeHandle(k,(()=>I.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,L.current&&!0===O?U.current=L.current.frames.length-1:U.current=0}),[O]),o.useLayoutEffect((()=>{se()}),[G,F]),o.useEffect((()=>{h&&(Y.current=!1)}),[h]),o.useEffect((()=>{if(B.current!==c&&c&&(U.current=0,B.current=c,ue.hasEnded=!1,se(),L.current)){const{w:e,h:r}=oe(L.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),L.current={frames:[],meta:{version:"1.0",size:{w:t,h:n},scale:"1"}},L.current.frames=r}}else{L.current=r,J.current=L.current.frames.length,O&&(U.current=J.current-1);const{w:t,h:n}=oe(L.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(L.current.frames),r=e[Math.floor(Math.random()*e.length)];ee.current.push({key:t,frames:L.current.frames,selectedFrame:r,offset:{x:0,y:0}})}H(e)},se=()=>{if(!L.current)return;const{meta:{size:e},frames:r}=L.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)&&(console.log("nan frame detected"),e=0),U.current=e}else O?U.current-=1:U.current+=1};t.useFrame(((t,n)=>{var u,a;null!=(u=L.current)&&u.frames&&null!=(a=D.current)&&a.map&&(Y.current||ue.hasEnded||!h&&!b||((()=>{const t=window.performance.now(),n=t-_.current,{meta:{size:u},frames:a}=L.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))})(),g&&g({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({},T,{ref:I}),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:z},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: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)};

package/core/SpriteAnimator.js

@@ -118,12 +118,12 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       pauseRef.current = false;
     }
   }, [autoPlay]);
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (currentFrameName.current !== frameName && frameName) {
       currentFrame.current = 0;
       currentFrameName.current = frameName;
       state.hasEnded = false;
-      modifySpritePosition();
+      // modifySpritePosition()
       if (spriteData.current) {
         const {
           w,
@@ -339,7 +339,6 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       // Ensure the frame index is within the valid range
       frameIndex = Math.max(0, Math.min(frameIndex, spriteFrames.length - 1));
       if (isNaN(frameIndex)) {
-        console.log('nan frame detected');
         frameIndex = 0; //fallback
       }
 
@@ -403,7 +402,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
   })), !displayAsSprite && /*#__PURE__*/React.createElement(Instances, {
-    limit: maxItems // Optional: max amount of items (for calculating buffer size)
+    limit: maxItems !== null && maxItems !== void 0 ? maxItems : 1 // Optional: max amount of items (for calculating buffer size)
   }, /*#__PURE__*/React.createElement("planeGeometry", {
     args: [1, 1]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", {

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),u=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}},o=(e,r,t,n)=>{const u=r*(n.aspect>e/r?n.width/e:n.height/r),a=e*(n.aspect>e/r?n.width/e:n.height/r)*t,o=u*t;let i=Math.min(1,a),c=Math.min(1,o);return a>1&&(i=1,c=o/a*1),new s.Vector3(i,c,1)};function i(n,i,c,f,l){const h=r.useThree((e=>e.viewport)),d=r.useThree((e=>e.gl)),m=u.useRef(null),p=u.useRef(0),[w,y]=t.useState(null),[x,g]=u.useState(new s.Texture),b=new s.TextureLoader,[L,S]=t.useState(null);function j(e){(e||n)&&new Promise((r=>{b.load(null!=e?e:n,r)})).then((e=>{T(null,e)}))}function O(e,r,t){const n=fetch(e).then((e=>e.json())),s=new Promise((e=>{b.load(r,e)}));Promise.all([n,s]).then((e=>{t(e[0],e[1])}))}u.useLayoutEffect((()=>(i&&n?O(i,n,T):n&&j(),()=>{n&&r.useLoader.clear(e.TextureLoader,n)})),[]);const T=(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,u=n;if(p.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:u},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:u},sourceSize:{w:s,h:n}});t=o(s,u,.1,h)}}else if(r){m.current=e,m.current.frames=Array.isArray(e.frames)?e.frames:A(),p.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:n}=a(e.frames).sourceSize;t=o(r,n,.1,h)}y(m.current),r.encoding=s.sRGBEncoding,g(r),S({spriteTexture:r,spriteData:m.current,aspect:t})},A=()=>{const e={},r=m.current,t=c;if(t)for(let n=0;n<t.length;n++){e[t[n]]=[];for(const s in r.frames){const u=r.frames[s],a=u.frame,o=a.x,i=a.y,c=a.w,f=a.h,l=u.sourceSize.w,h=u.sourceSize.h;"string"==typeof s&&-1!==s.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:o,y:i,w:c,h:f,frame:a,sourceSize:{w:l,h:h}})}}return e};return u.useLayoutEffect((()=>{null==l||l(x,w)}),[x,w]),t.useEffect((()=>{if("initTexture"in d){(Array.isArray(x)?x:[x]).forEach(d.initTexture)}}),[d,x]),{spriteObj:L,loadJsonAndTexture:function(e,r){r&&e?O(r,e,T):j(e)}}}i.preload=t=>r.useLoader.preload(e.TextureLoader,t),i.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=o,exports.getFirstItem=a,exports.useSpriteLoader=i;
+"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;

package/core/useSpriteLoader.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { TextureLoader } from 'three';
 import { useThree, useLoader } from '@react-three/fiber';
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 // utils
 const getFirstItem = param => {
@@ -37,7 +37,6 @@ const calculateAspectRatio = (width, height, factor, v) => {
 };
 function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
   const v = useThree(state => state.viewport);
-  const gl = useThree(state => state.gl);
   const spriteDataRef = React.useRef(null);
   const totalFrames = React.useRef(0);
   const aspectFactor = 0.1;
@@ -163,6 +162,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
     const delimiters = animationNames;
     if (delimiters) {
       for (let i = 0; i < delimiters.length; i++) {
+        // we convert each named animation group into an array
         sprites[delimiters[i]] = [];
         for (const innerKey in data['frames']) {
           const value = data['frames'][innerKey];
@@ -188,22 +188,19 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
           }
         }
       }
+      return sprites;
+    } else {
+      // we need to convert it into an array
+      const spritesArr = [];
+      for (const key in data.frames) {
+        spritesArr.push(data.frames[key]);
+      }
+      return spritesArr;
     }
-    return sprites;
   };
   React.useLayoutEffect(() => {
     onLoad == null || onLoad(spriteTexture, spriteData);
   }, [spriteTexture, spriteData]);
-
-  // https://github.com/mrdoob/three.js/issues/22696
-  // Upload the texture to the GPU immediately instead of waiting for the first render
-  // NOTE: only available for WebGLRenderer
-  useEffect(() => {
-    if ('initTexture' in gl) {
-      const array = Array.isArray(spriteTexture) ? spriteTexture : [spriteTexture];
-      array.forEach(gl.initTexture);
-    }
-  }, [gl, spriteTexture]);
   return {
     spriteObj,
     loadJsonAndTexture