@react-three/drei 9.102.3 → 9.102.5

package/README.md

@@ -2825,7 +2825,7 @@ type FBOSettings = {
   samples?: number
   /** If set, the scene depth will be rendered into buffer.depthTexture. Default: false */
   depth?: boolean
-} & THREE.WebGLRenderTargetOptions
+} & THREE.RenderTargetOptions
 
 export function useFBO(
   /** Width in pixels, or settings (will render fullscreen by default) */

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:A,playBackwards:M,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(A),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=A}),[A]);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===M?B.current=D.current.frames.length-1:B.current=0}),[M]),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,M&&(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,M&&(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===A?ae.current:A;const a=B.current;let c=0,s=0;ce(e,r);const l=(t.w-1)/e,o=(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 M?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===A?ae.current:A,m=M?B.current<0:B.current>f,d=M?B.current===f:0===B.current,h=M?B.current<0:B.current>=f;if(m){if(B.current=p&&null!=e?e:0,M&&(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: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)};

package/core/SpriteAnimator.js

@@ -312,8 +312,8 @@ const SpriteAnimator = /* @__PURE__ */React.forwardRef(({
     let finalValX = 0;
     let finalValY = 0;
     calculateAspectRatio(frameW, frameH);
-    const framesH = (metaInfo.w - 1) / frameW;
-    const framesV = (metaInfo.h - 1) / frameH;
+    const framesH = Math.round((metaInfo.w - 1) / frameW);
+    const framesV = Math.round((metaInfo.h - 1) / frameH);
     if (!spriteFrames[targetFrame]) {
       return;
     }

package/core/useFBO.d.ts

@@ -1,7 +1,22 @@
 import * as THREE from 'three';
+import { TextureEncoding } from '../helpers/deprecated';
+type ColorSpace = 'srgb' | 'srgb-linear' | '' | string;
 type FBOSettings = {
     samples?: number;
     depth?: boolean;
-} & THREE.WebGLRenderTargetOptions;
+    wrapS?: THREE.Wrapping | undefined;
+    wrapT?: THREE.Wrapping | undefined;
+    magFilter?: THREE.MagnificationTextureFilter | undefined;
+    minFilter?: THREE.MinificationTextureFilter | undefined;
+    format?: number | undefined;
+    type?: THREE.TextureDataType | undefined;
+    anisotropy?: number | undefined;
+    depthBuffer?: boolean | undefined;
+    stencilBuffer?: boolean | undefined;
+    generateMipmaps?: boolean | undefined;
+    depthTexture?: THREE.DepthTexture | undefined;
+    encoding?: TextureEncoding | undefined;
+    colorSpace?: ColorSpace | undefined;
+};
 export declare function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings): THREE.WebGLRenderTarget;
 export {};

package/core/useFBO.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 
+// TODO: consume this from three >r154 when SemVer allows
+
 // 👇 uncomment when TS version supports function overloads
 // export function useFBO(settings?: FBOSettings)
 function useFBO( /** Width in pixels, or settings (will render fullscreen by default) */

package/helpers/deprecated.d.ts

@@ -1,3 +1,4 @@
+import * as THREE from 'three';
 export declare const setUpdateRange: (attribute: THREE.BufferAttribute, updateRange: {
     offset: number;
     count: number;