@react-three/drei 9.81.0 → 9.82.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -5
- package/core/BBAnchor.cjs.js +1 -1
- package/core/BBAnchor.js +1 -1
- package/core/RoundedBox.cjs.js +1 -1
- package/core/RoundedBox.d.ts +1 -0
- package/core/RoundedBox.js +2 -1
- package/core/SpriteAnimator.cjs.js +1 -1
- package/core/SpriteAnimator.js +4 -1
- package/core/useGLTF.cjs.js +1 -1
- package/core/useGLTF.d.ts +1 -0
- package/core/useGLTF.js +6 -1
- package/index.cjs.js +1 -1
- package/package.json +3 -2
- package/react-three-drei-0.0.0-semantic-release.tgz +0 -0
package/README.md
CHANGED
|
@@ -969,6 +969,7 @@ A box buffer geometry with rounded corners, done with extrusion.
|
|
|
969
969
|
args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]
|
|
970
970
|
radius={0.05} // Radius of the rounded corners. Default is 0.05
|
|
971
971
|
smoothness={4} // The number of curve segments. Default is 4
|
|
972
|
+
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.
|
|
972
973
|
creaseAngle={0.4} // Smooth normals everywhere except faces that meet at an angle greater than the crease angle
|
|
973
974
|
{...meshProps} // All THREE.Mesh props are valid
|
|
974
975
|
>
|
|
@@ -2795,6 +2796,10 @@ useGLTF(url, '/draco-gltf')
|
|
|
2795
2796
|
useGLTF.preload(url)
|
|
2796
2797
|
```
|
|
2797
2798
|
|
|
2799
|
+
If you want to use your own draco decoder globally, you can pass it through `useGLTF.setDecoderPath(path)`:
|
|
2800
|
+
|
|
2801
|
+
````jsx
|
|
2802
|
+
|
|
2798
2803
|
> **Note** <br>If you are using the CDN loaded draco binaries, you can get a small speedup in loading time by prefetching them.
|
|
2799
2804
|
>
|
|
2800
2805
|
> You can accomplish this by adding two `<link>` tags to your `<head>` tag, as below. The version in those URLs must exactly match what [useGLTF](src/core/useGLTF.tsx#L18) uses for this to work. If you're using create-react-app, `public/index.html` file contains the `<head>` tag.
|
|
@@ -2827,7 +2832,7 @@ function SuzanneFBX() {
|
|
|
2827
2832
|
let fbx = useFBX('suzanne/suzanne.fbx')
|
|
2828
2833
|
return <primitive object={fbx} />
|
|
2829
2834
|
}
|
|
2830
|
-
|
|
2835
|
+
````
|
|
2831
2836
|
|
|
2832
2837
|
#### useTexture
|
|
2833
2838
|
|
|
@@ -3300,7 +3305,7 @@ function App() {
|
|
|
3300
3305
|
const [dpr, setDpr] = useState(1.5)
|
|
3301
3306
|
return (
|
|
3302
3307
|
<Canvas dpr={dpr}>
|
|
3303
|
-
<PerformanceMonitor onIncline={() => setDpr(2)} onDecline={() => setDpr(1)}
|
|
3308
|
+
<PerformanceMonitor onIncline={() => setDpr(2)} onDecline={() => setDpr(1)} />
|
|
3304
3309
|
```
|
|
3305
3310
|
|
|
3306
3311
|
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 +3315,16 @@ The following starts at the highest dpr (2) and clamps the gradual dpr between 0
|
|
|
3310
3315
|
```jsx
|
|
3311
3316
|
import round from 'lodash/round'
|
|
3312
3317
|
|
|
3313
|
-
const [dpr,
|
|
3318
|
+
const [dpr, setDpr] = useState(2)
|
|
3314
3319
|
return (
|
|
3315
3320
|
<Canvas dpr={dpr}>
|
|
3316
|
-
<PerformanceMonitor factor={1} onChange={({ factor }) => setDpr(round(0.5 + 1.5 * factor, 1))}
|
|
3321
|
+
<PerformanceMonitor factor={1} onChange={({ factor }) => setDpr(round(0.5 + 1.5 * factor, 1))} />
|
|
3317
3322
|
```
|
|
3318
3323
|
|
|
3319
3324
|
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.
|
|
3320
3325
|
|
|
3321
3326
|
```jsx
|
|
3322
|
-
<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)}
|
|
3327
|
+
<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)} />
|
|
3323
3328
|
```
|
|
3324
3329
|
|
|
3325
3330
|
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/BBAnchor.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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=u(e),o=c(r),i=c(t);const s=new i.Box3,f=new i.Vector3;exports.BBAnchor=({anchor:e,...r})=>{const t=o.useRef(null),u=o.useRef(null);return o.useEffect((()=>{var e,r;null!=(e=t.current)&&null!=(r=e.parent)&&r.parent&&(u.current=t.current.parent,t.current.parent.parent.add(t.current))}),[]),n.useFrame((()=>{u.current&&(s.setFromObject(u.current),s.getSize(f),t.current.position.set(u.current.position.x+f.x*(Array.isArray(e)?e[0]:e.x)/2,u.current.position.y+f.y*(Array.isArray(e)?e[1]:e.y)/2,u.current.position.z+f.z*(Array.isArray(e)?e[2]:e.z)/2))})),o.createElement("group",a.default({ref:t},r))};
|
package/core/BBAnchor.js
CHANGED
|
@@ -26,7 +26,7 @@ const BBAnchor = ({
|
|
|
26
26
|
if (parentRef.current) {
|
|
27
27
|
boundingBox.setFromObject(parentRef.current);
|
|
28
28
|
boundingBox.getSize(boundingBoxSize);
|
|
29
|
-
ref.current.position.set(parentRef.current.position.x + boundingBoxSize.x * anchor[0] / 2, parentRef.current.position.y + boundingBoxSize.y * anchor[1] / 2, parentRef.current.position.z + boundingBoxSize.z * anchor[2] / 2);
|
|
29
|
+
ref.current.position.set(parentRef.current.position.x + boundingBoxSize.x * (Array.isArray(anchor) ? anchor[0] : anchor.x) / 2, parentRef.current.position.y + boundingBoxSize.y * (Array.isArray(anchor) ? anchor[1] : anchor.y) / 2, parentRef.current.position.z + boundingBoxSize.z * (Array.isArray(anchor) ? anchor[2] : anchor.z) / 2);
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
32
|
return /*#__PURE__*/React.createElement("group", _extends({
|
package/core/RoundedBox.cjs.js
CHANGED
|
@@ -1 +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
|
|
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 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
CHANGED
package/core/RoundedBox.js
CHANGED
|
@@ -20,6 +20,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
|
|
|
20
20
|
radius = 0.05,
|
|
21
21
|
steps = 1,
|
|
22
22
|
smoothness = 4,
|
|
23
|
+
bevelSegments = 4,
|
|
23
24
|
creaseAngle = 0.4,
|
|
24
25
|
children,
|
|
25
26
|
...rest
|
|
@@ -28,7 +29,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
|
|
|
28
29
|
const params = React.useMemo(() => ({
|
|
29
30
|
depth: depth - radius * 2,
|
|
30
31
|
bevelEnabled: true,
|
|
31
|
-
bevelSegments:
|
|
32
|
+
bevelSegments: bevelSegments * 2,
|
|
32
33
|
steps,
|
|
33
34
|
bevelSize: radius - eps,
|
|
34
35
|
bevelThickness: radius,
|
|
@@ -1 +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:
|
|
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)};
|
package/core/SpriteAnimator.js
CHANGED
|
@@ -27,6 +27,7 @@ const SpriteAnimator = ({
|
|
|
27
27
|
useThree(state => state.viewport);
|
|
28
28
|
const spriteData = React.useRef(null);
|
|
29
29
|
const [isJsonReady, setJsonReady] = React.useState(false);
|
|
30
|
+
const hasEnded = React.useRef(false);
|
|
30
31
|
const matRef = React.useRef();
|
|
31
32
|
const spriteRef = React.useRef();
|
|
32
33
|
const timerOffset = React.useRef(window.performance.now());
|
|
@@ -79,6 +80,7 @@ const SpriteAnimator = ({
|
|
|
79
80
|
if (currentFrameName.current !== frameName && frameName) {
|
|
80
81
|
currentFrame.current = 0;
|
|
81
82
|
currentFrameName.current = frameName;
|
|
83
|
+
hasEnded.current = false;
|
|
82
84
|
}
|
|
83
85
|
}, [frameName]);
|
|
84
86
|
|
|
@@ -261,6 +263,7 @@ const SpriteAnimator = ({
|
|
|
261
263
|
currentFrameName: frameName,
|
|
262
264
|
currentFrame: currentFrame.current
|
|
263
265
|
});
|
|
266
|
+
hasEnded.current = true;
|
|
264
267
|
}
|
|
265
268
|
|
|
266
269
|
if (!loop) return;
|
|
@@ -302,7 +305,7 @@ const SpriteAnimator = ({
|
|
|
302
305
|
return;
|
|
303
306
|
}
|
|
304
307
|
|
|
305
|
-
if (autoPlay || play) {
|
|
308
|
+
if (!hasEnded.current && (autoPlay || play)) {
|
|
306
309
|
runAnimation();
|
|
307
310
|
onFrame && onFrame({
|
|
308
311
|
currentFrameName: currentFrameName.current,
|
package/core/useGLTF.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three-stdlib"),r=require("@react-three/fiber");let o=null;function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three-stdlib"),r=require("@react-three/fiber");let o=null,t="https://www.gstatic.com/draco/versioned/decoders/1.5.5/";function d(r,d,s){return a=>{s&&s(a),r&&(o||(o=new e.DRACOLoader),o.setDecoderPath("string"==typeof r?r:t),a.setDRACOLoader(o)),d&&a.setMeshoptDecoder("function"==typeof e.MeshoptDecoder?e.MeshoptDecoder():e.MeshoptDecoder)}}function s(o,t=!0,s=!0,a){return r.useLoader(e.GLTFLoader,o,d(t,s,a))}s.preload=(o,t=!0,s=!0,a)=>r.useLoader.preload(e.GLTFLoader,o,d(t,s,a)),s.clear=o=>r.useLoader.clear(e.GLTFLoader,o),s.setDecoderPath=e=>{t=e},exports.useGLTF=s;
|
package/core/useGLTF.d.ts
CHANGED
|
@@ -3,4 +3,5 @@ export declare function useGLTF<T extends string | string[]>(path: T, useDraco?:
|
|
|
3
3
|
export declare namespace useGLTF {
|
|
4
4
|
var preload: (path: string | string[], useDraco?: string | boolean, useMeshOpt?: boolean, extendLoader?: ((loader: GLTFLoader) => void) | undefined) => undefined;
|
|
5
5
|
var clear: (input: string | string[]) => void;
|
|
6
|
+
var setDecoderPath: (path: string) => void;
|
|
6
7
|
}
|
package/core/useGLTF.js
CHANGED
|
@@ -3,6 +3,7 @@ import { useLoader } from '@react-three/fiber';
|
|
|
3
3
|
|
|
4
4
|
// @ts-ignore
|
|
5
5
|
let dracoLoader = null;
|
|
6
|
+
let decoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/';
|
|
6
7
|
|
|
7
8
|
function extensions(useDraco, useMeshopt, extendLoader) {
|
|
8
9
|
return loader => {
|
|
@@ -15,7 +16,7 @@ function extensions(useDraco, useMeshopt, extendLoader) {
|
|
|
15
16
|
dracoLoader = new DRACOLoader();
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
dracoLoader.setDecoderPath(typeof useDraco === 'string' ? useDraco :
|
|
19
|
+
dracoLoader.setDecoderPath(typeof useDraco === 'string' ? useDraco : decoderPath);
|
|
19
20
|
loader.setDRACOLoader(dracoLoader);
|
|
20
21
|
}
|
|
21
22
|
|
|
@@ -34,4 +35,8 @@ useGLTF.preload = (path, useDraco = true, useMeshOpt = true, extendLoader) => us
|
|
|
34
35
|
|
|
35
36
|
useGLTF.clear = input => useLoader.clear(GLTFLoader, input);
|
|
36
37
|
|
|
38
|
+
useGLTF.setDecoderPath = path => {
|
|
39
|
+
decoderPath = path;
|
|
40
|
+
};
|
|
41
|
+
|
|
37
42
|
export { useGLTF };
|