@react-three/drei 9.116.2 → 9.116.3

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 {};

package/core/SpriteAnimator.js

@@ -3,88 +3,168 @@ import * as React from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
 import { Instances, Instance } from './Instances.js';
-import { useSpriteLoader } from './useSpriteLoader.js';
+import { Billboard } from './Billboard.js';
+import { useSpriteLoader, getFirstFrame } from './useSpriteLoader.js';
+
+// Frame-related types
 
 const context = /*#__PURE__*/React.createContext(null);
 function useSpriteAnimator() {
   return React.useContext(context);
 }
+
+// Type guard for SpriteData
+function isSpriteData(data) {
+  return data !== null && 'meta' in data && 'frames' in data;
+}
 const geometry = new THREE.PlaneGeometry(1, 1);
 const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
-  startFrame,
+  startFrame = 0,
   endFrame,
-  fps,
-  frameName,
+  fps = 30,
+  frameName = '',
   textureDataURL,
   textureImageURL,
-  loop,
-  numberOfFrames,
-  autoPlay,
+  loop = false,
+  numberOfFrames = 1,
+  autoPlay = true,
   animationNames,
   onStart,
   onEnd,
   onLoopEnd,
   onFrame,
   play,
-  pause,
-  flipX,
-  alphaTest,
+  pause = false,
+  flipX = false,
+  alphaTest = 0.0,
   children,
-  asSprite,
+  asSprite = false,
   offset,
-  playBackwards,
-  resetOnEnd,
-  maxItems,
-  instanceItems,
+  playBackwards = false,
+  resetOnEnd = false,
+  maxItems = 1,
+  instanceItems = [[0, 0, 0]],
   spriteDataset,
   canvasRenderingContext2DSettings,
   roundFramePosition = false,
   meshProps = {},
   ...props
 }, fref) => {
-  var _props$scale;
-  const ref = React.useRef();
+  const ref = React.useRef(new THREE.Group());
   const spriteData = React.useRef(null);
-  const matRef = React.useRef();
-  const spriteRef = React.useRef();
+  const matRef = React.useRef(null);
+  const spriteRef = React.useRef(null);
   const timerOffset = React.useRef(window.performance.now());
-  const currentFrame = React.useRef(startFrame || 0);
-  const currentFrameName = React.useRef(frameName || '');
-  const fpsInterval = (fps !== null && fps !== void 0 ? fps : 30) > 0 ? 1000 / (fps || 30) : 0;
+  const currentFrame = React.useRef(startFrame);
+  const currentFrameName = React.useRef(frameName);
+  const fpsInterval = fps > 0 ? 1000 / fps : 0;
   const [spriteTexture, setSpriteTexture] = React.useState(new THREE.Texture());
   const totalFrames = React.useRef(0);
-  const [aspect, setAspect] = React.useState([1, 1, 1]);
+  const [aspect, setAspect] = React.useState(new THREE.Vector3(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);
   const pos = React.useRef(offset);
   const softEnd = React.useRef(false);
-  const frameBuffer = React.useRef([]);
   const {
     spriteObj,
     loadJsonAndTexture
   } = useSpriteLoader(null, null, animationNames, numberOfFrames, undefined, canvasRenderingContext2DSettings);
-  //
+  const frameNameRef = React.useRef(frameName);
+
+  // lite version for pre-loaded assets
+  const parseSpriteDataLite = React.useCallback((textureData, data) => {
+    if (data === null) {
+      if (numberOfFrames) {
+        //get size from texture
+
+        totalFrames.current = numberOfFrames;
+        if (playBackwards) {
+          currentFrame.current = numberOfFrames - 1;
+        }
+        spriteData.current = data;
+      }
+    } else {
+      var _spriteData$current$f, _spriteData$current;
+      spriteData.current = data;
+      if (spriteData.current && Array.isArray(spriteData.current.frames)) {
+        totalFrames.current = spriteData.current.frames.length;
+      } else if (spriteData.current && typeof spriteData.current === 'object' && frameNameRef.current) {
+        totalFrames.current = spriteData.current.frames[frameNameRef.current].length;
+      } else {
+        totalFrames.current = 0;
+      }
+      if (playBackwards) {
+        currentFrame.current = totalFrames.current - 1;
+      }
+      const {
+        w,
+        h
+      } = getFirstFrame((_spriteData$current$f = (_spriteData$current = spriteData.current) == null ? void 0 : _spriteData$current.frames) !== null && _spriteData$current$f !== void 0 ? _spriteData$current$f : [], frameNameRef.current).sourceSize;
+      const aspect = calculateAspectRatio(w, h);
+      setAspect(aspect);
+      if (matRef.current) {
+        matRef.current.map = textureData;
+      }
+    }
+    setSpriteTexture(textureData);
+  }, [numberOfFrames, playBackwards]);
 
-  function reset() {}
+  // modify the sprite material after json is parsed and state updated
+  const modifySpritePosition = React.useCallback(() => {
+    if (!spriteData.current) return;
+    const {
+      meta: {
+        size: metaInfo
+      },
+      frames
+    } = spriteData.current;
+    const {
+      w: frameW,
+      h: frameH
+    } = Array.isArray(frames) ? frames[0].sourceSize : frameName ? frames[frameName] ? frames[frameName][0].sourceSize : {
+      w: 0,
+      h: 0
+    } : {
+      w: 0,
+      h: 0
+    };
+    if (matRef.current && matRef.current.map) {
+      matRef.current.map.wrapS = matRef.current.map.wrapT = THREE.RepeatWrapping;
+      matRef.current.map.center.set(0, 0);
+      matRef.current.map.repeat.set(1 * flipOffset / (metaInfo.w / frameW), 1 / (metaInfo.h / frameH));
+    }
+    //const framesH = (metaInfo.w - 1) / frameW
+    const framesV = (metaInfo.h - 1) / frameH;
+    const frameOffsetY = 1 / framesV;
+    if (matRef.current && matRef.current.map) {
+      matRef.current.map.offset.x = 0.0; //-matRef.current.map.repeat.x
+      matRef.current.map.offset.y = 1 - frameOffsetY;
+    }
+    if (onStart) {
+      onStart({
+        currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
+        currentFrame: currentFrame.current
+      });
+    }
+  }, [flipOffset, frameName, onStart]);
   const state = React.useMemo(() => ({
     current: pos.current,
     offset: pos.current,
     imageUrl: textureImageURL,
-    reset: reset,
     hasEnded: false,
     ref: fref
-  }), [textureImageURL, spriteDataset]);
+  }), [textureImageURL, fref]);
   React.useImperativeHandle(fref, () => ref.current, []);
   React.useLayoutEffect(() => {
     pos.current = offset;
   }, [offset]);
   const calculateAspectRatio = (width, height) => {
+    var _spriteRef$current;
+    const ret = new THREE.Vector3();
     const aspectRatio = height / width;
-    if (spriteRef.current) {
-      spriteRef.current.scale.set(1, aspectRatio, 1);
-    }
-    return [1, aspectRatio, 1];
+    ret.set(1, aspectRatio, 1);
+    (_spriteRef$current = spriteRef.current) == null || _spriteRef$current.scale.copy(ret);
+    return ret;
   };
 
   // initial loads
@@ -97,29 +177,27 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
         loadJsonAndTexture(textureImageURL, textureDataURL);
       }
     }
-  }, [spriteDataset]);
+  }, [loadJsonAndTexture, spriteDataset, textureDataURL, textureImageURL, parseSpriteDataLite]);
   React.useEffect(() => {
     if (spriteObj) {
       var _spriteObj$spriteText;
       parseSpriteDataLite(spriteObj == null || (_spriteObj$spriteText = spriteObj.spriteTexture) == null ? void 0 : _spriteObj$spriteText.clone(), spriteObj == null ? void 0 : spriteObj.spriteData);
     }
-  }, [spriteObj]);
-  React.useEffect(() => {
-    setDisplayAsSprite(asSprite !== null && asSprite !== void 0 ? asSprite : true);
-  }, [asSprite]);
+  }, [spriteObj, parseSpriteDataLite]);
 
   // support backwards play
   React.useEffect(() => {
     state.hasEnded = false;
     if (spriteData.current && playBackwards === true) {
-      currentFrame.current = spriteData.current.frames.length - 1;
+      var _ref;
+      currentFrame.current = ((_ref = spriteData.current.frames.length) !== null && _ref !== void 0 ? _ref : 0) - 1;
     } else {
       currentFrame.current = 0;
     }
-  }, [playBackwards]);
+  }, [playBackwards, state]);
   React.useLayoutEffect(() => {
     modifySpritePosition();
-  }, [spriteTexture, flipX]);
+  }, [spriteTexture, flipX, modifySpritePosition]);
   React.useEffect(() => {
     if (autoPlay) {
       pauseRef.current = false;
@@ -138,113 +216,16 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
         const {
           w,
           h
-        } = getFirstItem(spriteData.current.frames).sourceSize;
+        } = getFirstFrame(spriteData.current.frames, frameName).sourceSize;
         const _aspect = calculateAspectRatio(w, h);
         setAspect(_aspect);
       }
     }
-  }, [frameName, fpsInterval]);
-
-  // lite version for pre-loaded assets
-  const parseSpriteDataLite = (textureData, frameData = null) => {
-    if (frameData === null) {
-      if (numberOfFrames) {
-        //get size from texture
-        const width = textureData.image.width;
-        const height = textureData.image.height;
-        totalFrames.current = numberOfFrames;
-        if (playBackwards) {
-          currentFrame.current = numberOfFrames - 1;
-        }
-        spriteData.current = {
-          frames: [],
-          meta: {
-            version: '1.0',
-            size: {
-              w: width,
-              h: height
-            },
-            scale: '1'
-          }
-        };
-        spriteData.current.frames = frameData;
-      }
-    } else {
-      spriteData.current = frameData;
-      totalFrames.current = spriteData.current.frames.length;
-      if (playBackwards) {
-        currentFrame.current = totalFrames.current - 1;
-      }
-      const {
-        w,
-        h
-      } = getFirstItem(spriteData.current.frames).sourceSize;
-      const aspect = calculateAspectRatio(w, h);
-      setAspect(aspect);
-      if (matRef.current) {
-        matRef.current.map = textureData;
-      }
-    }
-
-    // buffer for instanced
-    if (instanceItems) {
-      for (var i = 0; i < instanceItems.length; i++) {
-        const keys = Object.keys(spriteData.current.frames);
-        const randomKey = keys[Math.floor(Math.random() * keys.length)];
-        frameBuffer.current.push({
-          key: i,
-          frames: spriteData.current.frames,
-          selectedFrame: randomKey,
-          offset: {
-            x: 0,
-            y: 0
-          }
-        });
-      }
-    }
-    setSpriteTexture(textureData);
-  };
-
-  // modify the sprite material after json is parsed and state updated
-  const modifySpritePosition = () => {
-    if (!spriteData.current) return;
-    const {
-      meta: {
-        size: metaInfo
-      },
-      frames
-    } = spriteData.current;
-    const {
-      w: frameW,
-      h: frameH
-    } = Array.isArray(frames) ? frames[0].sourceSize : frameName ? frames[frameName] ? frames[frameName][0].sourceSize : {
-      w: 0,
-      h: 0
-    } : {
-      w: 0,
-      h: 0
-    };
-    matRef.current.map.wrapS = matRef.current.map.wrapT = THREE.RepeatWrapping;
-    matRef.current.map.center.set(0, 0);
-    matRef.current.map.repeat.set(1 * flipOffset / (metaInfo.w / frameW), 1 / (metaInfo.h / frameH));
-
-    //const framesH = (metaInfo.w - 1) / frameW
-    const framesV = (metaInfo.h - 1) / frameH;
-    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
-      });
-    }
-  };
+  }, [frameName, fpsInterval, state, endFrame, startFrame]);
 
   // run the animation on each frame
   const runAnimation = () => {
-    //if (!frameName) return
-
+    if (!isSpriteData(spriteData.current)) return;
     const {
       meta: {
         size: metaInfo
@@ -254,7 +235,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     const {
       w: frameW,
       h: frameH
-    } = getFirstItem(frames).sourceSize;
+    } = getFirstFrame(frames, frameName).sourceSize;
     const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : [];
     const _endFrame = endFrame || spriteFrames.length - 1;
     var _offset = offset === undefined ? state.current : offset;
@@ -278,15 +259,15 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       }
       if (loop) {
         onLoopEnd == null || onLoopEnd({
-          currentFrameName: frameName,
+          currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
           currentFrame: currentFrame.current
         });
       } else {
         onEnd == null || onEnd({
-          currentFrameName: frameName,
+          currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
           currentFrame: currentFrame.current
         });
-        state.hasEnded = resetOnEnd ? false : true;
+        state.hasEnded = !resetOnEnd;
         if (resetOnEnd) {
           pauseRef.current = true;
           //calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames)
@@ -295,7 +276,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       if (!loop) return;
     } else if (onStartCondition) {
       onStart == null || onStart({
-        currentFrameName: frameName,
+        currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
         currentFrame: currentFrame.current
       });
     }
@@ -304,7 +285,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     if (_offset !== undefined && manualProgressEndCondition) {
       if (softEnd.current === false) {
         onEnd == null || onEnd({
-          currentFrameName: frameName,
+          currentFrameName: frameName !== null && frameName !== void 0 ? frameName : '',
           currentFrame: currentFrame.current
         });
         softEnd.current = true;
@@ -343,10 +324,12 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     } = spriteFrames[targetFrame];
     const frameOffsetX = 1 / framesH;
     const frameOffsetY = 1 / framesV;
-    finalValX = flipOffset > 0 ? frameOffsetX * (frameX / originalSizeX) : frameOffsetX * (frameX / originalSizeX) - matRef.current.map.repeat.x;
-    finalValY = Math.abs(1 - frameOffsetY) - frameOffsetY * (frameY / originalSizeY);
-    matRef.current.map.offset.x = finalValX;
-    matRef.current.map.offset.y = finalValY;
+    if (matRef.current && matRef.current.map) {
+      finalValX = flipOffset > 0 ? frameOffsetX * (frameX / originalSizeX) : frameOffsetX * (frameX / originalSizeX) - matRef.current.map.repeat.x;
+      finalValY = Math.abs(1 - frameOffsetY) - frameOffsetY * (frameY / originalSizeY);
+      matRef.current.map.offset.x = finalValX;
+      matRef.current.map.offset.y = finalValY;
+    }
 
     // if manual update is active
     if (_offset !== undefined && _offset !== null) {
@@ -371,8 +354,8 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
 
   // *** Warning! It runs on every frame! ***
   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)) {
+    var _spriteData$current2, _matRef$current;
+    if (!((_spriteData$current2 = spriteData.current) != null && _spriteData$current2.frames) || !((_matRef$current = matRef.current) != null && _matRef$current.map)) {
       return;
     }
     if (pauseRef.current) {
@@ -380,64 +363,35 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     }
     if (!state.hasEnded && (autoPlay || play)) {
       runAnimation();
-      onFrame && onFrame({
+      onFrame == null || onFrame({
         currentFrameName: currentFrameName.current,
         currentFrame: currentFrame.current
       });
     }
   });
-
-  // utils
-  const getFirstItem = param => {
-    if (Array.isArray(param)) {
-      return param[0];
-    } else if (typeof param === 'object' && param !== null) {
-      const keys = Object.keys(param);
-      return frameName ? param[frameName][0] : param[keys[0]][0];
-    } else {
-      return {
-        w: 0,
-        h: 0
-      };
-    }
-  };
-  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;
+  function multiplyScale(initialScale = new THREE.Vector3(1, 1, 1), newScale = 1) {
+    if (typeof newScale === 'number') return initialScale.multiplyScalar(newScale);
+    if (Array.isArray(newScale)) return initialScale.multiply(new THREE.Vector3(...newScale));
+    if (newScale instanceof THREE.Vector3) return initialScale.multiply(newScale);
   }
   return /*#__PURE__*/React.createElement("group", _extends({}, props, {
     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)
+    scale: multiplyScale(aspect, props.scale)
   }), /*#__PURE__*/React.createElement(context.Provider, {
     value: state
-  }, /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: null
-  }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", _extends({
+  }, asSprite && /*#__PURE__*/React.createElement(Billboard, null, /*#__PURE__*/React.createElement("mesh", _extends({
     ref: spriteRef,
     scale: 1.0,
     geometry: geometry
-  }, meshProps), /*#__PURE__*/React.createElement("spriteMaterial", {
+  }, meshProps), /*#__PURE__*/React.createElement("meshBasicMaterial", {
     premultipliedAlpha: false,
     toneMapped: false,
+    side: THREE.DoubleSide,
     ref: matRef,
     map: spriteTexture,
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
-  })), !displayAsSprite && /*#__PURE__*/React.createElement(Instances, _extends({
+  }))), !asSprite && /*#__PURE__*/React.createElement(Instances, _extends({
     geometry: geometry,
     limit: maxItems !== null && maxItems !== void 0 ? maxItems : 1
   }, meshProps), /*#__PURE__*/React.createElement("meshBasicMaterial", {
@@ -453,7 +407,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     ref: (instanceItems == null ? void 0 : instanceItems.length) === 1 ? spriteRef : null,
     position: item,
     scale: 1.0
-  }, meshProps))))), children));
+  }, meshProps)))), children));
 });
 
 export { SpriteAnimator, useSpriteAnimator };