@react-three/drei 9.88.7 → 9.88.8

package/README.md

@@ -2467,8 +2467,8 @@ type Props = {
   onLoopEnd?: Function
   /** Event callback when each frame changes */
   onFrame?: Function
-  /** Control when the animation runs */
-  play?: boolean
+  /** @deprecated Control when the animation runs*/
+  play?: boolean 
   /** Control when the animation pauses */
   pause?: boolean
   /** Whether or not the Sprite should flip sides on the x-axis */
@@ -2477,6 +2477,8 @@ type Props = {
   alphaTest?: number
   /** Displays the texture on a SpriteGeometry always facing the camera, if set to false, it renders on a PlaneGeometry */
   asSprite?: boolean
+  /** Allows the animation to be paused after it ended so it can be restarted on demand via auto */
+  resetOnEnd?: boolean
 }
 ```
 

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

package/core/SpriteAnimator.d.ts

@@ -20,5 +20,6 @@ export type SpriteAnimatorProps = {
     position?: Array<number>;
     alphaTest?: number;
     asSprite?: boolean;
+    resetOnEnd?: boolean;
 } & JSX.IntrinsicElements['group'];
 export declare const SpriteAnimator: React.FC<SpriteAnimatorProps>;

package/core/SpriteAnimator.js

@@ -1,5 +1,6 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useThree, useFrame } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
 
 const SpriteAnimator = ({
@@ -23,9 +24,9 @@ const SpriteAnimator = ({
   alphaTest,
   children,
   asSprite,
+  resetOnEnd,
   ...props
 }, fref) => {
-  useThree(state => state.viewport);
   const spriteData = React.useRef(null);
   const [isJsonReady, setJsonReady] = React.useState(false);
   const hasEnded = React.useRef(false);
@@ -41,6 +42,7 @@ const SpriteAnimator = ({
   const [aspect, setAspect] = React.useState([1, 1, 1]);
   const flipOffset = flipX ? -1 : 1;
   const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite !== null && asSprite !== void 0 ? asSprite : true);
+  const pauseRef = React.useRef(pause);
   function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
     const textureLoader = new THREE.TextureLoader();
     const jsonPromise = fetch(jsonUrl).then(response => response.json());
@@ -80,7 +82,10 @@ const SpriteAnimator = ({
     modifySpritePosition();
   }, [spriteTexture, flipX]);
   React.useEffect(() => {
-  }, [pause]);
+    if (autoPlay) {
+      pauseRef.current = false;
+    }
+  }, [autoPlay]);
   React.useEffect(() => {
     if (currentFrameName.current !== frameName && frameName) {
       currentFrame.current = 0;
@@ -100,7 +105,7 @@ const SpriteAnimator = ({
   const parseSpriteData = (json, _spriteTexture) => {
     // sprite only case
     if (json === null) {
-      if (_spriteTexture && numberOfFrames) {
+      if (numberOfFrames) {
         //get size from texture
         const width = _spriteTexture.image.width;
         const height = _spriteTexture.image.height;
@@ -145,7 +150,7 @@ const SpriteAnimator = ({
           }
         }
       }
-    } else if (_spriteTexture) {
+    } else {
       spriteData.current = json;
       spriteData.current.frames = Array.isArray(json.frames) ? json.frames : parseFrames();
       totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
@@ -172,7 +177,7 @@ const SpriteAnimator = ({
     if (delimiters) {
       for (let i = 0; i < delimiters.length; i++) {
         sprites[delimiters[i]] = [];
-        for (let innerKey in data['frames']) {
+        for (const innerKey in data['frames']) {
           const value = data['frames'][innerKey];
           const frameData = value['frame'];
           const x = frameData['x'];
@@ -181,7 +186,7 @@ const SpriteAnimator = ({
           const height = frameData['h'];
           const sourceWidth = value['sourceSize']['w'];
           const sourceHeight = value['sourceSize']['h'];
-          if (typeof innerKey === 'string' && innerKey.toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
+          if (innerKey.toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
             sprites[delimiters[i]].push({
               x: x,
               y: y,
@@ -196,8 +201,14 @@ const SpriteAnimator = ({
           }
         }
       }
+      return sprites;
+    } else if (frameName) {
+      const spritesArr = [];
+      for (const key in data.frames) {
+        spritesArr.push(data.frames[key]);
+      }
+      return spritesArr;
     }
-    return sprites;
   };
 
   // modify the sprite material after json is parsed and state updated
@@ -251,8 +262,6 @@ const SpriteAnimator = ({
       h: frameH
     } = getFirstItem(frames).sourceSize;
     const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : [];
-    let finalValX = 0;
-    let finalValY = 0;
     const _endFrame = endFrame || spriteFrames.length - 1;
     if (currentFrame.current > _endFrame) {
       currentFrame.current = loop ? startFrame !== null && startFrame !== void 0 ? startFrame : 0 : 0;
@@ -266,12 +275,23 @@ const SpriteAnimator = ({
           currentFrameName: frameName,
           currentFrame: currentFrame.current
         });
-        hasEnded.current = true;
+        hasEnded.current = resetOnEnd ? false : true;
+        if (resetOnEnd) {
+          pauseRef.current = true;
+          //calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames)
+        }
       }
+
       if (!loop) return;
     }
     if (diff <= fpsInterval) return;
     timerOffset.current = now - diff % fpsInterval;
+    calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames);
+    currentFrame.current += 1;
+  };
+  const calculateFinalPosition = (frameW, frameH, metaInfo, spriteFrames) => {
+    let finalValX = 0;
+    let finalValY = 0;
     calculateAspectRatio(frameW, frameH);
     const framesH = (metaInfo.w - 1) / frameW;
     const framesV = (metaInfo.h - 1) / frameH;
@@ -291,16 +311,15 @@ const SpriteAnimator = ({
     finalValY = Math.abs(1 - frameOffsetY) - frameOffsetY * (frameY / originalSizeY);
     matRef.current.map.offset.x = finalValX;
     matRef.current.map.offset.y = finalValY;
-    currentFrame.current += 1;
   };
 
   // *** Warning! It runs on every frame! ***
-  useFrame((state, delta) => {
+  useFrame((_state, _delta) => {
     var _spriteData$current, _matRef$current;
     if (!((_spriteData$current = spriteData.current) != null && _spriteData$current.frames) || !((_matRef$current = matRef.current) != null && _matRef$current.map)) {
       return;
     }
-    if (pause) {
+    if (pauseRef.current) {
       return;
     }
     if (!hasEnded.current && (autoPlay || play)) {
@@ -326,7 +345,9 @@ const SpriteAnimator = ({
       };
     }
   };
-  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: fref
+  }, props), /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
   }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {
     ref: spriteRef,