@react-three/drei 9.102.4 → 9.102.6

package/README.md

@@ -2462,7 +2462,7 @@ Allows you to tie HTML content to any object of your scene. It will be projected
   sprite // Renders as sprite, but only in transform mode (default=false)
   calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]
   occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined)
-  onOcclude={(visible) => null} // Callback when the visibility changes (default: undefined)
+  onOcclude={(hidden) => null} // Callback when the visibility changes (default: undefined)
   {...groupProps} // All THREE.Group props are valid
   {...divProps} // All HTMLDivElement props are valid
 >

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats.js"),n=require("../helpers/useEffectfulState.cjs.js");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 c=u(e),s=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const f=n.useEffectfulState((()=>new s),[]);return c.useEffect((()=>{if(f){const n=u&&u.current||document.body;f.showPanel(e),null==n||n.appendChild(f.dom),r&&f.dom.classList.add(...r.split(" ").filter((e=>e)));const c=t.addEffect((()=>f.begin())),s=t.addAfterEffect((()=>f.end()));return()=>{null==n||n.removeChild(f.dom),c(),s()}}}),[u,f,r,e]),null};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("stats.js"),n=require("../helpers/useEffectfulState.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(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 c=f(e),a=u(r);exports.Stats=function({showPanel:e=0,className:r,parent:u}){const f=n.useEffectfulState((()=>new a.default),[]);return c.useEffect((()=>{if(f){const n=u&&u.current||document.body;f.showPanel(e),null==n||n.appendChild(f.dom),r&&f.dom.classList.add(...r.split(" ").filter((e=>e)));const c=t.addEffect((()=>f.begin())),a=t.addAfterEffect((()=>f.end()));return()=>{null==n||n.removeChild(f.dom),c(),a()}}}),[u,f,r,e]),null};

package/core/Stats.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { addEffect, addAfterEffect } from '@react-three/fiber';
-import * as StatsImpl from 'stats.js';
+import StatsImpl from 'stats.js';
 import { useEffectfulState } from '../helpers/useEffectfulState.js';
 
 function Stats({