@react-three/drei 9.0.3 → 9.1.1

package/README.md

@@ -130,6 +130,10 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#adaptiveevents">AdaptiveEvents</a></li>
           <li><a href="#usebvh">useBVH</a></li>
         </ul>
+        <li><a href="#portals">Portals</a></li>        
+        <ul>
+          <li><a href="#view">View</a></li>
+        </ul>
       </ul>
     </td>
     <td valign="top">
@@ -242,7 +246,7 @@ If you have moving objects, unset the prop and use a smaller `resolution` instea
 
 # Controls
 
-If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `invalidateFrameloop` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/master/examples/jsm/controls).
+If available controls have damping enabled by default, they manage their own updates, remove themselves on unmount, are compatible with the `frameloop="demand"` canvas-flag. They inherit all props from their underlying [THREE controls](https://github.com/mrdoob/three.js/tree/master/examples/jsm/controls). They are the first effects to run before all other useFrames, to ensure that other components may mutate the camera on top of them.
 
 Some controls allow you to set `makeDefault`, similar to, for instance, PerspectiveCamera. This will set @react-three/fiber's `controls` field in the root store. This can make it easier in situations where you want controls to be known and other parts of the app could respond to it. Some drei controls already take it into account, like CameraShake, Gizmo and TransformControls.
 
@@ -1697,6 +1701,47 @@ useBVH(mesh)
 <mesh ref={mesh} ... />
 ```
 
+# Portals
+
+#### View
+
+<p>
+  <a href="https://codesandbox.io/s/v5i9wl"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/v5i9wl/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/bp6tmc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/bp6tmc/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/1wmlew"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/1wmlew/screenshot.png" alt="Demo"/></a>
+</p>
+
+Views use gl.scissor to cut the viewport into segments. You tie a view to a tracking div which then controls the position and bounds of the viewport. This allows you to have multiple views with a single, performant canvas. These views will follow their tracking elements, scroll along, resize, etc.
+
+It is advisable to re-connect the event system to a parent that contains both the canvas and the html content. This ensures that both are accessible/selectable and even allows you to mount controls or other deeper integrations into your view.
+
+```tsx
+<View
+  /** The tracking element, the view will be cut according to its whereabouts */
+  track: React.MutableRefObject<HTMLElement>
+  /** Views take over the render loop, optional render index (1 by default) */
+  index?: number
+  /** If you know your view is always at the same place set this to 1 to avoid needless getBoundingClientRect overhead. The default is Infinity, which is best for css animations */
+  frames?: number
+  /** The scene to render, if you leave this undefined it will render the default scene */
+  children?: React.ReactNode
+/>
+```
+
+```jsx
+const main = useRef()
+const div = useRef()
+return (
+  <main ref={main}>
+    <h1>Html content here</h1>
+    <div ref={div} style={{ width: 200, height: 200 }} />
+    <Canvas onCreated={(state) => state.events.connect(main.current)}>
+      <View track={div}>
+        <mesh />
+        <OrbitControls />
+      </View>
+```
+
 # Staging
 
 #### Center

package/core/ArcballControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),n=require("three-stdlib");function s(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 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=s(e),u=o(t);const c=t.forwardRef((({camera:e,makeDefault:s,regress:o,domElement:c,onChange:i,onStart:l,onEnd:f,...d},m)=>{const v=r.useThree((e=>e.invalidate)),b=r.useThree((e=>e.camera)),h=r.useThree((e=>e.gl)),E=r.useThree((e=>e.events)),p=r.useThree((e=>e.set)),g=r.useThree((e=>e.get)),j=r.useThree((e=>e.performance)),O=e||b,T=c||E.connected||h.domElement,L=t.useMemo((()=>new n.ArcballControls(O)),[O]);return r.useFrame((()=>{L.enabled&&L.update()})),t.useEffect((()=>(L.connect(T),()=>{L.dispose()})),[T,o,L,v]),t.useEffect((()=>{const e=e=>{v(),o&&j.regress(),i&&i(e)};return L.addEventListener("change",e),l&&L.addEventListener("start",l),f&&L.addEventListener("end",f),()=>{L.removeEventListener("change",e),l&&L.removeEventListener("start",l),f&&L.removeEventListener("end",f)}}),[i,l,f]),t.useEffect((()=>{if(s){const e=g().controls;return p({controls:L}),()=>p({controls:e})}}),[s,L]),u.createElement("primitive",a.default({ref:m,object:L},d))}));exports.ArcballControls=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@react-three/fiber"),t=require("react"),n=require("three-stdlib");function s(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 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=s(e),u=o(t);const c=t.forwardRef((({camera:e,makeDefault:s,regress:o,domElement:c,onChange:i,onStart:l,onEnd:f,...d},m)=>{const v=r.useThree((e=>e.invalidate)),b=r.useThree((e=>e.camera)),h=r.useThree((e=>e.gl)),E=r.useThree((e=>e.events)),p=r.useThree((e=>e.set)),g=r.useThree((e=>e.get)),j=r.useThree((e=>e.performance)),O=e||b,T=c||E.connected||h.domElement,L=t.useMemo((()=>new n.ArcballControls(O)),[O]);return r.useFrame((()=>{L.enabled&&L.update()}),-1),t.useEffect((()=>(L.connect(T),()=>{L.dispose()})),[T,o,L,v]),t.useEffect((()=>{const e=e=>{v(),o&&j.regress(),i&&i(e)};return L.addEventListener("change",e),l&&L.addEventListener("start",l),f&&L.addEventListener("end",f),()=>{L.removeEventListener("change",e),l&&L.removeEventListener("start",l),f&&L.removeEventListener("end",f)}}),[i,l,f]),t.useEffect((()=>{if(s){const e=g().controls;return p({controls:L}),()=>p({controls:e})}}),[s,L]),u.createElement("primitive",a.default({ref:m,object:L},d))}));exports.ArcballControls=c;

package/core/ArcballControls.js

@@ -26,7 +26,7 @@ const ArcballControls = /*#__PURE__*/forwardRef(({
   const controls = useMemo(() => new ArcballControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
-  });
+  }, -1);
   useEffect(() => {
     controls.connect(explDomElement);
     return () => void controls.dispose();

package/core/CameraShake.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three-stdlib");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 c=n(e);const u=c.forwardRef((({intensity:e=1,decay:n,decayRate:u=.65,maxYaw:a=.1,maxPitch:o=.1,maxRoll:s=.1,yawFrequency:i=.1,pitchFrequency:l=.1,rollFrequency:f=.1,controls:d},m)=>{const p=r.useThree((e=>e.camera)),y=r.useThree((e=>e.controls)),h=c.useRef(e),v=c.useRef(p.rotation.clone()),[b]=c.useState((()=>new t.SimplexNoise)),[x]=c.useState((()=>new t.SimplexNoise)),[w]=c.useState((()=>new t.SimplexNoise)),O=()=>{(h.current<0||h.current>1)&&(h.current=h.current<0?0:1)};return c.useImperativeHandle(m,(()=>({getIntensity:()=>h.current,setIntensity:e=>{h.current=e,O()}})),[]),c.useEffect((()=>{const e=y||(null==d?void 0:d.current),r=()=>{v.current=p.rotation.clone()};return null==e||e.addEventListener("change",r),()=>{null==e||e.removeEventListener("change",r)}}),[d,y]),r.useFrame((({clock:e},r)=>{const t=Math.pow(h.current,2),c=a*t*b.noise(e.elapsedTime*i,1),d=o*t*x.noise(e.elapsedTime*l,1),m=s*t*w.noise(e.elapsedTime*f,1);p.rotation.set(v.current.x+d,v.current.y+c,v.current.z+m),n&&h.current>0&&(h.current-=u*r,O())})),null}));exports.CameraShake=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three-stdlib");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 c=n(e);const u=c.forwardRef((({intensity:e=1,decay:n,decayRate:u=.65,maxYaw:a=.1,maxPitch:o=.1,maxRoll:s=.1,yawFrequency:i=.1,pitchFrequency:l=.1,rollFrequency:f=.1},d)=>{const m=r.useThree((e=>e.camera)),p=r.useThree((e=>e.controls)),y=c.useRef(e),h=c.useRef(m.rotation.clone()),[b]=c.useState((()=>new t.SimplexNoise)),[v]=c.useState((()=>new t.SimplexNoise)),[x]=c.useState((()=>new t.SimplexNoise)),w=()=>{(y.current<0||y.current>1)&&(y.current=y.current<0?0:1)};return c.useImperativeHandle(d,(()=>({getIntensity:()=>y.current,setIntensity:e=>{y.current=e,w()}})),[]),c.useEffect((()=>{if(p){const e=()=>{h.current=m.rotation.clone()};return p.addEventListener("change",e),e(),()=>{p.removeEventListener("change",e)}}}),[m,p]),r.useFrame(((e,r)=>{const t=Math.pow(y.current,2),c=a*t*b.noise(e.clock.elapsedTime*i,1),d=o*t*v.noise(e.clock.elapsedTime*l,1),p=s*t*x.noise(e.clock.elapsedTime*f,1);m.rotation.set(h.current.x+d,h.current.y+c,h.current.z+p),n&&y.current>0&&(y.current-=u*r,w())})),null}));exports.CameraShake=u;

package/core/CameraShake.d.ts

@@ -3,12 +3,6 @@ export interface ShakeController {
     getIntensity: () => number;
     setIntensity: (val: number) => void;
 }
-declare type ControlsProto = {
-    update(): void;
-    target: THREE.Vector3;
-    addEventListener: (event: string, callback: (event: any) => void) => void;
-    removeEventListener: (event: string, callback: (event: any) => void) => void;
-};
 export interface CameraShakeProps {
     intensity?: number;
     decay?: boolean;
@@ -19,7 +13,5 @@ export interface CameraShakeProps {
     yawFrequency?: number;
     pitchFrequency?: number;
     rollFrequency?: number;
-    controls?: React.MutableRefObject<ControlsProto | null>;
 }
 export declare const CameraShake: React.ForwardRefExoticComponent<CameraShakeProps & React.RefAttributes<ShakeController | undefined>>;
-export {};

package/core/CameraShake.js

@@ -11,11 +11,9 @@ const CameraShake = /*#__PURE__*/React.forwardRef(({
   maxRoll = 0.1,
   yawFrequency = 0.1,
   pitchFrequency = 0.1,
-  rollFrequency = 0.1,
-  controls
+  rollFrequency = 0.1
 }, ref) => {
-  const camera = useThree(state => state.camera); // @ts-expect-error new in @react-three/fiber@7.0.5
-
+  const camera = useThree(state => state.camera);
   const defaultControls = useThree(state => state.controls);
   const intensityRef = React.useRef(intensity);
   const initialRotation = React.useRef(camera.rotation.clone());
@@ -37,20 +35,19 @@ const CameraShake = /*#__PURE__*/React.forwardRef(({
     }
   }), []);
   React.useEffect(() => {
-    const currControls = defaultControls || (controls == null ? void 0 : controls.current);
-
-    const callback = () => void (initialRotation.current = camera.rotation.clone());
+    if (defaultControls) {
+      const callback = () => void (initialRotation.current = camera.rotation.clone());
 
-    currControls == null ? void 0 : currControls.addEventListener('change', callback);
-    return () => void (currControls == null ? void 0 : currControls.removeEventListener('change', callback));
-  }, [controls, defaultControls]);
-  useFrame(({
-    clock
-  }, delta) => {
+      defaultControls.addEventListener('change', callback);
+      callback();
+      return () => void defaultControls.removeEventListener('change', callback);
+    }
+  }, [camera, defaultControls]);
+  useFrame((state, delta) => {
     const shake = Math.pow(intensityRef.current, 2);
-    const yaw = maxYaw * shake * yawNoise.noise(clock.elapsedTime * yawFrequency, 1);
-    const pitch = maxPitch * shake * pitchNoise.noise(clock.elapsedTime * pitchFrequency, 1);
-    const roll = maxRoll * shake * rollNoise.noise(clock.elapsedTime * rollFrequency, 1);
+    const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1);
+    const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1);
+    const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1);
     camera.rotation.set(initialRotation.current.x + pitch, initialRotation.current.y + yaw, initialRotation.current.z + roll);
 
     if (decay && intensityRef.current > 0) {

package/core/ContactShadows.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 i=o(e),l=u(r),s=u(t);const c=l.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:u=1,blur:c=1,far:d=10,resolution:f=512,smooth:h=!0,color:m="#000000",...p},g)=>{const v=a.useThree((({scene:e})=>e)),b=a.useThree((({gl:e})=>e)),M=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,u*=Array.isArray(e)?e[1]:e||1;const[y,w,T,S,x,R,j]=l.useMemo((()=>{const e=new s.WebGLRenderTarget(f,f),r=new s.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new s.PlaneBufferGeometry(o,u).rotateX(Math.PI/2),a=new s.Mesh(t),i=new s.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new s.Color(m).convertSRGBToLinear()}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );")};const l=new s.ShaderMaterial(n.HorizontalBlurShader),c=new s.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=l.depthTest=!1,[e,t,i,a,l,c,r]}),[f,o,u,e]),C=l.useCallback((e=>{S.visible=!0,S.material=x,x.uniforms.tDiffuse.value=y.texture,x.uniforms.h.value=1*e/256,b.setRenderTarget(j),b.render(S,M.current),S.material=R,R.uniforms.tDiffuse.value=j.texture,R.uniforms.v.value=1*e/256,b.setRenderTarget(y),b.render(S,M.current),S.visible=!1}),[]);let O=0;return a.useFrame((()=>{if(M.current&&(r===1/0||O<r)){const e=v.background;v.background=null;const r=v.overrideMaterial;v.overrideMaterial=T,b.setRenderTarget(y),b.render(v,M.current),v.overrideMaterial=r,C(c),h&&C(.4*c),b.setRenderTarget(null),v.background=e,O++}})),l.createElement("group",i.default({"rotation-x":Math.PI/2},p,{ref:g}),l.createElement("mesh",{geometry:w,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{map:y.texture,transparent:!0,opacity:t})),l.createElement("orthographicCamera",{ref:M,args:[-o/2,o/2,u/2,-u/2,0,d]}))}));exports.ContactShadows=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 i=o(e),l=u(r),s=u(t);const c=l.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:u=1,blur:c=1,far:d=10,resolution:f=512,smooth:h=!0,color:m="#000000",...p},g)=>{const v=a.useThree((({scene:e})=>e)),b=a.useThree((({gl:e})=>e)),M=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,u*=Array.isArray(e)?e[1]:e||1;const[y,w,T,S,x,R,j]=l.useMemo((()=>{const e=new s.WebGLRenderTarget(f,f),r=new s.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new s.PlaneBufferGeometry(o,u).rotateX(Math.PI/2),a=new s.Mesh(t),i=new s.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new s.Color(m).convertSRGBToLinear()}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );")};const l=new s.ShaderMaterial(n.HorizontalBlurShader),c=new s.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=l.depthTest=!1,[e,t,i,a,l,c,r]}),[f,o,u,e,m]),O=e=>{S.visible=!0,S.material=x,x.uniforms.tDiffuse.value=y.texture,x.uniforms.h.value=1*e/256,b.setRenderTarget(j),b.render(S,M.current),S.material=R,R.uniforms.tDiffuse.value=j.texture,R.uniforms.v.value=1*e/256,b.setRenderTarget(y),b.render(S,M.current),S.visible=!1};let P=0;return a.useFrame((()=>{if(M.current&&(r===1/0||P<r)){const e=v.background;v.background=null;const r=v.overrideMaterial;v.overrideMaterial=T,b.setRenderTarget(y),b.render(v,M.current),v.overrideMaterial=r,O(c),h&&O(.4*c),b.setRenderTarget(null),v.background=e,P++}})),l.createElement("group",i.default({"rotation-x":Math.PI/2},p,{ref:g}),l.createElement("mesh",{geometry:w,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{map:y.texture,transparent:!0,opacity:t})),l.createElement("orthographicCamera",{ref:M,args:[-o/2,o/2,u/2,-u/2,0,d]}))}));exports.ContactShadows=c;

package/core/ContactShadows.js

@@ -52,8 +52,9 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     const verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader);
     verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false;
     return [renderTarget, planeGeometry, depthMaterial, blurPlane, horizontalBlurMaterial, verticalBlurMaterial, renderTargetBlur];
-  }, [resolution, width, height, scale]);
-  const blurShadows = React.useCallback(blur => {
+  }, [resolution, width, height, scale, color]);
+
+  const blurShadows = blur => {
     blurPlane.visible = true;
     blurPlane.material = horizontalBlurMaterial;
     horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture;
@@ -66,7 +67,8 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
     gl.setRenderTarget(renderTarget);
     gl.render(blurPlane, shadowCamera.current);
     blurPlane.visible = false;
-  }, []);
+  };
+
   let count = 0;
   useFrame(() => {
     if (shadowCamera.current && (frames === Infinity || count < frames)) {

package/core/DeviceOrientationControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function u(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 o=u(e),a=i(r);const l=a.forwardRef(((e,r)=>{const{camera:u,onChange:i,...l}=e,c=t.useThree((e=>e.camera)),s=t.useThree((e=>e.invalidate)),f=u||c,[d]=a.useState((()=>new n.DeviceOrientationControls(f)));return a.useEffect((()=>{const e=e=>{s(),i&&i(e)};return null==d||null==d.addEventListener||d.addEventListener("change",e),()=>null==d||null==d.removeEventListener?void 0:d.removeEventListener("change",e)}),[i,d,s]),t.useFrame((()=>null==d?void 0:d.update())),a.useEffect((()=>{const e=d;return null==e||e.connect(),()=>null==e?void 0:e.dispose()}),[d]),d?a.createElement("primitive",o.default({ref:r,object:d},l)):null}));exports.DeviceOrientationControls=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function u(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 o=u(e),a=i(r);const l=a.forwardRef(((e,r)=>{const{camera:u,onChange:i,...l}=e,c=t.useThree((e=>e.camera)),s=t.useThree((e=>e.invalidate)),f=u||c,[d]=a.useState((()=>new n.DeviceOrientationControls(f)));return a.useEffect((()=>{const e=e=>{s(),i&&i(e)};return null==d||null==d.addEventListener||d.addEventListener("change",e),()=>null==d||null==d.removeEventListener?void 0:d.removeEventListener("change",e)}),[i,d,s]),t.useFrame((()=>null==d?void 0:d.update()),-1),a.useEffect((()=>{const e=d;return null==e||e.connect(),()=>null==e?void 0:e.dispose()}),[d]),d?a.createElement("primitive",o.default({ref:r,object:d},l)):null}));exports.DeviceOrientationControls=l;

package/core/DeviceOrientationControls.js

@@ -22,7 +22,7 @@ const DeviceOrientationControls = /*#__PURE__*/React.forwardRef((props, ref) =>
     controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('change', callback);
     return () => controls == null ? void 0 : controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
   }, [onChange, controls, invalidate]);
-  useFrame(() => controls == null ? void 0 : controls.update());
+  useFrame(() => controls == null ? void 0 : controls.update(), -1);
   React.useEffect(() => {
     const current = controls;
     current == null ? void 0 : current.connect();

package/core/FirstPersonControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-stdlib");function u(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 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 s=u(e),c=o(r);const a=c.forwardRef((({domElement:e,...r},u)=>{const o=t.useThree((e=>e.camera)),a=t.useThree((e=>e.gl)),i=t.useThree((e=>e.events)),l=e||i.connected||a.domElement,[f]=c.useState((()=>new n.FirstPersonControls(o,l)));return t.useFrame(((e,r)=>{f.update(r)})),f?c.createElement("primitive",s.default({ref:u,object:f},r)):null}));exports.FirstPersonControls=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three-stdlib");function u(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 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 s=u(e),c=o(r);const a=c.forwardRef((({domElement:e,...r},u)=>{const o=t.useThree((e=>e.camera)),a=t.useThree((e=>e.gl)),i=t.useThree((e=>e.events)),l=e||i.connected||a.domElement,[f]=c.useState((()=>new n.FirstPersonControls(o,l)));return t.useFrame(((e,r)=>{f.update(r)}),-1),f?c.createElement("primitive",s.default({ref:u,object:f},r)):null}));exports.FirstPersonControls=a;

package/core/FirstPersonControls.js

@@ -14,7 +14,7 @@ const FirstPersonControls = /*#__PURE__*/React.forwardRef(({
   const [controls] = React.useState(() => new FirstPersonControls$1(camera, explDomElement));
   useFrame((_, delta) => {
     controls.update(delta);
-  });
+  }, -1);
   return controls ? /*#__PURE__*/React.createElement("primitive", _extends({
     ref: ref,
     object: controls

package/core/MapControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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=o(r);const i=u.forwardRef(((e={enableDamping:!0},r)=>{const{domElement:a,camera:o,onChange:i,onStart:c,onEnd:d,...l}=e,f=t.useThree((e=>e.invalidate)),m=t.useThree((e=>e.camera)),v=t.useThree((e=>e.gl)),b=t.useThree((e=>e.events)),p=a||b.connected||v.domElement,E=o||m,h=u.useMemo((()=>new n.MapControls(E)),[E]);return u.useEffect((()=>{h.connect(p);const e=e=>{f(),i&&i(e)};return h.addEventListener("change",e),c&&h.addEventListener("start",c),d&&h.addEventListener("end",d),()=>{h.dispose(),h.removeEventListener("change",e),c&&h.removeEventListener("start",c),d&&h.removeEventListener("end",d)}}),[i,c,d,h,f,p]),t.useFrame((()=>h.update())),u.createElement("primitive",s.default({ref:r,object:h,enableDamping:!0},l))}));exports.MapControls=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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=o(r);const i=u.forwardRef(((e={enableDamping:!0},r)=>{const{domElement:a,camera:o,onChange:i,onStart:c,onEnd:d,...l}=e,f=t.useThree((e=>e.invalidate)),m=t.useThree((e=>e.camera)),v=t.useThree((e=>e.gl)),b=t.useThree((e=>e.events)),p=a||b.connected||v.domElement,E=o||m,h=u.useMemo((()=>new n.MapControls(E)),[E]);return u.useEffect((()=>{h.connect(p);const e=e=>{f(),i&&i(e)};return h.addEventListener("change",e),c&&h.addEventListener("start",c),d&&h.addEventListener("end",d),()=>{h.dispose(),h.removeEventListener("change",e),c&&h.removeEventListener("start",c),d&&h.removeEventListener("end",d)}}),[i,c,d,h,f,p]),t.useFrame((()=>h.update()),-1),u.createElement("primitive",s.default({ref:r,object:h,enableDamping:!0},l))}));exports.MapControls=i;

package/core/MapControls.js

@@ -39,7 +39,7 @@ const MapControls = /*#__PURE__*/React.forwardRef((props = {
       if (onEnd) controls.removeEventListener('end', onEnd);
     };
   }, [onChange, onStart, onEnd, controls, invalidate, explDomElement]);
-  useFrame(() => controls.update());
+  useFrame(() => controls.update(), -1);
   return /*#__PURE__*/React.createElement("primitive", _extends({
     ref: ref,
     object: controls,

package/core/OrbitControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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 a=s(e),u=o(r);const c=u.forwardRef((({makeDefault:e,camera:r,regress:s,domElement:o,enableDamping:c=!0,onChange:i,onStart:f,onEnd:d,...l},m)=>{const b=t.useThree((e=>e.invalidate)),v=t.useThree((e=>e.camera)),h=t.useThree((e=>e.gl)),p=t.useThree((e=>e.events)),E=t.useThree((e=>e.set)),g=t.useThree((e=>e.get)),O=t.useThree((e=>e.performance)),j=r||v,T=o||p.connected||h.domElement,L=u.useMemo((()=>new n.OrbitControls(j)),[j]);return t.useFrame((()=>{L.enabled&&L.update()})),u.useEffect((()=>(L.connect(T),()=>{L.dispose()})),[T,s,L,b]),u.useEffect((()=>{const e=e=>{b(),s&&O.regress(),i&&i(e)};return L.addEventListener("change",e),f&&L.addEventListener("start",f),d&&L.addEventListener("end",d),()=>{f&&L.removeEventListener("start",f),d&&L.removeEventListener("end",d),L.removeEventListener("change",e)}}),[i,f,d]),u.useEffect((()=>{if(e){const e=g().controls;return E({controls:L}),()=>E({controls:e})}}),[e,L]),u.createElement("primitive",a.default({ref:m,object:L,enableDamping:c},l))}));exports.OrbitControls=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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 a=s(e),u=o(r);const c=u.forwardRef((({makeDefault:e,camera:r,regress:s,domElement:o,enableDamping:c=!0,onChange:i,onStart:f,onEnd:d,...l},m)=>{const b=t.useThree((e=>e.invalidate)),v=t.useThree((e=>e.camera)),h=t.useThree((e=>e.gl)),p=t.useThree((e=>e.events)),E=t.useThree((e=>e.set)),g=t.useThree((e=>e.get)),O=t.useThree((e=>e.performance)),j=r||v,T=o||p.connected||h.domElement,L=u.useMemo((()=>new n.OrbitControls(j)),[j]);return t.useFrame((()=>{L.enabled&&L.update()}),-1),u.useEffect((()=>(L.connect(T),()=>{L.dispose()})),[T,s,L,b]),u.useEffect((()=>{const e=e=>{b(),s&&O.regress(),i&&i(e)};return L.addEventListener("change",e),f&&L.addEventListener("start",f),d&&L.addEventListener("end",d),()=>{f&&L.removeEventListener("start",f),d&&L.removeEventListener("end",d),L.removeEventListener("change",e)}}),[i,f,d]),u.useEffect((()=>{if(e){const e=g().controls;return E({controls:L}),()=>E({controls:e})}}),[e,L]),u.createElement("primitive",a.default({ref:m,object:L,enableDamping:c},l))}));exports.OrbitControls=c;

package/core/OrbitControls.js

@@ -26,7 +26,7 @@ const OrbitControls = /*#__PURE__*/React.forwardRef(({
   const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
-  });
+  }, -1);
   React.useEffect(() => {
     controls.connect(explDomElement);
     return () => void controls.dispose();

package/core/TrackballControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:i,onEnd:f,...l},d)=>{const{invalidate:v,camera:m,gl:b,events:E,set:p,get:g,performance:h,viewport:j}=t.useThree(),O=r||m,L=o||E.connected||b.domElement,y=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{y.enabled&&y.update()})),c.useEffect((()=>(y.connect(L),()=>{y.dispose()})),[L,a,y,v]),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return y.addEventListener("change",e),i&&y.addEventListener("start",i),f&&y.addEventListener("end",f),()=>{i&&y.removeEventListener("start",i),f&&y.removeEventListener("end",f),y.removeEventListener("change",e)}}),[u,i,f]),c.useEffect((()=>{y.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return p({controls:y}),()=>p({controls:e})}}),[e,y]),c.createElement("primitive",s.default({ref:d,object:y},l))}));exports.TrackballControls=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(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 s=o(e),c=a(r);const u=c.forwardRef((({makeDefault:e,camera:r,domElement:o,regress:a,onChange:u,onStart:i,onEnd:f,...l},d)=>{const{invalidate:v,camera:m,gl:b,events:E,set:p,get:g,performance:h,viewport:j}=t.useThree(),O=r||m,L=o||E.connected||b.domElement,y=c.useMemo((()=>new n.TrackballControls(O)),[O]);return t.useFrame((()=>{y.enabled&&y.update()}),-1),c.useEffect((()=>(y.connect(L),()=>{y.dispose()})),[L,a,y,v]),c.useEffect((()=>{const e=e=>{v(),a&&h.regress(),u&&u(e)};return y.addEventListener("change",e),i&&y.addEventListener("start",i),f&&y.addEventListener("end",f),()=>{i&&y.removeEventListener("start",i),f&&y.removeEventListener("end",f),y.removeEventListener("change",e)}}),[u,i,f]),c.useEffect((()=>{y.handleResize()}),[j]),c.useEffect((()=>{if(e){const e=g().controls;return p({controls:y}),()=>p({controls:e})}}),[e,y]),c.createElement("primitive",s.default({ref:d,object:y},l))}));exports.TrackballControls=u;

package/core/TrackballControls.js

@@ -28,7 +28,7 @@ const TrackballControls = /*#__PURE__*/React.forwardRef(({
   const controls = React.useMemo(() => new TrackballControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
-  });
+  }, -1);
   React.useEffect(() => {
     controls.connect(explDomElement);
     return () => void controls.dispose();