@react-three/drei 9.112.1 → 9.114.0

package/core/GradientTexture.d.ts

@@ -13,6 +13,6 @@ type Props = {
     type?: GradientType;
     innerCircleRadius?: number;
     outerCircleRadius?: string | number;
-} & JSX.IntrinsicElements['texture'];
+} & Omit<JSX.IntrinsicElements['texture'], 'type'>;
 export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): React.JSX.Element;
 export {};

package/core/GradientTexture.js

@@ -13,7 +13,6 @@ function GradientTexture({
   colors,
   size = 1024,
   width = 16,
-  //@ts-ignore - weird error about type never, although the type is clearly defined
   type = GradientType.Linear,
   innerCircleRadius = 0,
   outerCircleRadius = 'auto',

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/StatsGl.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats-gl");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 l=u(e),c=n(r);exports.StatsGl=function({className:e,parent:r,...n}){const u=t.useThree((e=>e.gl)),o=l.useMemo((()=>{const e=new c.default({...n});return e.init(u),e}),[u]);return l.useEffect((()=>{if(o){const n=r&&r.current||document.body;null==n||n.appendChild(o.dom);const u=(null!=e?e:"").split(" ").filter((e=>e));u.length&&o.dom.classList.add(...u);const l=t.addAfterEffect((()=>o.update()));return()=>{u.length&&o.dom.classList.remove(...u),null==n||n.removeChild(o.dom),l()}}}),[r,o,e]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("stats-gl");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=l(t),u=o(r);const s=n.forwardRef((({className:t,parent:r,id:o,clearStatsGlStyle:l,...s},a)=>{const c=e.useThree((e=>e.gl)),d=n.useMemo((()=>{const e=new u.default({...s});return e.init(c),e}),[c]);return n.useImperativeHandle(a,(()=>d.dom)),n.useEffect((()=>{if(d){const n=r&&r.current||document.body;null==n||n.appendChild(d.dom),d.dom.querySelectorAll("canvas").forEach((e=>{e.style.removeProperty("position")})),o&&(d.dom.id=o),l&&d.dom.removeAttribute("style"),d.dom.removeAttribute("style");const u=(null!=t?t:"").split(" ").filter((e=>e));u.length&&d.dom.classList.add(...u);const s=e.addAfterEffect((()=>d.update()));return()=>{u.length&&d.dom.classList.remove(...u),null==n||n.removeChild(d.dom),s()}}}),[r,d,t,o,l]),null}));s.displayName="StatsGl",exports.StatsGl=s;

package/core/StatsGl.d.ts

@@ -1,9 +1,13 @@
+import { ForwardRefComponent } from '../helpers/ts-utils';
 import * as React from 'react';
 import Stats from 'stats-gl';
 type Props = Partial<Stats> & {
+    id?: string;
+    clearStatsGlStyle?: boolean;
     showPanel?: number;
     className?: string;
     parent?: React.RefObject<HTMLElement>;
+    ref?: React.RefObject<HTMLElement>;
 };
-export declare function StatsGl({ className, parent, ...props }: Props): null;
+export declare const StatsGl: ForwardRefComponent<Props, HTMLDivElement>;
 export {};

package/core/StatsGl.js

@@ -1,12 +1,14 @@
-import * as React from 'react';
 import { useThree, addAfterEffect } from '@react-three/fiber';
+import * as React from 'react';
 import Stats from 'stats-gl';
 
-function StatsGl({
+const StatsGl = /* @__PURE__ */React.forwardRef(({
   className,
   parent,
+  id,
+  clearStatsGlStyle,
   ...props
-}) {
+}, fref) => {
   const gl = useThree(state => state.gl);
   const stats = React.useMemo(() => {
     const stats = new Stats({
@@ -15,10 +17,17 @@ function StatsGl({
     stats.init(gl);
     return stats;
   }, [gl]);
+  React.useImperativeHandle(fref, () => stats.dom);
   React.useEffect(() => {
     if (stats) {
       const node = parent && parent.current || document.body;
       node == null || node.appendChild(stats.dom);
+      stats.dom.querySelectorAll('canvas').forEach(canvas => {
+        canvas.style.removeProperty('position');
+      });
+      if (id) stats.dom.id = id;
+      if (clearStatsGlStyle) stats.dom.removeAttribute('style');
+      stats.dom.removeAttribute('style');
       const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
       if (classNames.length) stats.dom.classList.add(...classNames);
       const end = addAfterEffect(() => stats.update());
@@ -28,8 +37,9 @@ function StatsGl({
         end();
       };
     }
-  }, [parent, stats, className]);
+  }, [parent, stats, className, id, clearStatsGlStyle]);
   return null;
-}
+});
+StatsGl.displayName = 'StatsGl';
 
 export { StatsGl };

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);