@react-three/drei 9.117.0 → 9.117.1

package/README.md

@@ -796,3 +796,57 @@ https://pmndrs.github.io/drei
 [Documentation has moved here](https://pmndrs.github.io/drei/staging/shadow-alpha)
 
 </details>
+
+## Dev
+
+### INSTALL
+
+```sh
+$ corepack enable
+$ yarn install
+```
+
+### Test
+
+#### Local
+
+Pre-requisites:
+
+- ```sh
+  $ npx playwright install
+  ```
+
+To run visual tests locally:
+
+```sh
+$ yarn build
+$ yarn test
+```
+
+To update a snapshot:
+
+```sh
+$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test
+```
+
+#### Docker
+
+> [!IMPORTANT]
+> Snapshots are system-dependent, so to run playwright in the same environment as the CI:
+
+```sh
+$ docker run --init --rm \
+    -v $(pwd):/app -w /app \
+    ghcr.io/pmndrs/playwright:drei \
+      sh -c "corepack enable && yarn install && yarn build && yarn test"
+```
+
+To update a snapshot:
+
+```sh
+$ docker run --init --rm \
+    -v $(pwd):/app -w /app \
+    -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 \
+    ghcr.io/pmndrs/playwright:drei \
+      sh -c "corepack enable && yarn install && yarn build && yarn test"
+```

package/core/Decal.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("@react-three/fiber"),o=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 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 s=a(e),l=i(t),c=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof c.Vector3||e instanceof c.Euler?[e.x,e.y,e.z]:[e,e,e]}const p=l.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=l.useRef(null);l.useImperativeHandle(b,(()=>h.current));const O=l.useRef(null);return l.useLayoutEffect((()=>{const e=(null==i?void 0:i.current)||h.current.parent,t=h.current;if(!(e instanceof c.Mesh))throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');const r={position:new c.Vector3,rotation:new c.Euler,scale:new c.Vector3(1,1,1)};if(e){n.applyProps(r,{position:f,scale:y});const a=e.matrixWorld.clone();if(e.matrixWorld.identity(),m&&"number"!=typeof m)n.applyProps(r,{rotation:m});else{const t=new c.Object3D;t.position.copy(r.position),t.lookAt(e.position),"number"==typeof m&&t.rotateZ(m),n.applyProps(r,{rotation:t.rotation})}return t.geometry=new o.DecalGeometry(e,r.position,r.rotation,r.scale),O.current&&(n.applyProps(O.current,r),O.current.traverse((e=>e.raycast=()=>null))),e.matrixWorld=a,()=>{t.geometry.dispose()}}}),[i,...u(f),...u(y),...u(m)]),l.createElement("mesh",s.default({ref:h,"material-transparent":!0,"material-polygonOffset":!0,"material-polygonOffsetFactor":r,"material-depthTest":t,"material-map":a},d),p,e&&l.createElement("mesh",{ref:O},l.createElement("boxGeometry",null),l.createElement("meshNormalMaterial",{wireframe:!0}),l.createElement("axesHelper",null)))}));exports.Decal=p;
+"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 s=a(e),l=i(t),c=i(r);function u(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof c.Vector3||e instanceof c.Euler?[e.x,e.y,e.z]:[e,e,e]}const p=l.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=l.useRef(null);l.useImperativeHandle(b,(()=>h.current));const g=l.useRef(null);return l.useLayoutEffect((()=>{const e=(null==i?void 0:i.current)||h.current.parent,t=h.current;if(!(e instanceof c.Mesh))throw new Error('Decal must have a Mesh as parent or specify its "mesh" prop');const r={position:new c.Vector3,rotation:new c.Euler,scale:new c.Vector3(1,1,1)};if(e){o.applyProps(r,{position:f,scale:y});const a=e.matrixWorld.clone();if(e.matrixWorld.identity(),m&&"number"!=typeof m)o.applyProps(r,{rotation:m});else{const t=new c.Object3D;t.position.copy(r.position);const n=e.geometry.attributes.position.array;void 0===e.geometry.attributes.normal&&e.geometry.computeVertexNormals();const a=e.geometry.attributes.normal.array;let i=1/0;new c.Vector3;let s=new c.Vector3;const l=t.position.x,u=t.position.y,p=t.position.z,f=n.length;let y=-1;for(let e=0;e<f;e+=3){const t=n[e]-l,r=n[e+1]-u,o=n[e+2]-p,a=t*t+r*r+o*o;a<i&&(i=a,y=e)}s.fromArray(a,y),t.lookAt(t.position.clone().add(s)),t.rotateZ(Math.PI),t.rotateY(Math.PI),"number"==typeof m&&t.rotateZ(m),o.applyProps(r,{rotation:t.rotation})}return t.geometry=new n.DecalGeometry(e,r.position,r.rotation,r.scale),g.current&&(o.applyProps(g.current,r),g.current.traverse((e=>e.raycast=()=>null))),e.matrixWorld=a,()=>{t.geometry.dispose()}}}),[i,e,...u(f),...u(y),...u(m)]),l.createElement("mesh",s.default({ref:h,"material-transparent":!0,"material-polygonOffset":!0,"material-polygonOffsetFactor":r,"material-depthTest":t,"material-map":a},d),p,e&&l.createElement("mesh",{ref:g},l.createElement("boxGeometry",null),l.createElement("meshNormalMaterial",{wireframe:!0}),l.createElement("axesHelper",null)))}));exports.Decal=p;

package/core/Decal.js

@@ -54,7 +54,38 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
       if (!rotation || typeof rotation === 'number') {
         const o = new THREE.Object3D();
         o.position.copy(state.position);
-        o.lookAt(parent.position);
+
+        // Thanks https://x.com/N8Programs !
+        const vertices = parent.geometry.attributes.position.array;
+        if (parent.geometry.attributes.normal === undefined) parent.geometry.computeVertexNormals();
+        const normal = parent.geometry.attributes.normal.array;
+        let distance = Infinity;
+        new THREE.Vector3();
+        let closestNormal = new THREE.Vector3();
+        const ox = o.position.x;
+        const oy = o.position.y;
+        const oz = o.position.z;
+        const vLength = vertices.length;
+        let chosenIdx = -1;
+        for (let i = 0; i < vLength; i += 3) {
+          const x = vertices[i];
+          const y = vertices[i + 1];
+          const z = vertices[i + 2];
+          const xDiff = x - ox;
+          const yDiff = y - oy;
+          const zDiff = z - oz;
+          const distSquared = xDiff * xDiff + yDiff * yDiff + zDiff * zDiff;
+          if (distSquared < distance) {
+            distance = distSquared;
+            chosenIdx = i;
+          }
+        }
+        closestNormal.fromArray(normal, chosenIdx);
+
+        // Get vector tangent to normal
+        o.lookAt(o.position.clone().add(closestNormal));
+        o.rotateZ(Math.PI);
+        o.rotateY(Math.PI);
         if (typeof rotation === 'number') o.rotateZ(rotation);
         applyProps(state, {
           rotation: o.rotation
@@ -76,7 +107,7 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
         target.geometry.dispose();
       };
     }
-  }, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]);
+  }, [mesh, debug, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]);
 
   // <meshStandardMaterial transparent polygonOffset polygonOffsetFactor={-10} {...props} />}
   return /*#__PURE__*/React.createElement("mesh", _extends({

package/core/Environment.cjs.js

@@ -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,l;u={backgroundBlurriness:null!==(a=u.blur)&&void 0!==a?a:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const d=(e=>{return(n=e).current&&n.current.isScene?e.current:e;var n})(n||r),m=d.background,b=d.environment,g={backgroundBlurriness:d.backgroundBlurriness,backgroundIntensity:d.backgroundIntensity,backgroundRotation:null!==(i=null==(c=d.backgroundRotation)||null==c.clone?void 0:c.clone())&&void 0!==i?i:[0,0,0],environmentIntensity:d.environmentIntensity,environmentRotation:null!==(s=null==(l=d.environmentRotation)||null==l.clone?void 0:l.clone())&&void 0!==s?s:[0,0,0]};return"only"!==e&&(d.environment=o),e&&(d.background=o),t.applyProps(d,u),()=>{"only"!==e&&(d.environment=b),e&&(d.background=m),t.applyProps(d,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 b=u.useEnvironment(m),g=t.useThree((e=>e.scene));return s.useLayoutEffect((()=>l(e,n,g,b,{blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:c,environmentRotation:d}))),null}function b({children:e,near:n=.1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:c=!1,blur:b,backgroundBlurriness:g,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,{blur:b,backgroundBlurriness:g,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 g(e){var n,r,a,i;const l=u.useEnvironment(e),m=e.map||l;s.useMemo((()=>t.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]);const b=s.useMemo((()=>[m]),[m]),g=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:b,scale:f,height:g,radius:v}))}exports.Environment=function(e){return e.ground?s.createElement(g,e):e.map?s.createElement(d,e):e.children?s.createElement(b,e):s.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=b;
+"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

@@ -8,10 +8,10 @@ import { useEnvironment } from './useEnvironment.js';
 const isRef = obj => obj.current && obj.current.isScene;
 const resolveScene = scene => isRef(scene) ? scene.current : scene;
 function setEnvProps(background, scene, defaultScene, texture, sceneProps = {}) {
-  var _sceneProps$blur, _target$backgroundRot, _target$backgroundRot2, _target$environmentRo, _target$environmentRo2;
+  var _target$backgroundRot, _target$backgroundRot2, _target$environmentRo, _target$environmentRo2;
   // defaults
   sceneProps = {
-    backgroundBlurriness: (_sceneProps$blur = sceneProps.blur) !== null && _sceneProps$blur !== void 0 ? _sceneProps$blur : 0,
+    backgroundBlurriness: 0,
     backgroundIntensity: 1,
     backgroundRotation: [0, 0, 0],
     environmentIntensity: 1,
@@ -69,8 +69,7 @@ function EnvironmentCube({
   const defaultScene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
     return setEnvProps(background, scene, defaultScene, texture, {
-      blur,
-      backgroundBlurriness,
+      backgroundBlurriness: blur !== null && blur !== void 0 ? blur : backgroundBlurriness,
       backgroundIntensity,
       backgroundRotation,
       environmentIntensity,
@@ -116,8 +115,7 @@ function EnvironmentPortal({
       gl.autoClear = autoClear;
     }
     return setEnvProps(background, scene, defaultScene, fbo.texture, {
-      blur,
-      backgroundBlurriness,
+      backgroundBlurriness: blur !== null && blur !== void 0 ? blur : backgroundBlurriness,
       backgroundIntensity,
       backgroundRotation,
       environmentIntensity,

package/core/Progress.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("zustand");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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 n=o(e);let u=0;const i=a(t).default((e=>(r.DefaultLoadingManager.onStart=(r,t,a)=>{e({active:!0,item:r,loaded:t,total:a,progress:(t-u)/(a-u)*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&&(u=a),e({active:!0,item:r,loaded:t,total:a,progress:(t-u)/(a-u)*100||100})},{errors:[],active:!1,progress:0,item:"",loaded:0,total:0})));exports.Progress=function({children:e}){const r=i();return n.createElement(n.Fragment,null,null==e?void 0:e(r))},exports.useProgress=i;
+"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

@@ -7,7 +7,7 @@ type Data = {
     loaded: number;
     total: number;
 };
-declare const useProgress: import("zustand").UseBoundStore<Data, import("zustand").StoreApi<Data>>;
+declare const useProgress: import("zustand").UseBoundStore<import("zustand").StoreApi<Data>>;
 export { useProgress };
 export declare function Progress({ children }: {
     children?: (result: Data) => React.ReactNode;

package/core/Progress.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DefaultLoadingManager } from 'three';
-import create from 'zustand';
+import { create } from 'zustand';
 
 let saveLastTotalLoaded = 0;
 const useProgress = /* @__PURE__ */create(set => {