@react-three/drei 9.113.0 → 9.114.1

package/core/Gltf.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("./Clone.cjs.js"),o=require("three-stdlib"),c=require("@react-three/fiber");function n(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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var s=n(e),a=u(r);let d=null,f="https://www.gstatic.com/draco/versioned/decoders/1.5.5/";function i(e,r,t){return c=>{t&&t(c),e&&(d||(d=new o.DRACOLoader),d.setDecoderPath("string"==typeof e?e:f),c.setDRACOLoader(d)),r&&c.setMeshoptDecoder("function"==typeof o.MeshoptDecoder?o.MeshoptDecoder():o.MeshoptDecoder)}}function l(e,r=!0,t=!0,n){return c.useLoader(o.GLTFLoader,e,i(r,t,n))}l.preload=(e,r=!0,t=!0,n)=>c.useLoader.preload(o.GLTFLoader,e,i(r,t,n)),l.clear=e=>c.useLoader.clear(o.GLTFLoader,e),l.setDecoderPath=e=>{f=e};const p=a.forwardRef((({src:e,useDraco:r,useMeshOpt:o,extendLoader:c,...n},u)=>{const{scene:d}=l(e,r,o,c);return a.createElement(t.Clone,s.default({ref:u},n,{object:d}))}));exports.Gltf=p,exports.useGLTF=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three-stdlib"),o=require("@react-three/fiber"),c=require("./Clone.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var u=s(e),a=n(r);let d=null,f="https://www.gstatic.com/draco/versioned/decoders/1.5.5/";function i(e=!0,r=!0,o){return c=>{o&&o(c),e&&(d||(d=new t.DRACOLoader),d.setDecoderPath("string"==typeof e?e:f),c.setDRACOLoader(d)),r&&c.setMeshoptDecoder("function"==typeof t.MeshoptDecoder?t.MeshoptDecoder():t.MeshoptDecoder)}}const l=(e,r,c,s)=>o.useLoader(t.GLTFLoader,e,i(r,c,s));l.preload=(e,r,c,s)=>o.useLoader.preload(t.GLTFLoader,e,i(r,c,s)),l.clear=e=>o.useLoader.clear(t.GLTFLoader,e),l.setDecoderPath=e=>{f=e};const p=a.forwardRef((({src:e,useDraco:r,useMeshOpt:t,extendLoader:o,...s},n)=>{const{scene:d}=l(e,r,t,o);return a.createElement(c.Clone,u.default({ref:n},s,{object:d}))}));exports.Gltf=p,exports.useGLTF=l;

package/core/Gltf.d.ts

@@ -1,20 +1,23 @@
 import * as React from 'react';
+import { GLTFLoader, GLTF } from 'three-stdlib';
+import { ObjectMap } from '@react-three/fiber';
 import { Clone } from './Clone';
-import { type GLTF, GLTFLoader } from 'three-stdlib';
-import { type ObjectMap } from '@react-three/fiber';
-export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? (GLTF & ObjectMap)[] : GLTF & ObjectMap;
-export declare namespace useGLTF {
-    var preload: (path: string | string[], useDraco?: string | boolean, useMeshOpt?: boolean, extendLoader?: ((loader: GLTFLoader) => void) | undefined) => undefined;
-    var clear: (input: string | string[]) => void;
-    var setDecoderPath: (path: string) => void;
-}
-type UseGLTF = Parameters<typeof useGLTF>;
+type Path = string | string[];
+type UseDraco = boolean | string;
+type UseMeshopt = boolean;
+type ExtendLoader = (loader: GLTFLoader) => void;
+export declare const useGLTF: {
+    <T extends Path>(path: T, useDraco?: UseDraco, useMeshopt?: UseMeshopt, extendLoader?: ExtendLoader): T extends any[] ? (GLTF & ObjectMap)[] : GLTF & ObjectMap;
+    preload(path: Path, useDraco: UseDraco, useMeshopt: UseMeshopt, extendLoader?: ExtendLoader): undefined;
+    clear(path: Path): void;
+    setDecoderPath(path: string): void;
+};
 type CloneProps = React.ComponentProps<typeof Clone>;
 type GltfProps = Omit<CloneProps, 'object'> & {
     src: string;
-    useDraco?: UseGLTF[1];
-    useMeshOpt?: UseGLTF[2];
-    extendLoader?: UseGLTF[3];
+    useDraco?: UseDraco;
+    useMeshOpt?: UseMeshopt;
+    extendLoader?: ExtendLoader;
 };
 export declare const Gltf: React.ForwardRefExoticComponent<Omit<GltfProps, "ref"> & React.RefAttributes<import("three").Group>>;
 export {};

package/core/Gltf.js

@@ -1,12 +1,12 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Clone } from './Clone.js';
 import { GLTFLoader, DRACOLoader, MeshoptDecoder } from 'three-stdlib';
 import { useLoader } from '@react-three/fiber';
+import { Clone } from './Clone.js';
 
 let dracoLoader = null;
 let decoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/';
-function extensions(useDraco, useMeshopt, extendLoader) {
+function extensions(useDraco = true, useMeshopt = true, extendLoader) {
   return loader => {
     if (extendLoader) {
       extendLoader(loader);
@@ -23,11 +23,9 @@ function extensions(useDraco, useMeshopt, extendLoader) {
     }
   };
 }
-function useGLTF(path, useDraco = true, useMeshOpt = true, extendLoader) {
-  return useLoader(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
-}
-useGLTF.preload = (path, useDraco = true, useMeshOpt = true, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
-useGLTF.clear = input => useLoader.clear(GLTFLoader, input);
+const useGLTF = (path, useDraco, useMeshopt, extendLoader) => useLoader(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
+useGLTF.preload = (path, useDraco, useMeshopt, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader));
+useGLTF.clear = path => useLoader.clear(GLTFLoader, path);
 useGLTF.setDecoderPath = path => {
   decoderPath = path;
 };

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

package/core/SpriteAnimator.d.ts

@@ -26,6 +26,7 @@ export type SpriteAnimatorProps = {
     maxItems?: number;
     instanceItems?: any[];
     spriteDataset?: any;
+    canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings;
 } & JSX.IntrinsicElements['group'];
 type SpriteAnimatorState = {
     current: number | undefined;
@@ -33,6 +34,6 @@ type SpriteAnimatorState = {
     hasEnded: boolean | undefined;
     ref: React.MutableRefObject<any> | undefined | null | ((instance: any) => void);
 };
-export declare function useSpriteAnimator(): SpriteAnimatorState;
+export declare function useSpriteAnimator(): SpriteAnimatorState | null;
 export declare const SpriteAnimator: React.FC<SpriteAnimatorProps>;
 export {};

package/core/SpriteAnimator.js

@@ -36,6 +36,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   maxItems,
   instanceItems,
   spriteDataset,
+  canvasRenderingContext2DSettings,
   ...props
 }, fref) => {
   var _props$scale;
@@ -59,7 +60,7 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
   const {
     spriteObj,
     loadJsonAndTexture
-  } = useSpriteLoader(null, null, animationNames, numberOfFrames);
+  } = useSpriteLoader(null, null, animationNames, numberOfFrames, undefined, canvasRenderingContext2DSettings);
   //
 
   function reset() {}

package/core/useSpriteLoader.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=o(e),n=o(t);const s=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}},i=e=>{for(let r=3;r<e.length;r+=4)if(0!==e[r])return!1;return!0},u=(e,r,t,o)=>{const n=r*(o.aspect>e/r?o.width/e:o.height/r),s=e*(o.aspect>e/r?o.width/e:o.height/r)*t,i=n*t;let u=Math.min(1,s),c=Math.min(1,i);return s>1&&(u=1,c=i/s*1),new a.Vector3(u,c,1)};function c(o,c,f,l,m){const h=r.useThree((e=>e.viewport)),d=n.useRef(null),w=n.useRef(0),[p,g]=t.useState(null),[y,x]=n.useState(new a.Texture),S=new a.TextureLoader,[L,b]=t.useState(null);function j(e){(e||o)&&new Promise((r=>{S.load(null!=e?e:o,r)})).then((e=>{O(null,e)}))}function v(e,r,t){const o=fetch(e).then((e=>e.json())),a=new Promise((e=>{S.load(r,e)}));Promise.all([o,a]).then((e=>{t(e[0],e[1])}))}n.useLayoutEffect((()=>(c&&o?v(c,o,O):o&&j(),()=>{o&&r.useLoader.clear(e.TextureLoader,o)})),[]);const O=(e,r)=>{let t=new a.Vector3(1,1,1);if(null===e){if(r&&l){const e=r.image.width,o=r.image.height;w.current=l;const{rows:a,columns:n,frameWidth:s,frameHeight:i,emptyFrames:c}=z(r,l);d.current={frames:[],meta:{version:"1.0",size:{w:e,h:o},rows:a,columns:n,frameWidth:s,frameHeight:i,scale:"1"}};for(let e=0;e<a;e++)for(let r=0;r<n;r++){(null!=c?c:[]).some((t=>t.row===e&&t.col===r))||d.current.frames.push({frame:{x:r*s,y:e*i,w:s,h:i},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:i},sourceSize:{w:s,h:i}})}t=u(s,i,.1,h)}d.current.frames=M(d.current.frames)}else if(r){d.current=e,d.current.frames=A(),w.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:o}=s(e.frames).sourceSize;t=u(r,o,.1,h)}g(d.current),"encoding"in r?r.encoding=3001:r.colorSpace=a.SRGBColorSpace,x(r),b({spriteTexture:r,spriteData:d.current,aspect:t})},z=(e,r)=>{if(e.image){const t=document.createElement("canvas"),o=t.getContext("2d");t.width=e.image.width,t.height=e.image.height,o.drawImage(e.image,0,0);const a=e.image.width,n=e.image.height,s=Math.round(Math.sqrt(r*(a/n))),u=Math.round(r/s),c=a/s,f=n/u,l=[];for(let e=0;e<u;e++)for(let t=0;t<s;t++){if(e*s+t>=r){l.push({row:e,col:t});continue}const a=o.getImageData(t*c,e*f,c,f).data;i(a)&&l.push({row:e,col:t})}return{rows:u,columns:s,frameWidth:c,frameHeight:f,emptyFrames:l}}return{rows:0,columns:0,frameWidth:0,frameHeight:0,emptyFrames:[]}},A=()=>{const e={},r=d.current,t=f;if(t&&Array.isArray(r.frames)){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const a of r.frames){const r=a.frame,n=r.x,s=r.y,i=r.w,u=r.h,c=a.sourceSize.w,f=a.sourceSize.h;"string"==typeof a.filename&&-1!==a.filename.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:n,y:s,w:i,h:u,frame:r,sourceSize:{w:c,h:f}})}}for(const r in e)e[r].frame=M(e[r]);return e}if(t&&"object"==typeof r.frames){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const a in r.frames){const n=r.frames[a],s=n.frame,i=s.x,u=s.y,c=s.w,f=s.h,l=n.sourceSize.w,m=n.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:i,y:u,w:c,h:f,frame:s,sourceSize:{w:l,h:m}})}}for(const r in e)e[r].frame=M(e[r]);return e}{let e=[];for(const t in r.frames)e.push(r.frames[t]);return e=M(e),e}},M=e=>{let r=null;for(const t of e){const{w:e,h:o}=t.frame,a=e*o;(!r||a>r.area)&&(r={...t.frame,area:a})}for(const a of e){var t;const{w:e,h:n}=a.frame,s=e*n;var o;if(s===(null==(t=r)?void 0:t.area))a.scaleRatio=1;else a.scaleRatio=Math.sqrt(s/(null==(o=r)?void 0:o.area))}return e};return n.useLayoutEffect((()=>{null==m||m(y,p)}),[y,p]),{spriteObj:L,loadJsonAndTexture:function(e,r){r&&e?v(r,e,O):j(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=u,exports.checkIfFrameIsEmpty=i,exports.getFirstItem=s,exports.useSpriteLoader=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=o(e),n=o(t);const s=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}},i=e=>{for(let r=3;r<e.length;r+=4)if(0!==e[r])return!1;return!0},u=(e,r,t,o)=>{const n=r*(o.aspect>e/r?o.width/e:o.height/r),s=e*(o.aspect>e/r?o.width/e:o.height/r)*t,i=n*t;let u=Math.min(1,s),c=Math.min(1,i);return s>1&&(u=1,c=i/s*1),new a.Vector3(u,c,1)};function c(o,c,f,l,m,h){const d=r.useThree((e=>e.viewport)),w=n.useRef(null),p=n.useRef(0),[g,y]=t.useState(null),[x,S]=n.useState(new a.Texture),b=new a.TextureLoader,[v,L]=t.useState(null);function j(e){if(!e&&!o)throw new Error("Either textureUrl or input must be provided");const r=null!=e?e:o;if(!r)throw new Error("A valid texture URL must be provided");new Promise((e=>{b.load(r,e)})).then((e=>{z(null,e)}))}function O(e,r,t){const o=fetch(e).then((e=>e.json())),a=new Promise((e=>{b.load(r,e)}));Promise.all([o,a]).then((e=>{t(e[0],e[1])}))}n.useLayoutEffect((()=>(c&&o?O(c,o,z):o&&j(),()=>{o&&r.useLoader.clear(e.TextureLoader,o)})),[]);const z=(e,r)=>{let t=new a.Vector3(1,1,1);if(null===e){if(r&&l){const e=r.image.width,o=r.image.height;p.current=l;const{rows:a,columns:n,frameWidth:s,frameHeight:i,emptyFrames:c}=A(r,l);w.current={frames:[],meta:{version:"1.0",size:{w:e,h:o},rows:a,columns:n,frameWidth:s,frameHeight:i,scale:"1"}};for(let e=0;e<a;e++)for(let r=0;r<n;r++){(null!=c?c:[]).some((t=>t.row===e&&t.col===r))||w.current.frames.push({frame:{x:r*s,y:e*i,w:s,h:i},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:i},sourceSize:{w:s,h:i}})}t=u(s,i,.1,d)}w.current.frames=M(w.current.frames)}else if(r){w.current=e,w.current.frames=E(),p.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:o}=s(e.frames).sourceSize;t=u(r,o,.1,d)}y(w.current),"encoding"in r?r.encoding=3001:r.colorSpace=a.SRGBColorSpace,S(r),L({spriteTexture:r,spriteData:w.current,aspect:t})},A=(e,r)=>{if(e.image){const t=document.createElement("canvas"),o=t.getContext("2d",h);if(!o)throw new Error("Failed to get 2d context");t.width=e.image.width,t.height=e.image.height,o.drawImage(e.image,0,0);const a=e.image.width,n=e.image.height,s=Math.round(Math.sqrt(r*(a/n))),u=Math.round(r/s),c=a/s,f=n/u,l=[];for(let e=0;e<u;e++)for(let t=0;t<s;t++){if(e*s+t>=r){l.push({row:e,col:t});continue}const a=o.getImageData(t*c,e*f,c,f).data;i(a)&&l.push({row:e,col:t})}return{rows:u,columns:s,frameWidth:c,frameHeight:f,emptyFrames:l}}return{rows:0,columns:0,frameWidth:0,frameHeight:0,emptyFrames:[]}},E=()=>{const e={},r=w.current,t=f;if(t&&Array.isArray(r.frames)){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const a of r.frames){const r=a.frame,n=r.x,s=r.y,i=r.w,u=r.h,c=a.sourceSize.w,f=a.sourceSize.h;"string"==typeof a.filename&&-1!==a.filename.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:n,y:s,w:i,h:u,frame:r,sourceSize:{w:c,h:f}})}}for(const r in e)e[r].frame=M(e[r]);return e}if(t&&"object"==typeof r.frames){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const a in r.frames){const n=r.frames[a],s=n.frame,i=s.x,u=s.y,c=s.w,f=s.h,l=n.sourceSize.w,m=n.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:i,y:u,w:c,h:f,frame:s,sourceSize:{w:l,h:m}})}}for(const r in e)e[r].frame=M(e[r]);return e}{let e=[];for(const t in r.frames)e.push(r.frames[t]);return e=M(e),e}},M=e=>{let r=null;for(const t of e){const{w:e,h:o}=t.frame,a=e*o;(!r||a>r.area)&&(r={...t.frame,area:a})}for(const a of e){var t;const{w:e,h:n}=a.frame,s=e*n;var o;if(s===(null==(t=r)?void 0:t.area))a.scaleRatio=1;else a.scaleRatio=Math.sqrt(s/(null==(o=r)?void 0:o.area))}return e};return n.useLayoutEffect((()=>{null==m||m(x,g)}),[x,g]),{spriteObj:v,loadJsonAndTexture:function(e,r){r&&e?O(r,e,z):j(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=u,exports.checkIfFrameIsEmpty=i,exports.getFirstItem=s,exports.useSpriteLoader=c;

package/core/useSpriteLoader.d.ts

@@ -3,7 +3,7 @@ import * as THREE from 'three';
 export declare const getFirstItem: (param: any) => any;
 export declare const checkIfFrameIsEmpty: (frameData: Uint8ClampedArray) => boolean;
 export declare const calculateAspectRatio: (width: number, height: number, factor: number, v: any) => THREE.Vector3;
-export declare function useSpriteLoader<Url extends string>(input?: Url | null, json?: string | null, animationNames?: string[] | null, numberOfFrames?: number | null, onLoad?: (texture: Texture, textureData?: any) => void): any;
+export declare function useSpriteLoader<Url extends string>(input?: Url | null, json?: string | null, animationNames?: string[] | null, numberOfFrames?: number | null, onLoad?: (texture: Texture, textureData?: any) => void, canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings): any;
 export declare namespace useSpriteLoader {
     var preload: (url: string) => undefined;
     var clear: (input: string) => void;

package/core/useSpriteLoader.js

@@ -43,7 +43,7 @@ const calculateAspectRatio = (width, height, factor, v) => {
   }
   return new THREE.Vector3(finalMaxScaleW, finalMaxScaleH, 1);
 };
-function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
+function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad, canvasRenderingContext2DSettings) {
   const v = useThree(state => state.viewport);
   const spriteDataRef = React.useRef(null);
   const totalFrames = React.useRef(0);
@@ -73,13 +73,18 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
     }
   }
   function loadStandaloneSprite(textureUrl) {
-    if (textureUrl || input) {
-      new Promise(resolve => {
-        textureLoader.load(textureUrl !== null && textureUrl !== void 0 ? textureUrl : input, resolve);
-      }).then(texture => {
-        parseSpriteData(null, texture);
-      });
+    if (!textureUrl && !input) {
+      throw new Error('Either textureUrl or input must be provided');
     }
+    const validUrl = textureUrl !== null && textureUrl !== void 0 ? textureUrl : input;
+    if (!validUrl) {
+      throw new Error('A valid texture URL must be provided');
+    }
+    new Promise(resolve => {
+      textureLoader.load(validUrl, resolve);
+    }).then(texture => {
+      parseSpriteData(null, texture);
+    });
   }
 
   /**
@@ -183,7 +188,10 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
   const getRowsAndColumns = (texture, totalFrames) => {
     if (texture.image) {
       const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext('2d', canvasRenderingContext2DSettings);
+      if (!ctx) {
+        throw new Error('Failed to get 2d context');
+      }
       canvas.width = texture.image.width;
       canvas.height = texture.image.height;
       ctx.drawImage(texture.image, 0, 0);