@react-three/drei 9.81.0 → 9.82.0

package/README.md

@@ -969,6 +969,7 @@ A box buffer geometry with rounded corners, done with extrusion.
   args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]
   radius={0.05} // Radius of the rounded corners. Default is 0.05
   smoothness={4} // The number of curve segments. Default is 4
+  bevelSegments={4} // The number of bevel segments. Default is 4, setting it to 0 removes the bevel, as a result the texture is applied to the whole geometry.
   creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle
   {...meshProps} // All THREE.Mesh props are valid
 >
@@ -3300,7 +3301,7 @@ function App() {
   const [dpr, setDpr] = useState(1.5)
   return (
     <Canvas dpr={dpr}>
-      <PerformanceMonitor onIncline={() => setDpr(2)} onDecline={() => setDpr(1)} >
+      <PerformanceMonitor onIncline={() => setDpr(2)} onDecline={() => setDpr(1)} />
 ```
 
 You can also use the `onChange` callback to get notified when the average changes in whichever direction. This allows you to make gradual changes. It gives you a `factor` between 0 and 1, which is increased by incline and decreased by decline. The `factor` is initially 0.5 by default. If your app starts with lowest defaults and gradually increases quality set `factor` to 0. If it starts with highest defaults and decreases quality, set it to 1. If it starts in the middle and can either increase or decrease, set it to 0.5.
@@ -3310,16 +3311,16 @@ The following starts at the highest dpr (2) and clamps the gradual dpr between 0
 ```jsx
 import round from 'lodash/round'
 
-const [dpr, set] = useState(2)
+const [dpr, setDpr] = useState(2)
 return (
  <Canvas dpr={dpr}>
-  <PerformanceMonitor factor={1} onChange={({ factor }) => setDpr(round(0.5 + 1.5 * factor, 1))} >
+  <PerformanceMonitor factor={1} onChange={({ factor }) => setDpr(round(0.5 + 1.5 * factor, 1))} />
 ```
 
 If you still experience flip flops despite the bounds you can define a limit of `flipflops`. If it is met `onFallback` will be triggered which typically sets a lowest possible baseline for the app. After the fallback has been called PerformanceMonitor will shut down.
 
 ```jsx
-<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)}>
+<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)}/>
 ```
 
 PerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.

package/core/RoundedBox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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 u=a(e),c=s(t);const o=1e-5;const f=c.forwardRef((function({args:[e=1,t=1,a=1]=[],radius:s=.05,steps:f=1,smoothness:l=4,creaseAngle:i=.4,children:b,...d},h){const m=c.useMemo((()=>function(e,t,n){const a=new r.Shape,s=n-o;return a.absarc(o,o,o,-Math.PI/2,-Math.PI,!0),a.absarc(o,t-2*s,o,Math.PI,Math.PI/2,!0),a.absarc(e-2*s,t-2*s,o,Math.PI/2,0,!0),a.absarc(e-2*s,o,o,0,-Math.PI/2,!0),a}(e,t,s)),[e,t,s]),p=c.useMemo((()=>({depth:a-2*s,bevelEnabled:!0,bevelSegments:2*l,steps:f,bevelSize:s-o,bevelThickness:s,curveSegments:l})),[a,s,l]),v=c.useRef();return c.useLayoutEffect((()=>{v.current&&(v.current.center(),n.toCreasedNormals(v.current,i))}),[m,p]),c.createElement("mesh",u.default({ref:h},d),c.createElement("extrudeGeometry",{ref:v,args:[m,p]}),b)}));exports.RoundedBox=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(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 u=s(e),c=a(t);const o=1e-5;const f=c.forwardRef((function({args:[e=1,t=1,s=1]=[],radius:a=.05,steps:f=1,smoothness:l=4,bevelSegments:i=4,creaseAngle:b=.4,children:d,...h},m){const p=c.useMemo((()=>function(e,t,n){const s=new r.Shape,a=n-o;return s.absarc(o,o,o,-Math.PI/2,-Math.PI,!0),s.absarc(o,t-2*a,o,Math.PI,Math.PI/2,!0),s.absarc(e-2*a,t-2*a,o,Math.PI/2,0,!0),s.absarc(e-2*a,o,o,0,-Math.PI/2,!0),s}(e,t,a)),[e,t,a]),v=c.useMemo((()=>({depth:s-2*a,bevelEnabled:!0,bevelSegments:2*i,steps:f,bevelSize:a-o,bevelThickness:a,curveSegments:l})),[s,a,l]),M=c.useRef();return c.useLayoutEffect((()=>{M.current&&(M.current.center(),n.toCreasedNormals(M.current,b))}),[p,v]),c.createElement("mesh",u.default({ref:m},h),c.createElement("extrudeGeometry",{ref:M,args:[p,v]}),d)}));exports.RoundedBox=f;

package/core/RoundedBox.d.ts

@@ -4,6 +4,7 @@ declare type Props = {
     args?: NamedArrayTuple<(width?: number, height?: number, depth?: number) => void>;
     radius?: number;
     smoothness?: number;
+    bevelSegments?: number;
     steps?: number;
     creaseAngle?: number;
 } & Omit<JSX.IntrinsicElements['mesh'], 'args'>;

package/core/RoundedBox.js

@@ -20,6 +20,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
   radius = 0.05,
   steps = 1,
   smoothness = 4,
+  bevelSegments = 4,
   creaseAngle = 0.4,
   children,
   ...rest
@@ -28,7 +29,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
   const params = React.useMemo(() => ({
     depth: depth - radius * 2,
     bevelEnabled: true,
-    bevelSegments: smoothness * 2,
+    bevelSegments: bevelSegments * 2,
     steps,
     bevelSize: radius - eps,
     bevelThickness: radius,

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:s,textureDataURL:c,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),[E,O]=a.useState(!1),R=a.useRef(),j=a.useRef(),v=a.useRef(window.performance.now()),L=a.useRef(),P=a.useRef(e||0),T=a.useRef(s||""),N=1e3/(n||30),[M,k]=a.useState(new u.Texture),_=a.useRef(0),[q,C]=a.useState([1,1,1]),D=x?-1:1;const I=(e,r)=>{const t=r/e;return j.current.scale.set(1,t,1),[1,t,1]};a.useEffect((()=>{if(c&&o)!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,o,U);else if(o){const e=new u.TextureLoader;new Promise((r=>{e.load(o,r)})).then((e=>{U(null,e)}))}}),[]),a.useLayoutEffect((()=>{X()}),[M,x]),a.useEffect((()=>{}),[S]),a.useEffect((()=>{T.current!==s&&s&&(P.current=0,T.current=s)}),[s]);const U=(e,r)=>{if(null===e){if(r&&i){const e=r.image.width,t=r.image.height,n=e/i,a=t;if(L.current=r,_.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:W(),_.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length,L.current=r;const{w:t,h:n}=B(e.frames).sourceSize,a=I(t,n);C(a),R.current&&(R.current.map=r)}r.premultiplyAlpha=!1,k(r)},W=()=>{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],s=u.frame,c=s.x,o=s.y,f=s.w,i=s.h,m=u.sourceSize.w,l=u.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:c,y:o,w:f,h:i,frame:s,sourceSize:{w:m,h:l}})}}return e},X=()=>{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};R.current.map.wrapS=R.current.map.wrapT=u.RepeatWrapping,R.current.map.center.set(0,0),R.current.map.repeat.set(1*D/(e.w/t),1/(e.h/n));const a=1/((e.h-1)/n);R.current.map.offset.x=0,R.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=R.current)&&u.map&&(S||(m||d)&&((()=>{const r=window.performance.now(),n=r-v.current,{meta:{size:a},frames:u}=A.current,{w:c,h:o}=B(u).sourceSize,i=Array.isArray(u)?u:s?u[s]:[];let m=0,l=0;const p=t||i.length-1;if(P.current>p&&(P.current=f&&null!=e?e:0,f?null==w||w({currentFrameName:s,currentFrame:P.current}):null==h||h({currentFrameName:s,currentFrame:P.current}),!f))return;if(n<=N)return;v.current=r-n%N,I(c,o);const y=(a.w-1)/c,d=(a.h-1)/o,{frame:{x:S,y:x},sourceSize:{w:g,h:b}}=i[P.current],z=1/y,F=1/d;m=D>0?z*(S/g):z*(S/g)-R.current.map.repeat.x,l=Math.abs(1-F)-F*(x/b),R.current.map.offset.x=m,R.current.map.offset.y=l,P.current+=1})(),y&&y({currentFrameName:T.current,currentFrame:P.current})))}));const B=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:j,scale:q},a.createElement("spriteMaterial",{toneMapped:!1,ref:R,map:M,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: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)};

package/core/SpriteAnimator.js

@@ -27,6 +27,7 @@ const SpriteAnimator = ({
   useThree(state => state.viewport);
   const spriteData = React.useRef(null);
   const [isJsonReady, setJsonReady] = React.useState(false);
+  const hasEnded = React.useRef(false);
   const matRef = React.useRef();
   const spriteRef = React.useRef();
   const timerOffset = React.useRef(window.performance.now());
@@ -79,6 +80,7 @@ const SpriteAnimator = ({
     if (currentFrameName.current !== frameName && frameName) {
       currentFrame.current = 0;
       currentFrameName.current = frameName;
+      hasEnded.current = false;
     }
   }, [frameName]);
 
@@ -261,6 +263,7 @@ const SpriteAnimator = ({
           currentFrameName: frameName,
           currentFrame: currentFrame.current
         });
+        hasEnded.current = true;
       }
 
       if (!loop) return;
@@ -302,7 +305,7 @@ const SpriteAnimator = ({
       return;
     }
 
-    if (autoPlay || play) {
+    if (!hasEnded.current && (autoPlay || play)) {
       runAnimation();
       onFrame && onFrame({
         currentFrameName: currentFrameName.current,