@react-three/drei 9.82.1 → 9.83.0

package/README.md

@@ -2358,6 +2358,8 @@ type Props = {
   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
+  /** Displays the texture on a SpriteGeometry always facing the camera, if set to false, it renders on a PlaneGeometry */
+  asSprite?: boolean
 }
 ```
 

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

package/core/SpriteAnimator.d.ts

@@ -19,5 +19,6 @@ export declare type SpriteAnimatorProps = {
     flipX?: boolean;
     position?: Array<number>;
     alphaTest?: number;
+    asSprite?: boolean;
 } & JSX.IntrinsicElements['group'];
 export declare const SpriteAnimator: React.FC<SpriteAnimatorProps>;

package/core/SpriteAnimator.js

@@ -22,6 +22,7 @@ const SpriteAnimator = ({
   flipX,
   alphaTest,
   children,
+  asSprite,
   ...props
 }, fref) => {
   useThree(state => state.viewport);
@@ -39,6 +40,7 @@ const SpriteAnimator = ({
   const totalFrames = React.useRef(0);
   const [aspect, setAspect] = React.useState([1, 1, 1]);
   const flipOffset = flipX ? -1 : 1;
+  const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite !== null && asSprite !== void 0 ? asSprite : true);
 
   function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
     const textureLoader = new THREE.TextureLoader();
@@ -71,6 +73,9 @@ const SpriteAnimator = ({
       });
     }
   }, []);
+  React.useEffect(() => {
+    setDisplayAsSprite(asSprite !== null && asSprite !== void 0 ? asSprite : true);
+  }, [asSprite]);
   React.useLayoutEffect(() => {
     modifySpritePosition();
   }, [spriteTexture, flipX]);
@@ -330,7 +335,7 @@ const SpriteAnimator = ({
 
   return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
-  }, /*#__PURE__*/React.createElement("sprite", {
+  }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {
     ref: spriteRef,
     scale: aspect
   }, /*#__PURE__*/React.createElement("spriteMaterial", {
@@ -339,6 +344,18 @@ const SpriteAnimator = ({
     map: spriteTexture,
     transparent: true,
     alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
+  })), !displayAsSprite && /*#__PURE__*/React.createElement("mesh", {
+    ref: spriteRef,
+    scale: aspect
+  }, /*#__PURE__*/React.createElement("planeGeometry", {
+    args: [1, 1]
+  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    toneMapped: false,
+    side: THREE.DoubleSide,
+    ref: matRef,
+    map: spriteTexture,
+    transparent: true,
+    alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
   }))), children);
 };