@react-three/drei 9.82.0 → 9.83.0
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 +8 -2
- package/core/BBAnchor.cjs.js +1 -1
- package/core/BBAnchor.js +1 -1
- package/core/SpriteAnimator.cjs.js +1 -1
- package/core/SpriteAnimator.d.ts +1 -0
- package/core/SpriteAnimator.js +18 -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 +2 -1
- package/react-three-drei-0.0.0-semantic-release.tgz +0 -0
package/README.md
CHANGED
|
@@ -2358,6 +2358,8 @@ type Props = {
|
|
|
2358
2358
|
flipX?: boolean
|
|
2359
2359
|
/** Sets the alpha value to be used when running an alpha test. https://threejs.org/docs/#api/en/materials/Material.alphaTest */
|
|
2360
2360
|
alphaTest?: number
|
|
2361
|
+
/** Displays the texture on a SpriteGeometry always facing the camera, if set to false, it renders on a PlaneGeometry */
|
|
2362
|
+
asSprite?: boolean
|
|
2361
2363
|
}
|
|
2362
2364
|
```
|
|
2363
2365
|
|
|
@@ -2796,6 +2798,10 @@ useGLTF(url, '/draco-gltf')
|
|
|
2796
2798
|
useGLTF.preload(url)
|
|
2797
2799
|
```
|
|
2798
2800
|
|
|
2801
|
+
If you want to use your own draco decoder globally, you can pass it through `useGLTF.setDecoderPath(path)`:
|
|
2802
|
+
|
|
2803
|
+
````jsx
|
|
2804
|
+
|
|
2799
2805
|
> **Note** <br>If you are using the CDN loaded draco binaries, you can get a small speedup in loading time by prefetching them.
|
|
2800
2806
|
>
|
|
2801
2807
|
> 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.
|
|
@@ -2828,7 +2834,7 @@ function SuzanneFBX() {
|
|
|
2828
2834
|
let fbx = useFBX('suzanne/suzanne.fbx')
|
|
2829
2835
|
return <primitive object={fbx} />
|
|
2830
2836
|
}
|
|
2831
|
-
|
|
2837
|
+
````
|
|
2832
2838
|
|
|
2833
2839
|
#### useTexture
|
|
2834
2840
|
|
|
@@ -3320,7 +3326,7 @@ return (
|
|
|
3320
3326
|
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.
|
|
3321
3327
|
|
|
3322
3328
|
```jsx
|
|
3323
|
-
<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)}/>
|
|
3329
|
+
<PerformanceMonitor flipflops={3} onFallback={() => setDpr(1)} />
|
|
3324
3330
|
```
|
|
3325
3331
|
|
|
3326
3332
|
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({
|
|
@@ -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: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
CHANGED
package/core/SpriteAnimator.js
CHANGED
|
@@ -22,6 +22,7 @@ const SpriteAnimator = ({
|
|
|
22
22
|
flipX,
|
|
23
23
|
alphaTest,
|
|
24
24
|
children,
|
|
25
|
+
asSprite,
|
|
25
26
|
...props
|
|
26
27
|
}, fref) => {
|
|
27
28
|
useThree(state => state.viewport);
|
|
@@ -39,6 +40,7 @@ const SpriteAnimator = ({
|
|
|
39
40
|
const totalFrames = React.useRef(0);
|
|
40
41
|
const [aspect, setAspect] = React.useState([1, 1, 1]);
|
|
41
42
|
const flipOffset = flipX ? -1 : 1;
|
|
43
|
+
const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite !== null && asSprite !== void 0 ? asSprite : true);
|
|
42
44
|
|
|
43
45
|
function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
|
|
44
46
|
const textureLoader = new THREE.TextureLoader();
|
|
@@ -71,6 +73,9 @@ const SpriteAnimator = ({
|
|
|
71
73
|
});
|
|
72
74
|
}
|
|
73
75
|
}, []);
|
|
76
|
+
React.useEffect(() => {
|
|
77
|
+
setDisplayAsSprite(asSprite !== null && asSprite !== void 0 ? asSprite : true);
|
|
78
|
+
}, [asSprite]);
|
|
74
79
|
React.useLayoutEffect(() => {
|
|
75
80
|
modifySpritePosition();
|
|
76
81
|
}, [spriteTexture, flipX]);
|
|
@@ -330,7 +335,7 @@ const SpriteAnimator = ({
|
|
|
330
335
|
|
|
331
336
|
return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
|
|
332
337
|
fallback: null
|
|
333
|
-
}, /*#__PURE__*/React.createElement("sprite", {
|
|
338
|
+
}, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {
|
|
334
339
|
ref: spriteRef,
|
|
335
340
|
scale: aspect
|
|
336
341
|
}, /*#__PURE__*/React.createElement("spriteMaterial", {
|
|
@@ -339,6 +344,18 @@ const SpriteAnimator = ({
|
|
|
339
344
|
map: spriteTexture,
|
|
340
345
|
transparent: true,
|
|
341
346
|
alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
|
|
347
|
+
})), !displayAsSprite && /*#__PURE__*/React.createElement("mesh", {
|
|
348
|
+
ref: spriteRef,
|
|
349
|
+
scale: aspect
|
|
350
|
+
}, /*#__PURE__*/React.createElement("planeGeometry", {
|
|
351
|
+
args: [1, 1]
|
|
352
|
+
}), /*#__PURE__*/React.createElement("meshBasicMaterial", {
|
|
353
|
+
toneMapped: false,
|
|
354
|
+
side: THREE.DoubleSide,
|
|
355
|
+
ref: matRef,
|
|
356
|
+
map: spriteTexture,
|
|
357
|
+
transparent: true,
|
|
358
|
+
alphaTest: alphaTest !== null && alphaTest !== void 0 ? alphaTest : 0.0
|
|
342
359
|
}))), children);
|
|
343
360
|
};
|
|
344
361
|
|
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 };
|