@react-three/drei 10.0.8 → 10.1.1

package/core/CameraControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");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 c=a(e),u=s(r),i=a(o);const l=r.forwardRef(((e,o)=>{r.useMemo((()=>{const e={Box3:t.Box3,MathUtils:{clamp:t.MathUtils.clamp},Matrix4:t.Matrix4,Quaternion:t.Quaternion,Raycaster:t.Raycaster,Sphere:t.Sphere,Spherical:t.Spherical,Vector2:t.Vector2,Vector3:t.Vector3,Vector4:t.Vector4};i.default.install({THREE:e}),n.extend({CameraControlsImpl:i.default})}),[]);const{camera:a,domElement:s,makeDefault:l,onStart:d,onEnd:f,onChange:m,regress:v,...p}=e,E=n.useThree((e=>e.camera)),h=n.useThree((e=>e.gl)),b=n.useThree((e=>e.invalidate)),L=n.useThree((e=>e.events)),g=n.useThree((e=>e.setEvents)),j=n.useThree((e=>e.set)),x=n.useThree((e=>e.get)),T=n.useThree((e=>e.performance)),y=a||E,M=s||L.connected||h.domElement,O=r.useMemo((()=>new i.default(y)),[y]);return n.useFrame(((e,t)=>{O.enabled&&O.update(t)}),-1),r.useEffect((()=>(O.connect(M),()=>{O.disconnect()})),[M,O]),r.useEffect((()=>{const e=e=>{b(),v&&T.regress(),m&&m(e)},t=e=>{d&&d(e)},r=e=>{f&&f(e)};return O.addEventListener("update",e),O.addEventListener("controlstart",t),O.addEventListener("controlend",r),O.addEventListener("control",e),O.addEventListener("transitionstart",e),O.addEventListener("wake",e),()=>{O.removeEventListener("update",e),O.removeEventListener("controlstart",t),O.removeEventListener("controlend",r),O.removeEventListener("control",e),O.removeEventListener("transitionstart",e),O.removeEventListener("wake",e)}}),[O,d,f,b,g,v,m]),r.useEffect((()=>{if(l){const e=x().controls;return j({controls:O}),()=>j({controls:e})}}),[l,O]),u.createElement("primitive",c.default({ref:o,object:O},p))}));Object.defineProperty(exports,"CameraControlsImpl",{enumerable:!0,get:function(){return i.default}}),exports.CameraControls=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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),u=l(r),c=a(o);const i=r.forwardRef(((e,o)=>{r.useMemo((()=>{const e={Box3:t.Box3,MathUtils:{clamp:t.MathUtils.clamp},Matrix4:t.Matrix4,Quaternion:t.Quaternion,Raycaster:t.Raycaster,Sphere:t.Sphere,Spherical:t.Spherical,Vector2:t.Vector2,Vector3:t.Vector3,Vector4:t.Vector4};c.default.install({THREE:e}),n.extend({CameraControlsImpl:c.default})}),[]);const{camera:a,domElement:l,makeDefault:i,onControlStart:d,onControl:f,onControlEnd:v,onTransitionStart:m,onUpdate:E,onWake:p,onRest:h,onSleep:L,onStart:b,onEnd:C,onChange:T,regress:g,...j}=e,x=n.useThree((e=>e.camera)),y=n.useThree((e=>e.gl)),M=n.useThree((e=>e.invalidate)),O=n.useThree((e=>e.events)),S=n.useThree((e=>e.setEvents)),V=n.useThree((e=>e.set)),k=n.useThree((e=>e.get)),q=n.useThree((e=>e.performance)),w=a||x,R=l||O.connected||y.domElement,P=r.useMemo((()=>new c.default(w)),[w]);return n.useFrame(((e,t)=>{P.enabled&&P.update(t)}),-1),r.useEffect((()=>(P.connect(R),()=>{P.disconnect()})),[R,P]),r.useEffect((()=>{function e(){M(),g&&q.regress()}const t=t=>{e(),null==d||d(t),null==b||b(t)},r=t=>{e(),null==f||f(t),null==T||T(t)},n=e=>{null==v||v(e),null==C||C(e)},o=t=>{e(),null==m||m(t),null==T||T(t)},a=t=>{e(),null==E||E(t),null==T||T(t)},l=t=>{e(),null==p||p(t),null==T||T(t)},s=e=>{null==h||h(e)},u=e=>{null==L||L(e)};return P.addEventListener("controlstart",t),P.addEventListener("control",r),P.addEventListener("controlend",n),P.addEventListener("transitionstart",o),P.addEventListener("update",a),P.addEventListener("wake",l),P.addEventListener("rest",s),P.addEventListener("sleep",u),()=>{P.removeEventListener("controlstart",t),P.removeEventListener("control",r),P.removeEventListener("controlend",n),P.removeEventListener("transitionstart",o),P.removeEventListener("update",a),P.removeEventListener("wake",l),P.removeEventListener("rest",s),P.removeEventListener("sleep",u)}}),[P,M,S,g,q,d,f,v,m,E,p,h,L,T,b,C]),r.useEffect((()=>{if(i){const e=k().controls;return V({controls:P}),()=>V({controls:e})}}),[i,P]),u.createElement("primitive",s.default({ref:o,object:P},j))}));Object.defineProperty(exports,"CameraControlsImpl",{enumerable:!0,get:function(){return c.default}}),exports.CameraControls=i;

package/core/CameraControls.d.ts

@@ -6,6 +6,30 @@ export type CameraControlsProps = Omit<Overwrite<ThreeElement<typeof CameraContr
     camera?: PerspectiveCamera | OrthographicCamera;
     domElement?: HTMLElement;
     makeDefault?: boolean;
+    onControlStart?: (e?: {
+        type: 'controlstart';
+    }) => void;
+    onControl?: (e?: {
+        type: 'control';
+    }) => void;
+    onControlEnd?: (e?: {
+        type: 'controlend';
+    }) => void;
+    onTransitionStart?: (e?: {
+        type: 'transitionstart';
+    }) => void;
+    onUpdate?: (e?: {
+        type: 'update';
+    }) => void;
+    onWake?: (e?: {
+        type: 'wake';
+    }) => void;
+    onRest?: (e?: {
+        type: 'rest';
+    }) => void;
+    onSleep?: (e?: {
+        type: 'sleep';
+    }) => void;
     onStart?: (e?: {
         type: 'controlstart';
     }) => void;
@@ -13,7 +37,7 @@ export type CameraControlsProps = Omit<Overwrite<ThreeElement<typeof CameraContr
         type: 'controlend';
     }) => void;
     onChange?: (e?: {
-        type: 'update';
+        type: string;
     }) => void;
     events?: boolean;
     regress?: boolean;

package/core/CameraControls.js

@@ -36,6 +36,14 @@ const CameraControls = /* @__PURE__ */forwardRef((props, ref) => {
     camera,
     domElement,
     makeDefault,
+    onControlStart,
+    onControl,
+    onControlEnd,
+    onTransitionStart,
+    onUpdate,
+    onWake,
+    onRest,
+    onSleep,
     onStart,
     onEnd,
     onChange,
@@ -61,32 +69,64 @@ const CameraControls = /* @__PURE__ */forwardRef((props, ref) => {
     return () => void controls.disconnect();
   }, [explDomElement, controls]);
   useEffect(() => {
-    const callback = e => {
+    function invalidateAndRegress() {
       invalidate();
       if (regress) performance.regress();
-      if (onChange) onChange(e);
+    }
+    const handleControlStart = e => {
+      invalidateAndRegress();
+      onControlStart == null || onControlStart(e);
+      onStart == null || onStart(e); // backwards compatibility
+    };
+    const handleControl = e => {
+      invalidateAndRegress();
+      onControl == null || onControl(e);
+      onChange == null || onChange(e); // backwards compatibility
+    };
+    const handleControlEnd = e => {
+      onControlEnd == null || onControlEnd(e);
+      onEnd == null || onEnd(e); // backwards compatibility
+    };
+    const handleTransitionStart = e => {
+      invalidateAndRegress();
+      onTransitionStart == null || onTransitionStart(e);
+      onChange == null || onChange(e); // backwards compatibility
+    };
+    const handleUpdate = e => {
+      invalidateAndRegress();
+      onUpdate == null || onUpdate(e);
+      onChange == null || onChange(e); // backwards compatibility
+    };
+    const handleWake = e => {
+      invalidateAndRegress();
+      onWake == null || onWake(e);
+      onChange == null || onChange(e); // backwards compatibility
     };
-    const onStartCb = e => {
-      if (onStart) onStart(e);
+    const handleRest = e => {
+      onRest == null || onRest(e);
     };
-    const onEndCb = e => {
-      if (onEnd) onEnd(e);
+    const handleSleep = e => {
+      onSleep == null || onSleep(e);
     };
-    controls.addEventListener('update', callback);
-    controls.addEventListener('controlstart', onStartCb);
-    controls.addEventListener('controlend', onEndCb);
-    controls.addEventListener('control', callback);
-    controls.addEventListener('transitionstart', callback);
-    controls.addEventListener('wake', callback);
+    controls.addEventListener('controlstart', handleControlStart);
+    controls.addEventListener('control', handleControl);
+    controls.addEventListener('controlend', handleControlEnd);
+    controls.addEventListener('transitionstart', handleTransitionStart);
+    controls.addEventListener('update', handleUpdate);
+    controls.addEventListener('wake', handleWake);
+    controls.addEventListener('rest', handleRest);
+    controls.addEventListener('sleep', handleSleep);
     return () => {
-      controls.removeEventListener('update', callback);
-      controls.removeEventListener('controlstart', onStartCb);
-      controls.removeEventListener('controlend', onEndCb);
-      controls.removeEventListener('control', callback);
-      controls.removeEventListener('transitionstart', callback);
-      controls.removeEventListener('wake', callback);
+      controls.removeEventListener('controlstart', handleControlStart);
+      controls.removeEventListener('control', handleControl);
+      controls.removeEventListener('controlend', handleControlEnd);
+      controls.removeEventListener('transitionstart', handleTransitionStart);
+      controls.removeEventListener('update', handleUpdate);
+      controls.removeEventListener('wake', handleWake);
+      controls.removeEventListener('rest', handleRest);
+      controls.removeEventListener('sleep', handleSleep);
     };
-  }, [controls, onStart, onEnd, invalidate, setEvents, regress, onChange]);
+  }, [controls, invalidate, setEvents, regress, performance, onControlStart, onControl, onControlEnd, onTransitionStart, onUpdate, onWake, onRest, onSleep, onChange, onStart, onEnd]);
   useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
@@ -97,6 +137,7 @@ const CameraControls = /* @__PURE__ */forwardRef((props, ref) => {
         controls: old
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [makeDefault, controls]);
   return /*#__PURE__*/React.createElement("primitive", _extends({
     ref: ref,

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"),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;
+"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),u=i(r);function l(e=[0,0,0]){return function(e){return Array.isArray(e)}(e)?e:e instanceof u.Vector3||e instanceof u.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 u.Vector3,rotation:new u.Euler,scale:new u.Vector3(1,1,1)});return s.useLayoutEffect((()=>{const e=(null==i?void 0:i.current)||h.current.parent,t=h.current;if(!(e instanceof u.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 u.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,i=new u.Vector3;const c=t.position.x,s=t.position.y,l=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]-l,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 g.current&&o.applyProps(g.current,w.current),t.geometry=new n.DecalGeometry(e,w.current.position,w.current.rotation,w.current.scale),e.matrixWorld=r,()=>{t.geometry.dispose()}}}),[i,...l(f),...l(y),...l(m)]),s.useLayoutEffect((()=>{g.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

@@ -60,7 +60,6 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
         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;
@@ -95,6 +94,9 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
           rotation
         });
       }
+      if (helper.current) {
+        applyProps(helper.current, state.current);
+      }
       target.geometry = new DecalGeometry(parent, state.current.position, state.current.rotation, state.current.scale);
       // Reset parents matix-world
       parent.matrixWorld = matrixWorld;
@@ -105,13 +107,10 @@ const Decal = /* @__PURE__ */React.forwardRef(function Decal({
   }, [mesh, ...vecToArray(position), ...vecToArray(scale), ...vecToArray(rotation)]);
   React.useLayoutEffect(() => {
     if (helper.current) {
-      applyProps(helper.current, state.current);
       // Prevent the helpers from blocking rays
       helper.current.traverse(child => child.raycast = () => null);
     }
   }, [debug]);
-
-  // <meshStandardMaterial transparent polygonOffset polygonOffsetFactor={-10} {...props} />}
   return /*#__PURE__*/React.createElement("mesh", _extends({
     ref: ref,
     "material-transparent": true,