@react-three/drei 9.69.0 → 9.69.2

package/README.md

@@ -105,7 +105,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#html">Html</a></li>
           <li><a href="#cycleraycast">CycleRaycast</a></li>
           <li><a href="#select">Select</a></li>
-          <li><a href="#spriteanimator">Sprite Animator</a></li>
+          <li><a href="#sprite-animator">Sprite Animator</a></li>
           <li><a href="#stats">Stats</a></li>
           <li><a href="#wireframe">Wireframe</a></li>
           <li><a href="#usedepthbuffer">useDepthBuffer</a></li>
@@ -2096,8 +2096,6 @@ type Props = {
   fps?: number
   /** The frame identifier to use, has to be one of animationNames */
   frameName?: string
-  /** The scale factor of the aspect ratio */
-  scaleFactor?: number
   /** The URL of the texture JSON (if using JSON-Array or JSON-Hash) */
   textureDataURL?: string
   /** The URL of the texture image */
@@ -2122,12 +2120,20 @@ type Props = {
   play?: boolean
   /** Control when the animation pauses */
   pause?: boolean
+  /** Whether or not the Sprite should flip sides on the x-axis */
+  flipX?: boolean
+  /** Sets the alpha value to be used when running an alpha test. https://threejs.org/docs/#api/en/materials/Material.alphaTest */
+  alphaTest?: number
 }
 ```
 
 The SpriteAnimator component provided by drei is a powerful tool for animating sprites in a simple and efficient manner. It allows you to create sprite animations by cycling through a sequence of frames from a sprite sheet image or JSON data.
+
 Notes:
-The SpriteAnimator component internally uses the useFrame hook from react-three-fiber (r3f) for efficient frame updates and rendering.
+
+- The SpriteAnimator component internally uses the useFrame hook from react-three-fiber (r3f) for efficient frame updates and rendering.
+- The sprites should contain equal size frames
+- Trimming of spritesheet frames is not yet supported
 
 ```jsx
 <SpriteAnimator

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

package/core/SpriteAnimator.d.ts

@@ -4,8 +4,6 @@ export declare type SpriteAnimatorProps = {
     endFrame?: number;
     fps?: number;
     frameName?: string;
-    scaleFactor?: number;
-    maxScale?: number;
     textureDataURL?: string;
     textureImageURL: string;
     loop?: boolean;

package/core/SpriteAnimator.js

@@ -7,8 +7,6 @@ const SpriteAnimator = ({
   endFrame,
   fps,
   frameName,
-  scaleFactor,
-  maxScale,
   textureDataURL,
   textureImageURL,
   loop,
@@ -26,7 +24,7 @@ const SpriteAnimator = ({
   children,
   ...props
 }, fref) => {
-  const v = useThree(state => state.viewport);
+  useThree(state => state.viewport);
   const spriteData = React.useRef(null);
   const [isJsonReady, setJsonReady] = React.useState(false);
   const matRef = React.useRef();
@@ -39,7 +37,6 @@ const SpriteAnimator = ({
   const [spriteTexture, setSpriteTexture] = React.useState(new THREE.Texture());
   const totalFrames = React.useRef(0);
   const [aspect, setAspect] = React.useState([1, 1, 1]);
-  const aspectFactor = scaleFactor || 0.1;
   const flipOffset = flipX ? -1 : 1;
 
   function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
@@ -53,23 +50,10 @@ const SpriteAnimator = ({
     });
   }
 
-  const calculateAspectRatio = (width, height, factor) => {
-    const adaptedHeight = height * (v.aspect > width / height ? v.width / width : v.height / height);
-    const adaptedWidth = width * (v.aspect > width / height ? v.width / width : v.height / height);
-    const scaleX = adaptedWidth * factor;
-    const scaleY = adaptedHeight * factor;
-    const currentMaxScale = maxScale !== null && maxScale !== void 0 ? maxScale : 1; // Calculate the maximum scale based on the aspect ratio and max scale limit
-
-    let finalMaxScaleW = Math.min(currentMaxScale, scaleX);
-    let finalMaxScaleH = Math.min(currentMaxScale, scaleY); // Ensure that scaleX and scaleY do not exceed the max scale while maintaining aspect ratio
-
-    if (scaleX > currentMaxScale) {
-      finalMaxScaleW = currentMaxScale;
-      finalMaxScaleH = scaleY / scaleX * currentMaxScale;
-    }
-
-    spriteRef.current.scale.set(finalMaxScaleW, finalMaxScaleH, 1);
-    return [finalMaxScaleW, finalMaxScaleH, 1];
+  const calculateAspectRatio = (width, height) => {
+    const aspectRatio = height / width;
+    spriteRef.current.scale.set(1, aspectRatio, 1);
+    return [1, aspectRatio, 1];
   }; // initial loads
 
 
@@ -156,7 +140,7 @@ const SpriteAnimator = ({
         w,
         h
       } = getFirstItem(json.frames).sourceSize;
-      const aspect = calculateAspectRatio(w, h, aspectFactor);
+      const aspect = calculateAspectRatio(w, h);
       setAspect(aspect);
 
       if (matRef.current) {
@@ -284,7 +268,7 @@ const SpriteAnimator = ({
 
     if (diff <= fpsInterval) return;
     timerOffset.current = now - diff % fpsInterval;
-    calculateAspectRatio(frameW, frameH, aspectFactor);
+    calculateAspectRatio(frameW, frameH);
     const framesH = (metaInfo.w - 1) / frameW;
     const framesV = (metaInfo.h - 1) / frameH;
     const {
@@ -347,9 +331,9 @@ const SpriteAnimator = ({
     ref: spriteRef,
     scale: aspect
   }, /*#__PURE__*/React.createElement("spriteMaterial", {
+    toneMapped: false,
     ref: matRef,
     map: spriteTexture,
-    premultipliedAlpha: false,
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
   }))), children);

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"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),q=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),M=require("./Svg.cjs.js"),S=require("./Gltf.cjs.js"),T=require("./AsciiRenderer.cjs.js"),b=require("./OrthographicCamera.cjs.js"),f=require("./PerspectiveCamera.cjs.js"),B=require("./CubeCamera.cjs.js"),P=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),A=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),R=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),F=require("./CameraControls.cjs.js"),G=require("./GizmoHelper.cjs.js"),w=require("./GizmoViewcube.cjs.js"),z=require("./GizmoViewport.cjs.js"),O=require("./Grid.cjs.js"),I=require("./useCubeTexture.cjs.js"),H=require("./useFBX.cjs.js"),V=require("./useGLTF.cjs.js"),y=require("./useKTX2.cjs.js"),W=require("./useProgress.cjs.js"),Q=require("./useTexture.cjs.js"),X=require("./useVideoTexture.cjs.js"),K=require("./useFont.cjs.js"),N=require("./Stats.cjs.js"),U=require("./useDepthBuffer.cjs.js"),_=require("./useAspect.cjs.js"),J=require("./useCamera.cjs.js"),Y=require("./useDetectGPU.cjs.js"),Z=require("./useHelper.cjs.js"),$=require("./useBVH.cjs.js"),ee=require("./useContextBridge.cjs.js"),re=require("./useAnimations.cjs.js"),se=require("./useFBO.cjs.js"),te=require("./useIntersect.cjs.js"),oe=require("./useBoxProjectedEnv.cjs.js"),ie=require("./BBAnchor.cjs.js"),ae=require("./useTrailTexture.cjs.js"),ue=require("./useCubeCamera.cjs.js"),ce=require("./Example.cjs.js"),ne=require("./CurveModifier.cjs.js"),je=require("./MeshDistortMaterial.cjs.js"),pe=require("./MeshWobbleMaterial.cjs.js"),xe=require("./MeshReflectorMaterial.cjs.js"),le=require("./MeshRefractionMaterial.cjs.js"),qe=require("./MeshTransmissionMaterial.cjs.js"),de=require("./MeshDiscardMaterial.cjs.js"),me=require("./PointMaterial.cjs.js"),he=require("./shaderMaterial.cjs.js"),Ce=require("./softShadows.cjs.js"),Me=require("./shapes.cjs.js"),Se=require("./Facemesh.cjs.js"),Te=require("./RoundedBox.cjs.js"),be=require("./ScreenQuad.cjs.js"),fe=require("./Center.cjs.js"),Be=require("./Resize.cjs.js"),Pe=require("./Bounds.cjs.js"),ge=require("./CameraShake.cjs.js"),ve=require("./Float.cjs.js"),Ae=require("./Stage.cjs.js"),Le=require("./Backdrop.cjs.js"),De=require("./Shadow.cjs.js"),Ee=require("./Caustics.cjs.js"),Re=require("./ContactShadows.cjs.js"),ke=require("./AccumulativeShadows.cjs.js"),Fe=require("./Reflector.cjs.js"),Ge=require("./SpotLight.cjs.js"),we=require("./Environment.cjs.js"),ze=require("./Lightformer.cjs.js"),Oe=require("./Sky.cjs.js"),Ie=require("./Stars.cjs.js"),He=require("./Cloud.cjs.js"),Ve=require("./Sparkles.cjs.js"),ye=require("./useEnvironment.cjs.js"),We=require("./useMatcapTexture.cjs.js"),Qe=require("./useNormalTexture.cjs.js"),Xe=require("./Wireframe.cjs.js"),Ke=require("./Points.cjs.js"),Ne=require("./Instances.cjs.js"),Ue=require("./Segments.cjs.js"),_e=require("./Detailed.cjs.js"),Je=require("./Preload.cjs.js"),Ye=require("./BakeShadows.cjs.js"),Ze=require("./meshBounds.cjs.js"),$e=require("./AdaptiveDpr.cjs.js"),er=require("./AdaptiveEvents.cjs.js"),rr=require("./PerformanceMonitor.cjs.js"),sr=require("./RenderTexture.cjs.js"),tr=require("./Mask.cjs.js"),or=require("./Hud.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("camera-controls"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),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("../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.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=q.Sampler,exports.useSurfaceSampler=q.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=m.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=M.Svg,exports.Gltf=S.Gltf,exports.AsciiRenderer=T.AsciiRenderer,exports.OrthographicCamera=b.OrthographicCamera,exports.PerspectiveCamera=f.PerspectiveCamera,exports.CubeCamera=B.CubeCamera,exports.DeviceOrientationControls=P.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=A.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=R.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.CameraControls=F.CameraControls,exports.GizmoHelper=G.GizmoHelper,exports.useGizmoContext=G.useGizmoContext,exports.GizmoViewcube=w.GizmoViewcube,exports.GizmoViewport=z.GizmoViewport,exports.Grid=O.Grid,exports.useCubeTexture=I.useCubeTexture,exports.useFBX=H.useFBX,exports.useGLTF=V.useGLTF,exports.useKTX2=y.useKTX2,exports.useProgress=W.useProgress,exports.IsObject=Q.IsObject,exports.useTexture=Q.useTexture,exports.useVideoTexture=X.useVideoTexture,exports.useFont=K.useFont,exports.Stats=N.Stats,exports.useDepthBuffer=U.useDepthBuffer,exports.useAspect=_.useAspect,exports.useCamera=J.useCamera,exports.useDetectGPU=Y.useDetectGPU,exports.useHelper=Z.useHelper,exports.Bvh=$.Bvh,exports.useBVH=$.useBVH,exports.useContextBridge=ee.useContextBridge,exports.useAnimations=re.useAnimations,exports.useFBO=se.useFBO,exports.useIntersect=te.useIntersect,exports.useBoxProjectedEnv=oe.useBoxProjectedEnv,exports.BBAnchor=ie.BBAnchor,exports.useTrailTexture=ae.useTrailTexture,exports.useCubeCamera=ue.useCubeCamera,exports.Example=ce.Example,exports.CurveModifier=ne.CurveModifier,exports.MeshDistortMaterial=je.MeshDistortMaterial,exports.MeshWobbleMaterial=pe.MeshWobbleMaterial,exports.MeshReflectorMaterial=xe.MeshReflectorMaterial,exports.MeshRefractionMaterial=le.MeshRefractionMaterial,exports.MeshTransmissionMaterial=qe.MeshTransmissionMaterial,exports.MeshDiscardMaterial=de.MeshDiscardMaterial,exports.PointMaterial=me.PointMaterial,exports.PointMaterialImpl=me.PointMaterialImpl,exports.shaderMaterial=he.shaderMaterial,exports.SoftShadows=Ce.SoftShadows,exports.Box=Me.Box,exports.Capsule=Me.Capsule,exports.Circle=Me.Circle,exports.Cone=Me.Cone,exports.Cylinder=Me.Cylinder,exports.Dodecahedron=Me.Dodecahedron,exports.Extrude=Me.Extrude,exports.Icosahedron=Me.Icosahedron,exports.Lathe=Me.Lathe,exports.Octahedron=Me.Octahedron,exports.Plane=Me.Plane,exports.Polyhedron=Me.Polyhedron,exports.Ring=Me.Ring,exports.Shape=Me.Shape,exports.Sphere=Me.Sphere,exports.Tetrahedron=Me.Tetrahedron,exports.Torus=Me.Torus,exports.TorusKnot=Me.TorusKnot,exports.Tube=Me.Tube,exports.Facemesh=Se.Facemesh,exports.FacemeshDatas=Se.FacemeshDatas,exports.RoundedBox=Te.RoundedBox,exports.ScreenQuad=be.ScreenQuad,exports.Center=fe.Center,exports.Resize=Be.Resize,exports.Bounds=Pe.Bounds,exports.useBounds=Pe.useBounds,exports.CameraShake=ge.CameraShake,exports.Float=ve.Float,exports.Stage=Ae.Stage,exports.Backdrop=Le.Backdrop,exports.Shadow=De.Shadow,exports.Caustics=Ee.Caustics,exports.ContactShadows=Re.ContactShadows,exports.AccumulativeShadows=ke.AccumulativeShadows,exports.RandomizedLight=ke.RandomizedLight,exports.accumulativeContext=ke.accumulativeContext,exports.Reflector=Fe.Reflector,exports.SpotLight=Ge.SpotLight,exports.SpotLightShadow=Ge.SpotLightShadow,exports.Environment=we.Environment,exports.EnvironmentCube=we.EnvironmentCube,exports.EnvironmentMap=we.EnvironmentMap,exports.EnvironmentPortal=we.EnvironmentPortal,exports.Lightformer=ze.Lightformer,exports.Sky=Oe.Sky,exports.calcPosFromAngles=Oe.calcPosFromAngles,exports.Stars=Ie.Stars,exports.Cloud=He.Cloud,exports.Sparkles=Ve.Sparkles,exports.useEnvironment=ye.useEnvironment,exports.useMatcapTexture=We.useMatcapTexture,exports.useNormalTexture=Qe.useNormalTexture,exports.Wireframe=Xe.Wireframe,exports.Point=Ke.Point,exports.Points=Ke.Points,exports.PointsBuffer=Ke.PointsBuffer,exports.PositionPoint=Ke.PositionPoint,exports.Instance=Ne.Instance,exports.Instances=Ne.Instances,exports.Merged=Ne.Merged,exports.Segment=Ue.Segment,exports.SegmentObject=Ue.SegmentObject,exports.Segments=Ue.Segments,exports.Detailed=_e.Detailed,exports.Preload=Je.Preload,exports.BakeShadows=Ye.BakeShadows,exports.meshBounds=Ze.meshBounds,exports.AdaptiveDpr=$e.AdaptiveDpr,exports.AdaptiveEvents=er.AdaptiveEvents,exports.PerformanceMonitor=rr.PerformanceMonitor,exports.usePerformanceMonitor=rr.usePerformanceMonitor,exports.RenderTexture=sr.RenderTexture,exports.Mask=tr.Mask,exports.useMask=tr.useMask,exports.Hud=or.Hud;
+"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"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),q=require("./Sampler.cjs.js"),d=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),M=require("./Svg.cjs.js"),S=require("./Gltf.cjs.js"),T=require("./AsciiRenderer.cjs.js"),b=require("./OrthographicCamera.cjs.js"),f=require("./PerspectiveCamera.cjs.js"),B=require("./CubeCamera.cjs.js"),P=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),A=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),D=require("./ArcballControls.cjs.js"),E=require("./TransformControls.cjs.js"),R=require("./PointerLockControls.cjs.js"),k=require("./FirstPersonControls.cjs.js"),F=require("./CameraControls.cjs.js"),G=require("./GizmoHelper.cjs.js"),w=require("./GizmoViewcube.cjs.js"),z=require("./GizmoViewport.cjs.js"),O=require("./Grid.cjs.js"),I=require("./useCubeTexture.cjs.js"),H=require("./useFBX.cjs.js"),V=require("./useGLTF.cjs.js"),y=require("./useKTX2.cjs.js"),W=require("./useProgress.cjs.js"),Q=require("./useTexture.cjs.js"),X=require("./useVideoTexture.cjs.js"),K=require("./useFont.cjs.js"),N=require("./Stats.cjs.js"),U=require("./useDepthBuffer.cjs.js"),_=require("./useAspect.cjs.js"),J=require("./useCamera.cjs.js"),Y=require("./useDetectGPU.cjs.js"),Z=require("./useHelper.cjs.js"),$=require("./useBVH.cjs.js"),ee=require("./useContextBridge.cjs.js"),re=require("./useAnimations.cjs.js"),se=require("./useFBO.cjs.js"),te=require("./useIntersect.cjs.js"),oe=require("./useBoxProjectedEnv.cjs.js"),ie=require("./BBAnchor.cjs.js"),ae=require("./useTrailTexture.cjs.js"),ue=require("./useCubeCamera.cjs.js"),ce=require("./Example.cjs.js"),ne=require("./SpriteAnimator.cjs.js"),je=require("./CurveModifier.cjs.js"),pe=require("./MeshDistortMaterial.cjs.js"),xe=require("./MeshWobbleMaterial.cjs.js"),le=require("./MeshReflectorMaterial.cjs.js"),qe=require("./MeshRefractionMaterial.cjs.js"),de=require("./MeshTransmissionMaterial.cjs.js"),me=require("./MeshDiscardMaterial.cjs.js"),he=require("./PointMaterial.cjs.js"),Ce=require("./shaderMaterial.cjs.js"),Me=require("./softShadows.cjs.js"),Se=require("./shapes.cjs.js"),Te=require("./Facemesh.cjs.js"),be=require("./RoundedBox.cjs.js"),fe=require("./ScreenQuad.cjs.js"),Be=require("./Center.cjs.js"),Pe=require("./Resize.cjs.js"),ge=require("./Bounds.cjs.js"),ve=require("./CameraShake.cjs.js"),Ae=require("./Float.cjs.js"),Le=require("./Stage.cjs.js"),De=require("./Backdrop.cjs.js"),Ee=require("./Shadow.cjs.js"),Re=require("./Caustics.cjs.js"),ke=require("./ContactShadows.cjs.js"),Fe=require("./AccumulativeShadows.cjs.js"),Ge=require("./Reflector.cjs.js"),we=require("./SpotLight.cjs.js"),ze=require("./Environment.cjs.js"),Oe=require("./Lightformer.cjs.js"),Ie=require("./Sky.cjs.js"),He=require("./Stars.cjs.js"),Ve=require("./Cloud.cjs.js"),ye=require("./Sparkles.cjs.js"),We=require("./useEnvironment.cjs.js"),Qe=require("./useMatcapTexture.cjs.js"),Xe=require("./useNormalTexture.cjs.js"),Ke=require("./Wireframe.cjs.js"),Ne=require("./Points.cjs.js"),Ue=require("./Instances.cjs.js"),_e=require("./Segments.cjs.js"),Je=require("./Detailed.cjs.js"),Ye=require("./Preload.cjs.js"),Ze=require("./BakeShadows.cjs.js"),$e=require("./meshBounds.cjs.js"),er=require("./AdaptiveDpr.cjs.js"),rr=require("./AdaptiveEvents.cjs.js"),sr=require("./PerformanceMonitor.cjs.js"),tr=require("./RenderTexture.cjs.js"),or=require("./Mask.cjs.js"),ir=require("./Hud.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("camera-controls"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),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("../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.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=q.Sampler,exports.useSurfaceSampler=q.useSurfaceSampler,exports.ComputedAttribute=d.ComputedAttribute,exports.Clone=m.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=M.Svg,exports.Gltf=S.Gltf,exports.AsciiRenderer=T.AsciiRenderer,exports.OrthographicCamera=b.OrthographicCamera,exports.PerspectiveCamera=f.PerspectiveCamera,exports.CubeCamera=B.CubeCamera,exports.DeviceOrientationControls=P.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=A.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=D.ArcballControls,exports.TransformControls=E.TransformControls,exports.PointerLockControls=R.PointerLockControls,exports.FirstPersonControls=k.FirstPersonControls,exports.CameraControls=F.CameraControls,exports.GizmoHelper=G.GizmoHelper,exports.useGizmoContext=G.useGizmoContext,exports.GizmoViewcube=w.GizmoViewcube,exports.GizmoViewport=z.GizmoViewport,exports.Grid=O.Grid,exports.useCubeTexture=I.useCubeTexture,exports.useFBX=H.useFBX,exports.useGLTF=V.useGLTF,exports.useKTX2=y.useKTX2,exports.useProgress=W.useProgress,exports.IsObject=Q.IsObject,exports.useTexture=Q.useTexture,exports.useVideoTexture=X.useVideoTexture,exports.useFont=K.useFont,exports.Stats=N.Stats,exports.useDepthBuffer=U.useDepthBuffer,exports.useAspect=_.useAspect,exports.useCamera=J.useCamera,exports.useDetectGPU=Y.useDetectGPU,exports.useHelper=Z.useHelper,exports.Bvh=$.Bvh,exports.useBVH=$.useBVH,exports.useContextBridge=ee.useContextBridge,exports.useAnimations=re.useAnimations,exports.useFBO=se.useFBO,exports.useIntersect=te.useIntersect,exports.useBoxProjectedEnv=oe.useBoxProjectedEnv,exports.BBAnchor=ie.BBAnchor,exports.useTrailTexture=ae.useTrailTexture,exports.useCubeCamera=ue.useCubeCamera,exports.Example=ce.Example,exports.SpriteAnimator=ne.SpriteAnimator,exports.CurveModifier=je.CurveModifier,exports.MeshDistortMaterial=pe.MeshDistortMaterial,exports.MeshWobbleMaterial=xe.MeshWobbleMaterial,exports.MeshReflectorMaterial=le.MeshReflectorMaterial,exports.MeshRefractionMaterial=qe.MeshRefractionMaterial,exports.MeshTransmissionMaterial=de.MeshTransmissionMaterial,exports.MeshDiscardMaterial=me.MeshDiscardMaterial,exports.PointMaterial=he.PointMaterial,exports.PointMaterialImpl=he.PointMaterialImpl,exports.shaderMaterial=Ce.shaderMaterial,exports.SoftShadows=Me.SoftShadows,exports.Box=Se.Box,exports.Capsule=Se.Capsule,exports.Circle=Se.Circle,exports.Cone=Se.Cone,exports.Cylinder=Se.Cylinder,exports.Dodecahedron=Se.Dodecahedron,exports.Extrude=Se.Extrude,exports.Icosahedron=Se.Icosahedron,exports.Lathe=Se.Lathe,exports.Octahedron=Se.Octahedron,exports.Plane=Se.Plane,exports.Polyhedron=Se.Polyhedron,exports.Ring=Se.Ring,exports.Shape=Se.Shape,exports.Sphere=Se.Sphere,exports.Tetrahedron=Se.Tetrahedron,exports.Torus=Se.Torus,exports.TorusKnot=Se.TorusKnot,exports.Tube=Se.Tube,exports.Facemesh=Te.Facemesh,exports.FacemeshDatas=Te.FacemeshDatas,exports.RoundedBox=be.RoundedBox,exports.ScreenQuad=fe.ScreenQuad,exports.Center=Be.Center,exports.Resize=Pe.Resize,exports.Bounds=ge.Bounds,exports.useBounds=ge.useBounds,exports.CameraShake=ve.CameraShake,exports.Float=Ae.Float,exports.Stage=Le.Stage,exports.Backdrop=De.Backdrop,exports.Shadow=Ee.Shadow,exports.Caustics=Re.Caustics,exports.ContactShadows=ke.ContactShadows,exports.AccumulativeShadows=Fe.AccumulativeShadows,exports.RandomizedLight=Fe.RandomizedLight,exports.accumulativeContext=Fe.accumulativeContext,exports.Reflector=Ge.Reflector,exports.SpotLight=we.SpotLight,exports.SpotLightShadow=we.SpotLightShadow,exports.Environment=ze.Environment,exports.EnvironmentCube=ze.EnvironmentCube,exports.EnvironmentMap=ze.EnvironmentMap,exports.EnvironmentPortal=ze.EnvironmentPortal,exports.Lightformer=Oe.Lightformer,exports.Sky=Ie.Sky,exports.calcPosFromAngles=Ie.calcPosFromAngles,exports.Stars=He.Stars,exports.Cloud=Ve.Cloud,exports.Sparkles=ye.Sparkles,exports.useEnvironment=We.useEnvironment,exports.useMatcapTexture=Qe.useMatcapTexture,exports.useNormalTexture=Xe.useNormalTexture,exports.Wireframe=Ke.Wireframe,exports.Point=Ne.Point,exports.Points=Ne.Points,exports.PointsBuffer=Ne.PointsBuffer,exports.PositionPoint=Ne.PositionPoint,exports.Instance=Ue.Instance,exports.Instances=Ue.Instances,exports.Merged=Ue.Merged,exports.Segment=_e.Segment,exports.SegmentObject=_e.SegmentObject,exports.Segments=_e.Segments,exports.Detailed=Je.Detailed,exports.Preload=Ye.Preload,exports.BakeShadows=Ze.BakeShadows,exports.meshBounds=$e.meshBounds,exports.AdaptiveDpr=er.AdaptiveDpr,exports.AdaptiveEvents=rr.AdaptiveEvents,exports.PerformanceMonitor=sr.PerformanceMonitor,exports.usePerformanceMonitor=sr.usePerformanceMonitor,exports.RenderTexture=tr.RenderTexture,exports.Mask=or.Mask,exports.useMask=or.useMask,exports.Hud=ir.Hud;

package/core/index.d.ts

@@ -61,6 +61,7 @@ export * from './BBAnchor';
 export * from './useTrailTexture';
 export * from './useCubeCamera';
 export * from './Example';
+export * from './SpriteAnimator';
 export * from './CurveModifier';
 export * from './MeshDistortMaterial';
 export * from './MeshWobbleMaterial';

package/core/index.js

@@ -61,6 +61,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 { CurveModifier } from './CurveModifier.js';
 export { MeshDistortMaterial } from './MeshDistortMaterial.js';
 export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';

package/core/shaderMaterial.cjs.js

@@ -1 +1 @@
-"use strict";function e(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)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("three"));exports.shaderMaterial=function(e,r,n,s){const i=class extends t.ShaderMaterial{key="";constructor(i={}){const a=Object.entries(e);super({uniforms:a.reduce(((e,[r,n])=>({...e,...t.UniformsUtils.clone({[r]:{value:n}})})),{}),vertexShader:r,fragmentShader:n}),a.forEach((([e])=>Object.defineProperty(this,e,{get:()=>this.uniforms[e].value,set:t=>this.uniforms[e].value=t}))),Object.assign(this,i),s&&s(this)}};return i.key=t.MathUtils.generateUUID(),i};
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("three"));exports.shaderMaterial=function(e,r,s,n){const i=class extends t.ShaderMaterial{constructor(i={}){const a=Object.entries(e);super({uniforms:a.reduce(((e,[r,s])=>({...e,...t.UniformsUtils.clone({[r]:{value:s}})})),{}),vertexShader:r,fragmentShader:s}),this.key="",a.forEach((([e])=>Object.defineProperty(this,e,{get:()=>this.uniforms[e].value,set:t=>this.uniforms[e].value=t}))),Object.assign(this,i),n&&n(this)}};return i.key=t.MathUtils.generateUUID(),i};

package/core/shaderMaterial.js

@@ -1,9 +1,7 @@
 import * as THREE from 'three';
 
 function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
-  const material = class extends THREE.ShaderMaterial {
-    key = '';
-
+  const material = class material extends THREE.ShaderMaterial {
     constructor(parameters = {}) {
       const entries = Object.entries(uniforms); // Create unforms and shaders
 
@@ -22,6 +20,7 @@ function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
         fragmentShader
       }); // Create getter/setters
 
+      this.key = '';
       entries.forEach(([name]) => Object.defineProperty(this, name, {
         get: () => this.uniforms[name].value,
         set: v => this.uniforms[name].value = v