@react-three/drei 9.117.0 → 9.117.2
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 +54 -0
- package/core/Decal.cjs.js +1 -1
- package/core/Decal.js +49 -16
- package/core/Environment.cjs.js +1 -1
- package/core/Environment.js +4 -6
- package/core/Progress.cjs.js +1 -1
- package/core/Progress.d.ts +1 -1
- package/core/Progress.js +1 -1
- package/index.cjs.js +1 -1
- package/package.json +2 -2
- package/web/KeyboardControls.cjs.js +1 -1
- package/web/KeyboardControls.js +1 -1
- package/web/Select.cjs.js +1 -1
- package/web/Select.js +1 -1
package/README.md
CHANGED
|
@@ -796,3 +796,57 @@ https://pmndrs.github.io/drei
|
|
|
796
796
|
[Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)
|
|
797
797
|
|
|
798
798
|
</details>
|
|
799
|
+
|
|
800
|
+
## Dev
|
|
801
|
+
|
|
802
|
+
### INSTALL
|
|
803
|
+
|
|
804
|
+
```sh
|
|
805
|
+
$ corepack enable
|
|
806
|
+
$ yarn install
|
|
807
|
+
```
|
|
808
|
+
|
|
809
|
+
### Test
|
|
810
|
+
|
|
811
|
+
#### Local
|
|
812
|
+
|
|
813
|
+
Pre-requisites:
|
|
814
|
+
|
|
815
|
+
- ```sh
|
|
816
|
+
$ npx playwright install
|
|
817
|
+
```
|
|
818
|
+
|
|
819
|
+
To run visual tests locally:
|
|
820
|
+
|
|
821
|
+
```sh
|
|
822
|
+
$ yarn build
|
|
823
|
+
$ yarn test
|
|
824
|
+
```
|
|
825
|
+
|
|
826
|
+
To update a snapshot:
|
|
827
|
+
|
|
828
|
+
```sh
|
|
829
|
+
$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
|
|
830
|
+
```
|
|
831
|
+
|
|
832
|
+
#### Docker
|
|
833
|
+
|
|
834
|
+
> [!IMPORTANT]
|
|
835
|
+
> Snapshots are system-dependent, so to run playwright in the same environment as the CI:
|
|
836
|
+
|
|
837
|
+
```sh
|
|
838
|
+
$ docker run --init --rm \
|
|
839
|
+
-v $(pwd):/app -w /app \
|
|
840
|
+
ghcr.io/pmndrs/playwright:drei \
|
|
841
|
+
sh -c "corepack enable && yarn install && yarn build && yarn test"
|
|
842
|
+
```
|
|
843
|
+
|
|
844
|
+
To update a snapshot:
|
|
845
|
+
|
|
846
|
+
```sh
|
|
847
|
+
$ docker run --init --rm \
|
|
848
|
+
-v $(pwd):/app -w /app \
|
|
849
|
+
-e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 \
|
|
850
|
+
ghcr.io/pmndrs/playwright:drei \
|
|
851
|
+
sh -c "corepack enable && yarn install && yarn build && yarn test"
|
|
852
|
+
```
|
package/core/Decal.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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),o=require("@react-three/fiber"),n=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=a(e),s=i(t),l=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof l.Vector3||e instanceof l.Euler?[e.x,e.y,e.z]:[e,e,e]}const p=s.forwardRef((function({debug:e,depthTest:t=!1,polygonOffsetFactor:r=-10,map:a,mesh:i,children:p,position:f,rotation:m,scale:y,...d},b){const h=s.useRef(null);s.useImperativeHandle(b,(()=>h.current));const g=s.useRef(null),w=s.useRef({position:new l.Vector3,rotation:new l.Euler,scale:new l.Vector3(1,1,1)});return s.useLayoutEffect((()=>{const e=(null==i?void 0:i.current)||h.current.parent,t=h.current;if(!(e instanceof l.Mesh))throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');if(e){o.applyProps(w.current,{position:f,scale:y});const r=e.matrixWorld.clone();if(e.matrixWorld.identity(),m&&"number"!=typeof m)o.applyProps(w.current,{rotation:m});else{const t=new l.Object3D;t.position.copy(w.current.position);const r=e.geometry.attributes.position.array;void 0===e.geometry.attributes.normal&&e.geometry.computeVertexNormals();const n=e.geometry.attributes.normal.array;let a=1/0;new l.Vector3;let i=new l.Vector3;const c=t.position.x,s=t.position.y,u=t.position.z,p=r.length;let f=-1;for(let e=0;e<p;e+=3){const t=r[e]-c,o=r[e+1]-s,n=r[e+2]-u,i=t*t+o*o+n*n;i<a&&(a=i,f=e)}i.fromArray(n,f),t.lookAt(t.position.clone().add(i)),t.rotateZ(Math.PI),t.rotateY(Math.PI),"number"==typeof m&&t.rotateZ(m),o.applyProps(w.current,{rotation:t.rotation})}return t.geometry=new n.DecalGeometry(e,w.current.position,w.current.rotation,w.current.scale),e.matrixWorld=r,()=>{t.geometry.dispose()}}}),[i,...u(f),...u(y),...u(m)]),s.useLayoutEffect((()=>{g.current&&(o.applyProps(g.current,w.current),g.current.traverse((e=>e.raycast=()=>null)))}),[e]),s.createElement("mesh",c.default({ref:h,"material-transparent":!0,"material-polygonOffset":!0,"material-polygonOffsetFactor":r,"material-depthTest":t,"material-map":a},d),p,e&&s.createElement("mesh",{ref:g},s.createElement("boxGeometry",null),s.createElement("meshNormalMaterial",{wireframe:!0}),s.createElement("axesHelper",null)))}));exports.Decal=p;
|
package/core/Decal.js
CHANGED
|
@@ -31,19 +31,19 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
|
|
|
31
31
|
const ref = React.useRef(null);
|
|
32
32
|
React.useImperativeHandle(forwardRef, () => ref.current);
|
|
33
33
|
const helper = React.useRef(null);
|
|
34
|
+
const state = React.useRef({
|
|
35
|
+
position: new THREE.Vector3(),
|
|
36
|
+
rotation: new THREE.Euler(),
|
|
37
|
+
scale: new THREE.Vector3(1, 1, 1)
|
|
38
|
+
});
|
|
34
39
|
React.useLayoutEffect(() => {
|
|
35
40
|
const parent = (mesh == null ? void 0 : mesh.current) || ref.current.parent;
|
|
36
41
|
const target = ref.current;
|
|
37
42
|
if (!(parent instanceof THREE.Mesh)) {
|
|
38
43
|
throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');
|
|
39
44
|
}
|
|
40
|
-
const state = {
|
|
41
|
-
position: new THREE.Vector3(),
|
|
42
|
-
rotation: new THREE.Euler(),
|
|
43
|
-
scale: new THREE.Vector3(1, 1, 1)
|
|
44
|
-
};
|
|
45
45
|
if (parent) {
|
|
46
|
-
applyProps(state, {
|
|
46
|
+
applyProps(state.current, {
|
|
47
47
|
position,
|
|
48
48
|
scale
|
|
49
49
|
});
|
|
@@ -53,23 +53,49 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
|
|
|
53
53
|
parent.matrixWorld.identity();
|
|
54
54
|
if (!rotation || typeof rotation === 'number') {
|
|
55
55
|
const o = new THREE.Object3D();
|
|
56
|
-
o.position.copy(state.position);
|
|
57
|
-
|
|
56
|
+
o.position.copy(state.current.position);
|
|
57
|
+
|
|
58
|
+
// Thanks https://x.com/N8Programs !
|
|
59
|
+
const vertices = parent.geometry.attributes.position.array;
|
|
60
|
+
if (parent.geometry.attributes.normal === undefined) parent.geometry.computeVertexNormals();
|
|
61
|
+
const normal = parent.geometry.attributes.normal.array;
|
|
62
|
+
let distance = Infinity;
|
|
63
|
+
new THREE.Vector3();
|
|
64
|
+
let closestNormal = new THREE.Vector3();
|
|
65
|
+
const ox = o.position.x;
|
|
66
|
+
const oy = o.position.y;
|
|
67
|
+
const oz = o.position.z;
|
|
68
|
+
const vLength = vertices.length;
|
|
69
|
+
let chosenIdx = -1;
|
|
70
|
+
for (let i = 0; i < vLength; i += 3) {
|
|
71
|
+
const x = vertices[i];
|
|
72
|
+
const y = vertices[i + 1];
|
|
73
|
+
const z = vertices[i + 2];
|
|
74
|
+
const xDiff = x - ox;
|
|
75
|
+
const yDiff = y - oy;
|
|
76
|
+
const zDiff = z - oz;
|
|
77
|
+
const distSquared = xDiff * xDiff + yDiff * yDiff + zDiff * zDiff;
|
|
78
|
+
if (distSquared < distance) {
|
|
79
|
+
distance = distSquared;
|
|
80
|
+
chosenIdx = i;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
closestNormal.fromArray(normal, chosenIdx);
|
|
84
|
+
|
|
85
|
+
// Get vector tangent to normal
|
|
86
|
+
o.lookAt(o.position.clone().add(closestNormal));
|
|
87
|
+
o.rotateZ(Math.PI);
|
|
88
|
+
o.rotateY(Math.PI);
|
|
58
89
|
if (typeof rotation === 'number') o.rotateZ(rotation);
|
|
59
|
-
applyProps(state, {
|
|
90
|
+
applyProps(state.current, {
|
|
60
91
|
rotation: o.rotation
|
|
61
92
|
});
|
|
62
93
|
} else {
|
|
63
|
-
applyProps(state, {
|
|
94
|
+
applyProps(state.current, {
|
|
64
95
|
rotation
|
|
65
96
|
});
|
|
66
97
|
}
|
|
67
|
-
target.geometry = new DecalGeometry(parent, state.position, state.rotation, state.scale);
|
|
68
|
-
if (helper.current) {
|
|
69
|
-
applyProps(helper.current, state);
|
|
70
|
-
// Prevent the helpers from blocking rays
|
|
71
|
-
helper.current.traverse(child => child.raycast = () => null);
|
|
72
|
-
}
|
|
98
|
+
target.geometry = new DecalGeometry(parent, state.current.position, state.current.rotation, state.current.scale);
|
|
73
99
|
// Reset parents matix-world
|
|
74
100
|
parent.matrixWorld = matrixWorld;
|
|
75
101
|
return () => {
|
|
@@ -77,6 +103,13 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
|
|
|
77
103
|
};
|
|
78
104
|
}
|
|
79
105
|
}, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]);
|
|
106
|
+
React.useLayoutEffect(() => {
|
|
107
|
+
if (helper.current) {
|
|
108
|
+
applyProps(helper.current, state.current);
|
|
109
|
+
// Prevent the helpers from blocking rays
|
|
110
|
+
helper.current.traverse(child => child.raycast = () => null);
|
|
111
|
+
}
|
|
112
|
+
}, [debug]);
|
|
80
113
|
|
|
81
114
|
// <meshStandardMaterial transparent polygonOffset polygonOffsetFactor={-10} {...props} />}
|
|
82
115
|
return /*#__PURE__*/React.createElement("mesh", _extends({
|
package/core/Environment.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),t=require("@react-three/fiber"),r=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var c=a(e),s=i(n);function l(e,n,r,o,u={}){var a,i,c,s
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),t=require("@react-three/fiber"),r=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var c=a(e),s=i(n);function l(e,n,r,o,u={}){var a,i,c,s;u={backgroundBlurriness:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const l=(e=>{return(n=e).current&&n.current.isScene?e.current:e;var n})(n||r),d=l.background,m=l.environment,g={backgroundBlurriness:l.backgroundBlurriness,backgroundIntensity:l.backgroundIntensity,backgroundRotation:null!==(a=null==(i=l.backgroundRotation)||null==i.clone?void 0:i.clone())&&void 0!==a?a:[0,0,0],environmentIntensity:l.environmentIntensity,environmentRotation:null!==(c=null==(s=l.environmentRotation)||null==s.clone?void 0:s.clone())&&void 0!==c?c:[0,0,0]};return"only"!==e&&(l.environment=o),e&&(l.background=o),t.applyProps(l,u),()=>{"only"!==e&&(l.environment=m),e&&(l.background=d),t.applyProps(l,g)}}function d({scene:e,background:n=!1,map:r,...o}){const u=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>{if(r)return l(n,e,u,r,o)})),null}function m({background:e=!1,scene:n,blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d,...m}){const g=u.useEnvironment(m),b=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>l(e,n,b,g,{backgroundBlurriness:null!=r?r:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d}))),null}function g({children:e,near:n=.1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:c=!1,blur:g,backgroundBlurriness:b,backgroundIntensity:v,backgroundRotation:f,environmentIntensity:p,environmentRotation:k,scene:y,files:E,path:h,preset:j,extensions:I}){const R=t.useThree((e=>e.gl)),x=t.useThree((e=>e.scene)),P=s.useRef(null),[q]=s.useState((()=>new r.Scene)),C=s.useMemo((()=>{const e=new r.WebGLCubeRenderTarget(u);return e.texture.type=r.HalfFloatType,e}),[u]);s.useLayoutEffect((()=>{if(1===a){const e=R.autoClear;R.autoClear=!0,P.current.update(R,q),R.autoClear=e}return l(c,y,x,C.texture,{backgroundBlurriness:null!=g?g:b,backgroundIntensity:v,backgroundRotation:f,environmentIntensity:p,environmentRotation:k})}),[e,q,C.texture,y,x,c,a,R]);let B=1;return t.useFrame((()=>{if(a===1/0||B<a){const e=R.autoClear;R.autoClear=!0,P.current.update(R,q),R.autoClear=e,B++}})),s.createElement(s.Fragment,null,t.createPortal(s.createElement(s.Fragment,null,e,s.createElement("cubeCamera",{ref:P,args:[n,o,C]}),E||j?s.createElement(m,{background:!0,files:E,preset:j,path:h,extensions:I}):i?s.createElement(d,{background:!0,map:i,extensions:I}):null),q))}function b(e){var n,r,a,i;const l=u.useEnvironment(e),m=e.map||l;s.useMemo((()=>t.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]);const g=s.useMemo((()=>[m]),[m]),b=null==(n=e.ground)?void 0:n.height,v=null==(r=e.ground)?void 0:r.radius,f=null!==(a=null==(i=e.ground)?void 0:i.scale)&&void 0!==a?a:1e3;return s.createElement(s.Fragment,null,s.createElement(d,c.default({},e,{map:m})),s.createElement("groundProjectedEnvImpl",{args:g,scale:f,height:b,radius:v}))}exports.Environment=function(e){return e.ground?s.createElement(b,e):e.map?s.createElement(d,e):e.children?s.createElement(g,e):s.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=g;
|
package/core/Environment.js
CHANGED
|
@@ -8,10 +8,10 @@ import { useEnvironment } from './useEnvironment.js';
|
|
|
8
8
|
const isRef = obj => obj.current && obj.current.isScene;
|
|
9
9
|
const resolveScene = scene => isRef(scene) ? scene.current : scene;
|
|
10
10
|
function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
|
|
11
|
-
var
|
|
11
|
+
var _target$backgroundRot, _target$backgroundRot2, _target$environmentRo, _target$environmentRo2;
|
|
12
12
|
// defaults
|
|
13
13
|
sceneProps = {
|
|
14
|
-
backgroundBlurriness:
|
|
14
|
+
backgroundBlurriness: 0,
|
|
15
15
|
backgroundIntensity: 1,
|
|
16
16
|
backgroundRotation: [0, 0, 0],
|
|
17
17
|
environmentIntensity: 1,
|
|
@@ -69,8 +69,7 @@ function EnvironmentCube({
|
|
|
69
69
|
const defaultScene = useThree(state => state.scene);
|
|
70
70
|
React.useLayoutEffect(() => {
|
|
71
71
|
return setEnvProps(background, scene, defaultScene, texture, {
|
|
72
|
-
blur,
|
|
73
|
-
backgroundBlurriness,
|
|
72
|
+
backgroundBlurriness: blur !== null && blur !== void 0 ? blur : backgroundBlurriness,
|
|
74
73
|
backgroundIntensity,
|
|
75
74
|
backgroundRotation,
|
|
76
75
|
environmentIntensity,
|
|
@@ -116,8 +115,7 @@ function EnvironmentPortal({
|
|
|
116
115
|
gl.autoClear = autoClear;
|
|
117
116
|
}
|
|
118
117
|
return setEnvProps(background, scene, defaultScene, fbo.texture, {
|
|
119
|
-
blur,
|
|
120
|
-
backgroundBlurriness,
|
|
118
|
+
backgroundBlurriness: blur !== null && blur !== void 0 ? blur : backgroundBlurriness,
|
|
121
119
|
backgroundIntensity,
|
|
122
120
|
backgroundRotation,
|
|
123
121
|
environmentIntensity,
|
package/core/Progress.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("zustand");function a(e){
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("zustand");function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=a(e);let n=0;const s=t.create((e=>(r.DefaultLoadingManager.onStart=(r,t,a)=>{e({active:!0,item:r,loaded:t,total:a,progress:(t-n)/(a-n)*100})},r.DefaultLoadingManager.onLoad=()=>{e({active:!1})},r.DefaultLoadingManager.onError=r=>e((e=>({errors:[...e.errors,r]}))),r.DefaultLoadingManager.onProgress=(r,t,a)=>{t===a&&(n=a),e({active:!0,item:r,loaded:t,total:a,progress:(t-n)/(a-n)*100||100})},{errors:[],active:!1,progress:0,item:"",loaded:0,total:0})));exports.Progress=function({children:e}){const r=s();return o.createElement(o.Fragment,null,null==e?void 0:e(r))},exports.useProgress=s;
|
package/core/Progress.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ type Data = {
|
|
|
7
7
|
loaded: number;
|
|
8
8
|
total: number;
|
|
9
9
|
};
|
|
10
|
-
declare const useProgress: import("zustand").UseBoundStore<
|
|
10
|
+
declare const useProgress: import("zustand").UseBoundStore<import("zustand").StoreApi<Data>>;
|
|
11
11
|
export { useProgress };
|
|
12
12
|
export declare function Progress({ children }: {
|
|
13
13
|
children?: (result: Data) => React.ReactNode;
|