@react-three/drei 9.87.0 → 9.87.1

package/core/SpriteAnimator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three");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 a=n(e),u=n(t);exports.SpriteAnimator=({startFrame:e,endFrame:t,fps:n,frameName:s,textureDataURL:c,textureImageURL:f,loop:o,numberOfFrames:m,autoPlay:l,animationNames:i,onStart:p,onEnd:h,onLoopEnd:w,onFrame:y,play:d,pause:S,flipX:g,alphaTest:x,children:b,asSprite:E,...z},F)=>{r.useThree((e=>e.viewport));const A=a.useRef(null),[R,O]=a.useState(!1),j=a.useRef(!1),v=a.useRef(),L=a.useRef(),T=a.useRef(window.performance.now()),M=a.useRef(),P=a.useRef(e||0),N=a.useRef(s||""),k=1e3/(n||30),[_,q]=a.useState(new u.Texture),D=a.useRef(0),[C,I]=a.useState([1,1,1]),U=g?-1:1,[B,G]=a.useState(null==E||E);const W=(e,r)=>{const t=r/e;return L.current.scale.set(1,t,1),[1,t,1]};a.useEffect((()=>{if(c&&f)!function(e,r,t){const n=new u.TextureLoader,a=fetch(e).then((e=>e.json())),s=new Promise((e=>{n.load(r,e)}));Promise.all([a,s]).then((e=>{t(e[0],e[1])}))}(c,f,X);else if(f){const e=new u.TextureLoader;new Promise((r=>{e.load(f,r)})).then((e=>{X(null,e)}))}}),[]),a.useEffect((()=>{G(null==E||E)}),[E]),a.useLayoutEffect((()=>{J()}),[_,g]),a.useEffect((()=>{}),[S]),a.useEffect((()=>{N.current!==s&&s&&(P.current=0,N.current=s,j.current=!1)}),[s]);const X=(e,r)=>{if(null===e){if(r&&m){const e=r.image.width,t=r.image.height,n=e/m,a=t;if(M.current=r,D.current=m,A.current={frames:[],meta:{version:"1.0",size:{w:e,h:t},scale:"1"}},parseInt(n.toString(),10)===n)for(let e=0;e<m;e++)A.current.frames.push({frame:{x:e*n,y:0,w:n,h:a},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:n,h:a},sourceSize:{w:n,h:t}})}}else if(r){A.current=e,A.current.frames=Array.isArray(e.frames)?e.frames:H(),D.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length,M.current=r;const{w:t,h:n}=K(e.frames).sourceSize,a=W(t,n);I(a),v.current&&(v.current.map=r)}r.premultiplyAlpha=!1,q(r)},H=()=>{const e={},r=A.current,t=i;if(t)for(let n=0;n<t.length;n++){e[t[n]]=[];for(let a in r.frames){const u=r.frames[a],s=u.frame,c=s.x,f=s.y,o=s.w,m=s.h,l=u.sourceSize.w,i=u.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:c,y:f,w:o,h:m,frame:s,sourceSize:{w:l,h:i}})}}return e},J=()=>{if(!A.current)return;const{meta:{size:e},frames:r}=A.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:s&&r[s]?r[s][0].sourceSize:{w:0,h:0};v.current.map.wrapS=v.current.map.wrapT=u.RepeatWrapping,v.current.map.center.set(0,0),v.current.map.repeat.set(1*U/(e.w/t),1/(e.h/n));const a=1/((e.h-1)/n);v.current.map.offset.x=0,v.current.map.offset.y=1-a,O(!0),p&&p({currentFrameName:s,currentFrame:P.current})};r.useFrame(((r,n)=>{var a,u;null!=(a=A.current)&&a.frames&&null!=(u=v.current)&&u.map&&(S||j.current||!l&&!d||((()=>{const r=window.performance.now(),n=r-T.current,{meta:{size:a},frames:u}=A.current,{w:c,h:f}=K(u).sourceSize,m=Array.isArray(u)?u:s?u[s]:[];let l=0,i=0;const p=t||m.length-1;if(P.current>p&&(P.current=o&&null!=e?e:0,o?null==w||w({currentFrameName:s,currentFrame:P.current}):(null==h||h({currentFrameName:s,currentFrame:P.current}),j.current=!0),!o))return;if(n<=k)return;T.current=r-n%k,W(c,f);const y=(a.w-1)/c,d=(a.h-1)/f,{frame:{x:S,y:g},sourceSize:{w:x,h:b}}=m[P.current],E=1/y,z=1/d;l=U>0?E*(S/x):E*(S/x)-v.current.map.repeat.x,i=Math.abs(1-z)-z*(g/b),v.current.map.offset.x=l,v.current.map.offset.y=i,P.current+=1})(),y&&y({currentFrameName:N.current,currentFrame:P.current})))}));const K=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}};return a.createElement("group",z,a.createElement(a.Suspense,{fallback:null},B&&a.createElement("sprite",{ref:L,scale:C},a.createElement("spriteMaterial",{toneMapped:!1,ref:v,map:_,transparent:!0,alphaTest:null!=x?x:0})),!B&&a.createElement("mesh",{ref:L,scale:C},a.createElement("planeGeometry",{args:[1,1]}),a.createElement("meshBasicMaterial",{toneMapped:!1,side:u.DoubleSide,ref:v,map:_,transparent:!0,alphaTest:null!=x?x:0}))),b)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three");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 a=n(e),u=n(t);exports.SpriteAnimator=({startFrame:e,endFrame:t,fps:n,frameName:s,textureDataURL:c,textureImageURL:o,loop:f,numberOfFrames:m,autoPlay:i,animationNames:l,onStart:p,onEnd:h,onLoopEnd:w,onFrame:y,play:d,pause:S,flipX:g,alphaTest:x,children:b,asSprite:z,...E},F)=>{r.useThree((e=>e.viewport));const A=a.useRef(null),[R,O]=a.useState(!1),j=a.useRef(!1),v=a.useRef(),L=a.useRef(),T=a.useRef(window.performance.now()),M=a.useRef(),P=a.useRef(e||0),N=a.useRef(s||""),k=1e3/(n||30),[_,q]=a.useState(new u.Texture),D=a.useRef(0),[C,I]=a.useState([1,1,1]),U=g?-1:1,[B,G]=a.useState(null==z||z);const W=(e,r)=>{const t=r/e;return L.current&&L.current.scale.set(1,t,1),[1,t,1]};a.useEffect((()=>{if(c&&o)!function(e,r,t){const n=new u.TextureLoader,a=fetch(e).then((e=>e.json())),s=new Promise((e=>{n.load(r,e)}));Promise.all([a,s]).then((e=>{t(e[0],e[1])}))}(c,o,X);else if(o){const e=new u.TextureLoader;new Promise((r=>{e.load(o,r)})).then((e=>{X(null,e)}))}}),[]),a.useEffect((()=>{G(null==z||z)}),[z]),a.useLayoutEffect((()=>{J()}),[_,g]),a.useEffect((()=>{}),[S]),a.useEffect((()=>{if(N.current!==s&&s&&(P.current=0,N.current=s,j.current=!1,J(),A.current)){const{w:e,h:r}=K(A.current.frames).sourceSize,t=W(e,r);I(t)}}),[s]);const X=(e,r)=>{if(null===e){if(r&&m){const e=r.image.width,t=r.image.height,n=e/m,a=t;if(M.current=r,D.current=m,A.current={frames:[],meta:{version:"1.0",size:{w:e,h:t},scale:"1"}},parseInt(n.toString(),10)===n)for(let e=0;e<m;e++)A.current.frames.push({frame:{x:e*n,y:0,w:n,h:a},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:n,h:a},sourceSize:{w:n,h:t}})}}else if(r){A.current=e,A.current.frames=Array.isArray(e.frames)?e.frames:H(),D.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length,M.current=r;const{w:t,h:n}=K(e.frames).sourceSize,a=W(t,n);I(a),v.current&&(v.current.map=r)}r.premultiplyAlpha=!1,q(r)},H=()=>{const e={},r=A.current,t=l;if(t)for(let n=0;n<t.length;n++){e[t[n]]=[];for(let a in r.frames){const u=r.frames[a],s=u.frame,c=s.x,o=s.y,f=s.w,m=s.h,i=u.sourceSize.w,l=u.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:c,y:o,w:f,h:m,frame:s,sourceSize:{w:i,h:l}})}}return e},J=()=>{if(!A.current)return;const{meta:{size:e},frames:r}=A.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:s&&r[s]?r[s][0].sourceSize:{w:0,h:0};v.current.map.wrapS=v.current.map.wrapT=u.RepeatWrapping,v.current.map.center.set(0,0),v.current.map.repeat.set(1*U/(e.w/t),1/(e.h/n));const a=1/((e.h-1)/n);v.current.map.offset.x=0,v.current.map.offset.y=1-a,O(!0),p&&p({currentFrameName:s,currentFrame:P.current})};r.useFrame(((r,n)=>{var a,u;null!=(a=A.current)&&a.frames&&null!=(u=v.current)&&u.map&&(S||j.current||!i&&!d||((()=>{const r=window.performance.now(),n=r-T.current,{meta:{size:a},frames:u}=A.current,{w:c,h:o}=K(u).sourceSize,m=Array.isArray(u)?u:s?u[s]:[];let i=0,l=0;const p=t||m.length-1;if(P.current>p&&(P.current=f&&null!=e?e:0,f?null==w||w({currentFrameName:s,currentFrame:P.current}):(null==h||h({currentFrameName:s,currentFrame:P.current}),j.current=!0),!f))return;if(n<=k)return;T.current=r-n%k,W(c,o);const y=(a.w-1)/c,d=(a.h-1)/o,{frame:{x:S,y:g},sourceSize:{w:x,h:b}}=m[P.current],z=1/y,E=1/d;i=U>0?z*(S/x):z*(S/x)-v.current.map.repeat.x,l=Math.abs(1-E)-E*(g/b),v.current.map.offset.x=i,v.current.map.offset.y=l,P.current+=1})(),y&&y({currentFrameName:N.current,currentFrame:P.current})))}));const K=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){const r=Object.keys(e);return s?e[s][0]:e[r[0]][0]}return{w:0,h:0}};return a.createElement("group",E,a.createElement(a.Suspense,{fallback:null},B&&a.createElement("sprite",{ref:L,scale:C},a.createElement("spriteMaterial",{toneMapped:!1,ref:v,map:_,transparent:!0,alphaTest:null!=x?x:0})),!B&&a.createElement("mesh",{ref:L,scale:C},a.createElement("planeGeometry",{args:[1,1]}),a.createElement("meshBasicMaterial",{toneMapped:!1,side:u.DoubleSide,ref:v,map:_,transparent:!0,alphaTest:null!=x?x:0}))),b)};

package/core/SpriteAnimator.js

@@ -53,7 +53,9 @@ const SpriteAnimator = ({
   }
   const calculateAspectRatio = (width, height) => {
     const aspectRatio = height / width;
-    spriteRef.current.scale.set(1, aspectRatio, 1);
+    if (spriteRef.current) {
+      spriteRef.current.scale.set(1, aspectRatio, 1);
+    }
     return [1, aspectRatio, 1];
   };
 
@@ -84,6 +86,15 @@ const SpriteAnimator = ({
       currentFrame.current = 0;
       currentFrameName.current = frameName;
       hasEnded.current = false;
+      modifySpritePosition();
+      if (spriteData.current) {
+        const {
+          w,
+          h
+        } = getFirstItem(spriteData.current.frames).sourceSize;
+        const _aspect = calculateAspectRatio(w, h);
+        setAspect(_aspect);
+      }
     }
   }, [frameName]);
   const parseSpriteData = (json, _spriteTexture) => {
@@ -307,7 +318,7 @@ const SpriteAnimator = ({
       return param[0];
     } else if (typeof param === 'object' && param !== null) {
       const keys = Object.keys(param);
-      return param[keys[0]][0];
+      return frameName ? param[frameName][0] : param[keys[0]][0];
     } else {
       return {
         w: 0,