@react-three/drei 9.92.7 → 9.93.1

package/README.md

@@ -2545,8 +2545,16 @@ 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 for manual update of the sprite animation e.g: via ScrollControls */
+  offset?: number
+  /** Allows the sprite animation to start from the end towards the start */
+  playBackwards: boolean
   /** Allows the animation to be paused after it ended so it can be restarted on demand via auto */
   resetOnEnd?: boolean
+  /** An array of items to create instances from */
+  instanceItems?: any[]
+  /** The max number of items to instance (optional) */
+  maxItems?: number
 }
 ```
 
@@ -2570,6 +2578,37 @@ Notes:
 />
 ```
 
+ScrollControls example
+
+```jsx
+;<ScrollControls damping={0.2} maxSpeed={0.5} pages={2}>
+  <SpriteAnimator
+    position={[0.0, -1.5, -1.5]}
+    startFrame={0}
+    onEnd={doSomethingOnEnd}
+    onStart={doSomethingOnStart}
+    autoPlay={true}
+    textureImageURL={'sprite.png'}
+    textureDataURL={'sprite.json'}
+  >
+    <FireScroll />
+  </SpriteAnimator>
+</ScrollControls>
+
+function FireScroll() {
+  const sprite = useSpriteAnimator()
+  const scroll = useScroll()
+  const ref = React.useRef()
+  useFrame(() => {
+    if (sprite && scroll) {
+      sprite.current = scroll.offset
+    }
+  })
+
+  return null
+}
+```
+
 #### Stats
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/misc-stats--default-story)

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 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="black",vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){const h=n.useThree((e=>e.size)),p=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[b]=c.useState((()=>new i.LineMaterial)),y=c.useMemo((()=>{const t=l?new i.LineSegmentsGeometry:new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3?[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())}return t}),[e,l,o]);return c.useLayoutEffect((()=>{p.computeLineDistances()}),[e,p]),c.useLayoutEffect((()=>{f?b.defines.USE_DASH="":delete b.defines.USE_DASH,b.needsUpdate=!0}),[f,b]),c.useEffect((()=>()=>y.dispose()),[y]),c.createElement("primitive",a.default({object:p,ref:m},d),c.createElement("primitive",{object:y,attach:"geometry"}),c.createElement("primitive",a.default({object:b,attach:"material",color:t,vertexColors:Boolean(o),resolution:[h.width,h.height],linewidth:null!=s?s:u,dashed:f},d)))}));exports.Line=u;
+"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="black",vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){const h=n.useThree((e=>e.size)),p=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[b]=c.useState((()=>new i.LineMaterial)),y=c.useMemo((()=>{const t=l?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())}return t}),[e,l,o]);return c.useLayoutEffect((()=>{p.computeLineDistances()}),[e,p]),c.useLayoutEffect((()=>{f?b.defines.USE_DASH="":delete b.defines.USE_DASH,b.needsUpdate=!0}),[f,b]),c.useEffect((()=>()=>y.dispose()),[y]),c.createElement("primitive",a.default({object:p,ref:m},d),c.createElement("primitive",{object:y,attach:"geometry"}),c.createElement("primitive",a.default({object:b,attach:"material",color:t,vertexColors:Boolean(o),resolution:[h.width,h.height],linewidth:null!=s?s:u,dashed:f},d)))}));exports.Line=u;

package/core/Line.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Vector3, Vector2, Color } from 'three';
+import { Vector3, Vector4, Vector2, Color } from 'three';
 import { useThree } from '@react-three/fiber';
 import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry } from 'three-stdlib';
 
@@ -21,7 +21,7 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
     const geom = segments ? new LineSegmentsGeometry() : new LineGeometry();
     const pValues = points.map(p => {
       const isArray = Array.isArray(p);
-      return p instanceof Vector3 ? [p.x, p.y, p.z] : p instanceof Vector2 ? [p.x, p.y, 0] : isArray && p.length === 3 ? [p[0], p[1], p[2]] : isArray && p.length === 2 ? [p[0], p[1], 0] : p;
+      return p instanceof Vector3 || p instanceof Vector4 ? [p.x, p.y, p.z] : p instanceof Vector2 ? [p.x, p.y, 0] : isArray && p.length === 3 ? [p[0], p[1], p[2]] : isArray && p.length === 2 ? [p[0], p[1], 0] : p;
     });
     geom.setPositions(pValues.flat());
     if (vertexColors) {

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

package/core/SpriteAnimator.d.ts

@@ -20,6 +20,18 @@ export type SpriteAnimatorProps = {
     position?: Array<number>;
     alphaTest?: number;
     asSprite?: boolean;
+    offset?: number;
+    playBackwards?: boolean;
     resetOnEnd?: boolean;
+    maxItems?: number;
+    instanceItems?: any[];
 } & JSX.IntrinsicElements['group'];
+type SpriteAnimatorState = {
+    current: number | undefined;
+    offset: number | undefined;
+    hasEnded: boolean | undefined;
+    ref: React.MutableRefObject<any> | undefined | null | ((instance: any) => void);
+};
+export declare function useSpriteAnimator(): SpriteAnimatorState;
 export declare const SpriteAnimator: React.FC<SpriteAnimatorProps>;
+export {};

package/core/SpriteAnimator.js

@@ -2,7 +2,12 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
+import { Instances, Instance } from './Instances.js';
 
+const context = /*#__PURE__*/React.createContext(null);
+function useSpriteAnimator() {
+  return React.useContext(context);
+}
 const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   startFrame,
   endFrame,
@@ -24,12 +29,16 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   alphaTest,
   children,
   asSprite,
+  offset,
+  playBackwards,
   resetOnEnd,
+  maxItems,
+  instanceItems,
   ...props
 }, fref) => {
+  const ref = React.useRef();
   const spriteData = React.useRef(null);
-  const [isJsonReady, setJsonReady] = React.useState(false);
-  const hasEnded = React.useRef(false);
+  //const hasEnded = React.useRef(false)
   const matRef = React.useRef();
   const spriteRef = React.useRef();
   const timerOffset = React.useRef(window.performance.now());
@@ -43,6 +52,24 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   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([]);
+  //
+
+  function reset() {}
+  const state = React.useMemo(() => ({
+    current: pos.current,
+    offset: pos.current,
+    imageUrl: textureImageURL,
+    reset: reset,
+    hasEnded: false,
+    ref: fref
+  }), [textureImageURL]);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useLayoutEffect(() => {
+    pos.current = offset;
+  }, [offset]);
   function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
     const textureLoader = new THREE.TextureLoader();
     const jsonPromise = fetch(jsonUrl).then(response => response.json());
@@ -78,6 +105,16 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   React.useEffect(() => {
     setDisplayAsSprite(asSprite !== null && asSprite !== void 0 ? asSprite : true);
   }, [asSprite]);
+
+  // support backwards play
+  React.useEffect(() => {
+    state.hasEnded = false;
+    if (spriteData.current && playBackwards === true) {
+      currentFrame.current = spriteData.current.frames.length - 1;
+    } else {
+      currentFrame.current = 0;
+    }
+  }, [playBackwards]);
   React.useLayoutEffect(() => {
     modifySpritePosition();
   }, [spriteTexture, flipX]);
@@ -90,7 +127,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     if (currentFrameName.current !== frameName && frameName) {
       currentFrame.current = 0;
       currentFrameName.current = frameName;
-      hasEnded.current = false;
+      state.hasEnded = false;
       modifySpritePosition();
       if (spriteData.current) {
         const {
@@ -102,6 +139,8 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       }
     }
   }, [frameName]);
+
+  // parse sprite-data from JSON file (jsonHash or jsonArray)
   const parseSpriteData = (json, _spriteTexture) => {
     // sprite only case
     if (json === null) {
@@ -113,6 +152,9 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
         const frameHeight = height;
         textureData.current = _spriteTexture;
         totalFrames.current = numberOfFrames;
+        if (playBackwards) {
+          currentFrame.current = numberOfFrames - 1;
+        }
         spriteData.current = {
           frames: [],
           meta: {
@@ -155,6 +197,9 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       spriteData.current.frames = Array.isArray(json.frames) ? json.frames : parseFrames();
       totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
       textureData.current = _spriteTexture;
+      if (playBackwards) {
+        currentFrame.current = totalFrames.current - 1;
+      }
       const {
         w,
         h
@@ -165,6 +210,23 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
         matRef.current.map = _spriteTexture;
       }
     }
+
+    // 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
+          }
+        });
+      }
+    }
     _spriteTexture.premultiplyAlpha = false;
     setSpriteTexture(_spriteTexture);
   };
@@ -239,7 +301,6 @@ 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;
-    setJsonReady(true);
     if (onStart) onStart({
       currentFrameName: frameName,
       currentFrame: currentFrame.current
@@ -263,8 +324,17 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     } = getFirstItem(frames).sourceSize;
     const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : [];
     const _endFrame = endFrame || spriteFrames.length - 1;
-    if (currentFrame.current > _endFrame) {
+    var _offset = offset === undefined ? state.current : offset;
+
+    // conditionals to support backwards play
+    var endCondition = playBackwards ? currentFrame.current < 0 : currentFrame.current > _endFrame;
+    var onStartCondition = playBackwards ? currentFrame.current === _endFrame : currentFrame.current === 0;
+    var manualProgressEndCondition = playBackwards ? currentFrame.current < 0 : currentFrame.current >= _endFrame;
+    if (endCondition) {
       currentFrame.current = loop ? startFrame !== null && startFrame !== void 0 ? startFrame : 0 : 0;
+      if (playBackwards) {
+        currentFrame.current = _endFrame;
+      }
       if (loop) {
         onLoopEnd == null || onLoopEnd({
           currentFrameName: frameName,
@@ -275,7 +345,10 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
           currentFrameName: frameName,
           currentFrame: currentFrame.current
         });
-        hasEnded.current = resetOnEnd ? false : true;
+        if (!_offset) {
+          console.log('will end');
+        }
+        state.hasEnded = resetOnEnd ? false : true;
         if (resetOnEnd) {
           pauseRef.current = true;
           //calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames)
@@ -283,18 +356,44 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       }
 
       if (!loop) return;
+    } else if (onStartCondition) {
+      onStart == null || onStart({
+        currentFrameName: frameName,
+        currentFrame: currentFrame.current
+      });
     }
+
+    // for manual update
+    if (_offset !== undefined && manualProgressEndCondition) {
+      if (softEnd.current === false) {
+        onEnd == null || onEnd({
+          currentFrameName: frameName,
+          currentFrame: currentFrame.current
+        });
+        softEnd.current = true;
+      }
+    } else {
+      // same for start?
+      softEnd.current = false;
+    }
+
+    // clock to limit fps
     if (diff <= fpsInterval) return;
     timerOffset.current = now - diff % fpsInterval;
     calculateFinalPosition(frameW, frameH, metaInfo, spriteFrames);
-    currentFrame.current += 1;
   };
   const calculateFinalPosition = (frameW, frameH, metaInfo, spriteFrames) => {
+    // get the manual update offset to find the next frame
+    var _offset = offset === undefined ? state.current : offset;
+    const targetFrame = currentFrame.current;
     let finalValX = 0;
     let finalValY = 0;
     calculateAspectRatio(frameW, frameH);
     const framesH = (metaInfo.w - 1) / frameW;
     const framesV = (metaInfo.h - 1) / frameH;
+    if (!spriteFrames[targetFrame]) {
+      return;
+    }
     const {
       frame: {
         x: frameX,
@@ -304,13 +403,35 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
         w: originalSizeX,
         h: originalSizeY
       }
-    } = spriteFrames[currentFrame.current];
+    } = 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 manual update is active
+    if (_offset !== undefined && _offset !== null) {
+      // Calculate the frame index, based on offset given from the provider
+      let frameIndex = Math.floor(_offset * spriteFrames.length);
+
+      // 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
+      }
+
+      currentFrame.current = frameIndex;
+    } else {
+      // auto update
+      if (playBackwards) {
+        currentFrame.current -= 1;
+      } else {
+        currentFrame.current += 1;
+      }
+    }
   };
 
   // *** Warning! It runs on every frame! ***
@@ -322,7 +443,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     if (pauseRef.current) {
       return;
     }
-    if (!hasEnded.current && (autoPlay || play)) {
+    if (!state.hasEnded && (autoPlay || play)) {
       runAnimation();
       onFrame && onFrame({
         currentFrameName: currentFrameName.current,
@@ -345,9 +466,11 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
       };
     }
   };
-  return /*#__PURE__*/React.createElement("group", _extends({
-    ref: fref
-  }, props), /*#__PURE__*/React.createElement(React.Suspense, {
+  return /*#__PURE__*/React.createElement("group", _extends({}, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(context.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
   }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {
     ref: spriteRef,
@@ -358,9 +481,8 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     map: spriteTexture,
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
-  })), !displayAsSprite && /*#__PURE__*/React.createElement("mesh", {
-    ref: spriteRef,
-    scale: aspect
+  })), !displayAsSprite && /*#__PURE__*/React.createElement(Instances, {
+    limit: maxItems // Optional: max amount of items (for calculating buffer size)
   }, /*#__PURE__*/React.createElement("planeGeometry", {
     args: [1, 1]
   }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
@@ -370,7 +492,25 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     map: spriteTexture,
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
-  }))), children);
+  }), (instanceItems !== null && instanceItems !== void 0 ? instanceItems : [0]).map((item, index) => {
+    const texture = spriteTexture.clone();
+    if (matRef.current && frameBuffer.current[index]) {
+      texture.offset.set(frameBuffer.current[index].offset.x, frameBuffer.current[index].offset.y); // Set the offset for this item
+    }
+
+    return /*#__PURE__*/React.createElement(Instance, {
+      key: index,
+      ref: spriteRef,
+      position: item,
+      scale: aspect
+    }, /*#__PURE__*/React.createElement("meshBasicMaterial", {
+      toneMapped: false,
+      side: THREE.DoubleSide,
+      map: texture,
+      transparent: true,
+      alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
+    }));
+  }))), children));
 });
 
-export { SpriteAnimator };
+export { SpriteAnimator, useSpriteAnimator };

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),l=require("./Edges.cjs.js"),x=require("./Outlines.cjs.js"),q=require("./Trail.cjs.js"),d=require("./Sampler.cjs.js"),m=require("./ComputedAttribute.cjs.js"),h=require("./Clone.cjs.js"),C=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),T=require("./Gltf.cjs.js"),f=require("./AsciiRenderer.cjs.js"),P=require("./Splat.cjs.js"),b=require("./OrthographicCamera.cjs.js"),B=require("./PerspectiveCamera.cjs.js"),g=require("./CubeCamera.cjs.js"),v=require("./DeviceOrientationControls.cjs.js"),F=require("./FlyControls.cjs.js"),A=require("./MapControls.cjs.js"),L=require("./OrbitControls.cjs.js"),D=require("./TrackballControls.cjs.js"),k=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),G=require("./PointerLockControls.cjs.js"),R=require("./FirstPersonControls.cjs.js"),w=require("./CameraControls.cjs.js"),z=require("./FaceControls.cjs.js"),O=require("./MotionPathControls.cjs.js"),y=require("./GizmoHelper.cjs.js"),I=require("./GizmoViewcube.cjs.js"),H=require("./GizmoViewport.cjs.js"),V=require("./Grid.cjs.js"),W=require("./useCubeTexture.cjs.js"),Q=require("./useFBX.cjs.js"),X=require("./useGLTF.cjs.js"),K=require("./useKTX2.cjs.js"),N=require("./useProgress.cjs.js"),U=require("./useTexture.cjs.js"),_=require("./useVideoTexture.cjs.js"),J=require("./useFont.cjs.js"),Y=require("./Stats.cjs.js"),Z=require("./StatsGl.cjs.js"),$=require("./useDepthBuffer.cjs.js"),ee=require("./useAspect.cjs.js"),re=require("./useCamera.cjs.js"),se=require("./useDetectGPU.cjs.js"),te=require("./useHelper.cjs.js"),oe=require("./useBVH.cjs.js"),ie=require("./useContextBridge.cjs.js"),ae=require("./useAnimations.cjs.js"),ue=require("./useFBO.cjs.js"),ce=require("./useIntersect.cjs.js"),ne=require("./useBoxProjectedEnv.cjs.js"),je=require("./BBAnchor.cjs.js"),pe=require("./useTrailTexture.cjs.js"),le=require("./useCubeCamera.cjs.js"),xe=require("./Example.cjs.js"),qe=require("./SpriteAnimator.cjs.js"),de=require("./FaceLandmarker.cjs.js"),me=require("./CurveModifier.cjs.js"),he=require("./MeshDistortMaterial.cjs.js"),Ce=require("./MeshWobbleMaterial.cjs.js"),Me=require("./MeshReflectorMaterial.cjs.js"),Se=require("./MeshRefractionMaterial.cjs.js"),Te=require("./MeshTransmissionMaterial.cjs.js"),fe=require("./MeshDiscardMaterial.cjs.js"),Pe=require("./PointMaterial.cjs.js"),be=require("./shaderMaterial.cjs.js"),Be=require("./softShadows.cjs.js"),ge=require("./shapes.cjs.js"),ve=require("./Facemesh.cjs.js"),Fe=require("./RoundedBox.cjs.js"),Ae=require("./ScreenQuad.cjs.js"),Le=require("./Center.cjs.js"),De=require("./Resize.cjs.js"),ke=require("./Bounds.cjs.js"),Ee=require("./CameraShake.cjs.js"),Ge=require("./Float.cjs.js"),Re=require("./Stage.cjs.js"),we=require("./Backdrop.cjs.js"),ze=require("./Shadow.cjs.js"),Oe=require("./Caustics.cjs.js"),ye=require("./ContactShadows.cjs.js"),Ie=require("./AccumulativeShadows.cjs.js"),He=require("./Reflector.cjs.js"),Ve=require("./SpotLight.cjs.js"),We=require("./Environment.cjs.js"),Qe=require("./Lightformer.cjs.js"),Xe=require("./Sky.cjs.js"),Ke=require("./Stars.cjs.js"),Ne=require("./Cloud.cjs.js"),Ue=require("./Sparkles.cjs.js"),_e=require("./useEnvironment.cjs.js"),Je=require("./useMatcapTexture.cjs.js"),Ye=require("./useNormalTexture.cjs.js"),Ze=require("./Wireframe.cjs.js"),$e=require("./ShadowAlpha.cjs.js"),er=require("./Points.cjs.js"),rr=require("./Instances.cjs.js"),sr=require("./Segments.cjs.js"),tr=require("./Detailed.cjs.js"),or=require("./Preload.cjs.js"),ir=require("./BakeShadows.cjs.js"),ar=require("./meshBounds.cjs.js"),ur=require("./AdaptiveDpr.cjs.js"),cr=require("./AdaptiveEvents.cjs.js"),nr=require("./PerformanceMonitor.cjs.js"),jr=require("./RenderTexture.cjs.js"),pr=require("./RenderCubeTexture.cjs.js"),lr=require("./Mask.cjs.js"),xr=require("./Hud.cjs.js"),qr=require("./Fisheye.cjs.js"),dr=require("./MeshPortalMaterial.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("@react-three/fiber"),require("react-merge-refs"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("camera-controls"),require("maath"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../helpers/deprecated.cjs.js"),require("../materials/WireframeMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.GradientType=j.GradientType,exports.Image=p.Image,exports.Edges=l.Edges,exports.Outlines=x.Outlines,exports.Trail=q.Trail,exports.useTrail=q.useTrail,exports.Sampler=d.Sampler,exports.useSurfaceSampler=d.useSurfaceSampler,exports.ComputedAttribute=m.ComputedAttribute,exports.Clone=h.Clone,exports.MarchingCube=C.MarchingCube,exports.MarchingCubes=C.MarchingCubes,exports.MarchingPlane=C.MarchingPlane,exports.Decal=M.Decal,exports.Svg=S.Svg,exports.Gltf=T.Gltf,exports.AsciiRenderer=f.AsciiRenderer,exports.Splat=P.Splat,exports.OrthographicCamera=b.OrthographicCamera,exports.PerspectiveCamera=B.PerspectiveCamera,exports.CubeCamera=g.CubeCamera,exports.DeviceOrientationControls=v.DeviceOrientationControls,exports.FlyControls=F.FlyControls,exports.MapControls=A.MapControls,exports.OrbitControls=L.OrbitControls,exports.TrackballControls=D.TrackballControls,exports.ArcballControls=k.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=G.PointerLockControls,exports.FirstPersonControls=R.FirstPersonControls,exports.CameraControls=w.CameraControls,exports.FaceControls=z.FaceControls,exports.useFaceControls=z.useFaceControls,exports.MotionPathControls=O.MotionPathControls,exports.useMotion=O.useMotion,exports.GizmoHelper=y.GizmoHelper,exports.useGizmoContext=y.useGizmoContext,exports.GizmoViewcube=I.GizmoViewcube,exports.GizmoViewport=H.GizmoViewport,exports.Grid=V.Grid,exports.useCubeTexture=W.useCubeTexture,exports.useFBX=Q.useFBX,exports.useGLTF=X.useGLTF,exports.useKTX2=K.useKTX2,exports.useProgress=N.useProgress,exports.IsObject=U.IsObject,exports.useTexture=U.useTexture,exports.useVideoTexture=_.useVideoTexture,exports.useFont=J.useFont,exports.Stats=Y.Stats,exports.StatsGl=Z.StatsGl,exports.useDepthBuffer=$.useDepthBuffer,exports.useAspect=ee.useAspect,exports.useCamera=re.useCamera,exports.useDetectGPU=se.useDetectGPU,exports.useHelper=te.useHelper,exports.Bvh=oe.Bvh,exports.useBVH=oe.useBVH,exports.useContextBridge=ie.useContextBridge,exports.useAnimations=ae.useAnimations,exports.useFBO=ue.useFBO,exports.useIntersect=ce.useIntersect,exports.useBoxProjectedEnv=ne.useBoxProjectedEnv,exports.BBAnchor=je.BBAnchor,exports.useTrailTexture=pe.useTrailTexture,exports.useCubeCamera=le.useCubeCamera,exports.Example=xe.Example,exports.SpriteAnimator=qe.SpriteAnimator,exports.FaceLandmarker=de.FaceLandmarker,exports.FaceLandmarkerDefaults=de.FaceLandmarkerDefaults,exports.useFaceLandmarker=de.useFaceLandmarker,exports.CurveModifier=me.CurveModifier,exports.MeshDistortMaterial=he.MeshDistortMaterial,exports.MeshWobbleMaterial=Ce.MeshWobbleMaterial,exports.MeshReflectorMaterial=Me.MeshReflectorMaterial,exports.MeshRefractionMaterial=Se.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Te.MeshTransmissionMaterial,exports.MeshDiscardMaterial=fe.MeshDiscardMaterial,exports.PointMaterial=Pe.PointMaterial,exports.PointMaterialImpl=Pe.PointMaterialImpl,exports.shaderMaterial=be.shaderMaterial,exports.SoftShadows=Be.SoftShadows,exports.Box=ge.Box,exports.Capsule=ge.Capsule,exports.Circle=ge.Circle,exports.Cone=ge.Cone,exports.Cylinder=ge.Cylinder,exports.Dodecahedron=ge.Dodecahedron,exports.Extrude=ge.Extrude,exports.Icosahedron=ge.Icosahedron,exports.Lathe=ge.Lathe,exports.Octahedron=ge.Octahedron,exports.Plane=ge.Plane,exports.Polyhedron=ge.Polyhedron,exports.Ring=ge.Ring,exports.Shape=ge.Shape,exports.Sphere=ge.Sphere,exports.Tetrahedron=ge.Tetrahedron,exports.Torus=ge.Torus,exports.TorusKnot=ge.TorusKnot,exports.Tube=ge.Tube,exports.Facemesh=ve.Facemesh,exports.FacemeshDatas=ve.FacemeshDatas,exports.FacemeshEye=ve.FacemeshEye,exports.FacemeshEyeDefaults=ve.FacemeshEyeDefaults,exports.RoundedBox=Fe.RoundedBox,exports.ScreenQuad=Ae.ScreenQuad,exports.Center=Le.Center,exports.Resize=De.Resize,exports.Bounds=ke.Bounds,exports.useBounds=ke.useBounds,exports.CameraShake=Ee.CameraShake,exports.Float=Ge.Float,exports.Stage=Re.Stage,exports.Backdrop=we.Backdrop,exports.Shadow=ze.Shadow,exports.Caustics=Oe.Caustics,exports.ContactShadows=ye.ContactShadows,exports.AccumulativeShadows=Ie.AccumulativeShadows,exports.RandomizedLight=Ie.RandomizedLight,exports.accumulativeContext=Ie.accumulativeContext,exports.Reflector=He.Reflector,exports.SpotLight=Ve.SpotLight,exports.SpotLightShadow=Ve.SpotLightShadow,exports.Environment=We.Environment,exports.EnvironmentCube=We.EnvironmentCube,exports.EnvironmentMap=We.EnvironmentMap,exports.EnvironmentPortal=We.EnvironmentPortal,exports.Lightformer=Qe.Lightformer,exports.Sky=Xe.Sky,exports.calcPosFromAngles=Xe.calcPosFromAngles,exports.Stars=Ke.Stars,exports.Cloud=Ne.Cloud,exports.CloudInstance=Ne.CloudInstance,exports.Clouds=Ne.Clouds,exports.Sparkles=Ue.Sparkles,exports.useEnvironment=_e.useEnvironment,exports.useMatcapTexture=Je.useMatcapTexture,exports.useNormalTexture=Ye.useNormalTexture,exports.Wireframe=Ze.Wireframe,exports.ShadowAlpha=$e.ShadowAlpha,exports.Point=er.Point,exports.Points=er.Points,exports.PointsBuffer=er.PointsBuffer,exports.PositionPoint=er.PositionPoint,exports.Instance=rr.Instance,exports.Instances=rr.Instances,exports.Merged=rr.Merged,exports.Segment=sr.Segment,exports.SegmentObject=sr.SegmentObject,exports.Segments=sr.Segments,exports.Detailed=tr.Detailed,exports.Preload=or.Preload,exports.BakeShadows=ir.BakeShadows,exports.meshBounds=ar.meshBounds,exports.AdaptiveDpr=ur.AdaptiveDpr,exports.AdaptiveEvents=cr.AdaptiveEvents,exports.PerformanceMonitor=nr.PerformanceMonitor,exports.usePerformanceMonitor=nr.usePerformanceMonitor,exports.RenderTexture=jr.RenderTexture,exports.RenderCubeTexture=pr.RenderCubeTexture,exports.Mask=lr.Mask,exports.useMask=lr.useMask,exports.Hud=xr.Hud,exports.Fisheye=qr.Fisheye,exports.MeshPortalMaterial=dr.MeshPortalMaterial;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),a=require("./PositionalAudio.cjs.js"),u=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),l=require("./Edges.cjs.js"),x=require("./Outlines.cjs.js"),q=require("./Trail.cjs.js"),d=require("./Sampler.cjs.js"),m=require("./ComputedAttribute.cjs.js"),h=require("./Clone.cjs.js"),C=require("./MarchingCubes.cjs.js"),M=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),T=require("./Gltf.cjs.js"),f=require("./AsciiRenderer.cjs.js"),P=require("./Splat.cjs.js"),b=require("./OrthographicCamera.cjs.js"),B=require("./PerspectiveCamera.cjs.js"),g=require("./CubeCamera.cjs.js"),v=require("./DeviceOrientationControls.cjs.js"),F=require("./FlyControls.cjs.js"),A=require("./MapControls.cjs.js"),L=require("./OrbitControls.cjs.js"),D=require("./TrackballControls.cjs.js"),k=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),G=require("./PointerLockControls.cjs.js"),R=require("./FirstPersonControls.cjs.js"),w=require("./CameraControls.cjs.js"),z=require("./FaceControls.cjs.js"),O=require("./MotionPathControls.cjs.js"),y=require("./GizmoHelper.cjs.js"),I=require("./GizmoViewcube.cjs.js"),H=require("./GizmoViewport.cjs.js"),V=require("./Grid.cjs.js"),W=require("./useCubeTexture.cjs.js"),Q=require("./useFBX.cjs.js"),X=require("./useGLTF.cjs.js"),K=require("./useKTX2.cjs.js"),N=require("./useProgress.cjs.js"),U=require("./useTexture.cjs.js"),_=require("./useVideoTexture.cjs.js"),J=require("./useFont.cjs.js"),Y=require("./Stats.cjs.js"),Z=require("./StatsGl.cjs.js"),$=require("./useDepthBuffer.cjs.js"),ee=require("./useAspect.cjs.js"),re=require("./useCamera.cjs.js"),se=require("./useDetectGPU.cjs.js"),te=require("./useHelper.cjs.js"),oe=require("./useBVH.cjs.js"),ie=require("./useContextBridge.cjs.js"),ae=require("./useAnimations.cjs.js"),ue=require("./useFBO.cjs.js"),ce=require("./useIntersect.cjs.js"),ne=require("./useBoxProjectedEnv.cjs.js"),je=require("./BBAnchor.cjs.js"),pe=require("./useTrailTexture.cjs.js"),le=require("./useCubeCamera.cjs.js"),xe=require("./Example.cjs.js"),qe=require("./SpriteAnimator.cjs.js"),de=require("./FaceLandmarker.cjs.js"),me=require("./CurveModifier.cjs.js"),he=require("./MeshDistortMaterial.cjs.js"),Ce=require("./MeshWobbleMaterial.cjs.js"),Me=require("./MeshReflectorMaterial.cjs.js"),Se=require("./MeshRefractionMaterial.cjs.js"),Te=require("./MeshTransmissionMaterial.cjs.js"),fe=require("./MeshDiscardMaterial.cjs.js"),Pe=require("./PointMaterial.cjs.js"),be=require("./shaderMaterial.cjs.js"),Be=require("./softShadows.cjs.js"),ge=require("./shapes.cjs.js"),ve=require("./Facemesh.cjs.js"),Fe=require("./RoundedBox.cjs.js"),Ae=require("./ScreenQuad.cjs.js"),Le=require("./Center.cjs.js"),De=require("./Resize.cjs.js"),ke=require("./Bounds.cjs.js"),Ee=require("./CameraShake.cjs.js"),Ge=require("./Float.cjs.js"),Re=require("./Stage.cjs.js"),we=require("./Backdrop.cjs.js"),ze=require("./Shadow.cjs.js"),Oe=require("./Caustics.cjs.js"),ye=require("./ContactShadows.cjs.js"),Ie=require("./AccumulativeShadows.cjs.js"),He=require("./Reflector.cjs.js"),Ve=require("./SpotLight.cjs.js"),We=require("./Environment.cjs.js"),Qe=require("./Lightformer.cjs.js"),Xe=require("./Sky.cjs.js"),Ke=require("./Stars.cjs.js"),Ne=require("./Cloud.cjs.js"),Ue=require("./Sparkles.cjs.js"),_e=require("./useEnvironment.cjs.js"),Je=require("./useMatcapTexture.cjs.js"),Ye=require("./useNormalTexture.cjs.js"),Ze=require("./Wireframe.cjs.js"),$e=require("./ShadowAlpha.cjs.js"),er=require("./Points.cjs.js"),rr=require("./Instances.cjs.js"),sr=require("./Segments.cjs.js"),tr=require("./Detailed.cjs.js"),or=require("./Preload.cjs.js"),ir=require("./BakeShadows.cjs.js"),ar=require("./meshBounds.cjs.js"),ur=require("./AdaptiveDpr.cjs.js"),cr=require("./AdaptiveEvents.cjs.js"),nr=require("./PerformanceMonitor.cjs.js"),jr=require("./RenderTexture.cjs.js"),pr=require("./RenderCubeTexture.cjs.js"),lr=require("./Mask.cjs.js"),xr=require("./Hud.cjs.js"),qr=require("./Fisheye.cjs.js"),dr=require("./MeshPortalMaterial.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("three"),require("@react-three/fiber"),require("react-merge-refs"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("../helpers/constants.cjs.js"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("camera-controls"),require("maath"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("stats-gl"),require("detect-gpu"),require("three-mesh-bvh"),require("react-composer"),require("../helpers/deprecated.cjs.js"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../materials/DiscardMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("uuid"),require("../materials/WireframeMaterial.cjs.js"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=a.PositionalAudio,exports.Text=u.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.GradientType=j.GradientType,exports.Image=p.Image,exports.Edges=l.Edges,exports.Outlines=x.Outlines,exports.Trail=q.Trail,exports.useTrail=q.useTrail,exports.Sampler=d.Sampler,exports.useSurfaceSampler=d.useSurfaceSampler,exports.ComputedAttribute=m.ComputedAttribute,exports.Clone=h.Clone,exports.MarchingCube=C.MarchingCube,exports.MarchingCubes=C.MarchingCubes,exports.MarchingPlane=C.MarchingPlane,exports.Decal=M.Decal,exports.Svg=S.Svg,exports.Gltf=T.Gltf,exports.AsciiRenderer=f.AsciiRenderer,exports.Splat=P.Splat,exports.OrthographicCamera=b.OrthographicCamera,exports.PerspectiveCamera=B.PerspectiveCamera,exports.CubeCamera=g.CubeCamera,exports.DeviceOrientationControls=v.DeviceOrientationControls,exports.FlyControls=F.FlyControls,exports.MapControls=A.MapControls,exports.OrbitControls=L.OrbitControls,exports.TrackballControls=D.TrackballControls,exports.ArcballControls=k.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=G.PointerLockControls,exports.FirstPersonControls=R.FirstPersonControls,exports.CameraControls=w.CameraControls,exports.FaceControls=z.FaceControls,exports.useFaceControls=z.useFaceControls,exports.MotionPathControls=O.MotionPathControls,exports.useMotion=O.useMotion,exports.GizmoHelper=y.GizmoHelper,exports.useGizmoContext=y.useGizmoContext,exports.GizmoViewcube=I.GizmoViewcube,exports.GizmoViewport=H.GizmoViewport,exports.Grid=V.Grid,exports.useCubeTexture=W.useCubeTexture,exports.useFBX=Q.useFBX,exports.useGLTF=X.useGLTF,exports.useKTX2=K.useKTX2,exports.useProgress=N.useProgress,exports.IsObject=U.IsObject,exports.useTexture=U.useTexture,exports.useVideoTexture=_.useVideoTexture,exports.useFont=J.useFont,exports.Stats=Y.Stats,exports.StatsGl=Z.StatsGl,exports.useDepthBuffer=$.useDepthBuffer,exports.useAspect=ee.useAspect,exports.useCamera=re.useCamera,exports.useDetectGPU=se.useDetectGPU,exports.useHelper=te.useHelper,exports.Bvh=oe.Bvh,exports.useBVH=oe.useBVH,exports.useContextBridge=ie.useContextBridge,exports.useAnimations=ae.useAnimations,exports.useFBO=ue.useFBO,exports.useIntersect=ce.useIntersect,exports.useBoxProjectedEnv=ne.useBoxProjectedEnv,exports.BBAnchor=je.BBAnchor,exports.useTrailTexture=pe.useTrailTexture,exports.useCubeCamera=le.useCubeCamera,exports.Example=xe.Example,exports.SpriteAnimator=qe.SpriteAnimator,exports.useSpriteAnimator=qe.useSpriteAnimator,exports.FaceLandmarker=de.FaceLandmarker,exports.FaceLandmarkerDefaults=de.FaceLandmarkerDefaults,exports.useFaceLandmarker=de.useFaceLandmarker,exports.CurveModifier=me.CurveModifier,exports.MeshDistortMaterial=he.MeshDistortMaterial,exports.MeshWobbleMaterial=Ce.MeshWobbleMaterial,exports.MeshReflectorMaterial=Me.MeshReflectorMaterial,exports.MeshRefractionMaterial=Se.MeshRefractionMaterial,exports.MeshTransmissionMaterial=Te.MeshTransmissionMaterial,exports.MeshDiscardMaterial=fe.MeshDiscardMaterial,exports.PointMaterial=Pe.PointMaterial,exports.PointMaterialImpl=Pe.PointMaterialImpl,exports.shaderMaterial=be.shaderMaterial,exports.SoftShadows=Be.SoftShadows,exports.Box=ge.Box,exports.Capsule=ge.Capsule,exports.Circle=ge.Circle,exports.Cone=ge.Cone,exports.Cylinder=ge.Cylinder,exports.Dodecahedron=ge.Dodecahedron,exports.Extrude=ge.Extrude,exports.Icosahedron=ge.Icosahedron,exports.Lathe=ge.Lathe,exports.Octahedron=ge.Octahedron,exports.Plane=ge.Plane,exports.Polyhedron=ge.Polyhedron,exports.Ring=ge.Ring,exports.Shape=ge.Shape,exports.Sphere=ge.Sphere,exports.Tetrahedron=ge.Tetrahedron,exports.Torus=ge.Torus,exports.TorusKnot=ge.TorusKnot,exports.Tube=ge.Tube,exports.Facemesh=ve.Facemesh,exports.FacemeshDatas=ve.FacemeshDatas,exports.FacemeshEye=ve.FacemeshEye,exports.FacemeshEyeDefaults=ve.FacemeshEyeDefaults,exports.RoundedBox=Fe.RoundedBox,exports.ScreenQuad=Ae.ScreenQuad,exports.Center=Le.Center,exports.Resize=De.Resize,exports.Bounds=ke.Bounds,exports.useBounds=ke.useBounds,exports.CameraShake=Ee.CameraShake,exports.Float=Ge.Float,exports.Stage=Re.Stage,exports.Backdrop=we.Backdrop,exports.Shadow=ze.Shadow,exports.Caustics=Oe.Caustics,exports.ContactShadows=ye.ContactShadows,exports.AccumulativeShadows=Ie.AccumulativeShadows,exports.RandomizedLight=Ie.RandomizedLight,exports.accumulativeContext=Ie.accumulativeContext,exports.Reflector=He.Reflector,exports.SpotLight=Ve.SpotLight,exports.SpotLightShadow=Ve.SpotLightShadow,exports.Environment=We.Environment,exports.EnvironmentCube=We.EnvironmentCube,exports.EnvironmentMap=We.EnvironmentMap,exports.EnvironmentPortal=We.EnvironmentPortal,exports.Lightformer=Qe.Lightformer,exports.Sky=Xe.Sky,exports.calcPosFromAngles=Xe.calcPosFromAngles,exports.Stars=Ke.Stars,exports.Cloud=Ne.Cloud,exports.CloudInstance=Ne.CloudInstance,exports.Clouds=Ne.Clouds,exports.Sparkles=Ue.Sparkles,exports.useEnvironment=_e.useEnvironment,exports.useMatcapTexture=Je.useMatcapTexture,exports.useNormalTexture=Ye.useNormalTexture,exports.Wireframe=Ze.Wireframe,exports.ShadowAlpha=$e.ShadowAlpha,exports.Point=er.Point,exports.Points=er.Points,exports.PointsBuffer=er.PointsBuffer,exports.PositionPoint=er.PositionPoint,exports.Instance=rr.Instance,exports.Instances=rr.Instances,exports.Merged=rr.Merged,exports.Segment=sr.Segment,exports.SegmentObject=sr.SegmentObject,exports.Segments=sr.Segments,exports.Detailed=tr.Detailed,exports.Preload=or.Preload,exports.BakeShadows=ir.BakeShadows,exports.meshBounds=ar.meshBounds,exports.AdaptiveDpr=ur.AdaptiveDpr,exports.AdaptiveEvents=cr.AdaptiveEvents,exports.PerformanceMonitor=nr.PerformanceMonitor,exports.usePerformanceMonitor=nr.usePerformanceMonitor,exports.RenderTexture=jr.RenderTexture,exports.RenderCubeTexture=pr.RenderCubeTexture,exports.Mask=lr.Mask,exports.useMask=lr.useMask,exports.Hud=xr.Hud,exports.Fisheye=qr.Fisheye,exports.MeshPortalMaterial=dr.MeshPortalMaterial;

package/core/index.js

@@ -66,7 +66,7 @@ export { BBAnchor } from './BBAnchor.js';
 export { useTrailTexture } from './useTrailTexture.js';
 export { useCubeCamera } from './useCubeCamera.js';
 export { Example } from './Example.js';
-export { SpriteAnimator } from './SpriteAnimator.js';
+export { SpriteAnimator, useSpriteAnimator } from './SpriteAnimator.js';
 export { FaceLandmarker, FaceLandmarkerDefaults, useFaceLandmarker } from './FaceLandmarker.js';
 export { CurveModifier } from './CurveModifier.js';
 export { MeshDistortMaterial } from './MeshDistortMaterial.js';
@@ -142,6 +142,8 @@ import '../helpers/useEffectfulState.js';
 import 'stats-gl';
 import 'detect-gpu';
 import 'three-mesh-bvh';
+import 'react-composer';
+import '../helpers/deprecated.js';
 import '../materials/BlurPass.js';
 import '../materials/ConvolutionMaterial.js';
 import '../materials/MeshReflectorMaterial.js';
@@ -150,6 +152,4 @@ import '../materials/DiscardMaterial.js';
 import '../helpers/environment-assets.js';
 import '../materials/SpotLightMaterial.js';
 import 'uuid';
-import '../helpers/deprecated.js';
 import '../materials/WireframeMaterial.js';
-import 'react-composer';