@react-three/drei 8.10.7 → 8.11.2

package/README.md

@@ -99,6 +99,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#useaspect">useAspect</a></li>
           <li><a href="#usecursor">useCursor</a></li>
           <li><a href="#useintersect">useIntersect</a></li>
+          <li><a href="#useboxprojectedenv">useBoxProjectedEnv</a></li>
         </ul>
         <li><a href="#loading">Loaders</a></li>
         <ul>
@@ -1103,6 +1104,30 @@ const ref = useIntersect((visible) => console.log('object is visible', visible))
 return <mesh ref={ref} />
 ```
 
+#### useBoxProjectedEnv
+
+<p>
+  <a href="https://codesandbox.io/s/s006f"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/s006f/screenshot.png" alt="Demo"/></a>
+</p>
+
+The cheapest possible way of getting reflections in threejs. This will box-project the current environment map onto a plane. It returns an object that you need to spread over its material. The spread object contains a ref, onBeforeCompile and customProgramCacheKey. If you combine it with drei/CubeCamera you can "film" a single frame of the environment and feed it to the material, thereby getting realistic reflections at no cost. Align it with the position and scale properties.
+
+```jsx
+const projection = useBoxProjectedEnv(
+  [0, 0, 0], // Position
+  [1, 1, 1] // Scale
+)
+
+<CubeCamera frames={1}>
+  {(texture) => (
+    <mesh>
+      <planeGeometry />
+      <meshStandardMaterial envMap={texture} {...projection} />
+    </mesh>
+  )}
+</CubeCamera>
+```
+
 # Loading
 
 #### Loader

package/core/Bounds.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 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 a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const p=a.useRef(null),l=r.useThree((e=>e.camera)),x=r.useThree((e=>e.controls)),h=r.useThree((e=>e.invalidate)),y=a.useRef(f);function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}y.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=b.getSize(new n.Vector3),t=b.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(l)?4*r:r/(2*Math.atan(Math.PI*l.fov/360)),a=c(l)?4*r:o/l.aspect,i=m*Math.max(o,a);return{box:b,size:e,center:t,distance:i}}return{getSize:e,refresh(t){var r;if((r=t)&&r.isObject3D?b.setFromObject(t):(e=>e&&e.isBox3)(t)?b.copy(t):p.current&&b.setFromObject(p.current),b.isEmpty()){const e=l.position.length()||10;b.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==x?void 0:x.constructor.name)){const{distance:t}=e(),r=l.position.clone().sub(x.target).normalize().multiplyScalar(t),o=x.target.clone().add(r);l.position.copy(o)}return this},clip(){const{distance:t}=e();return x&&(x.maxDistance=10*t),l.near=t/100,l.far=100*t,l.updateProjectionMatrix(),x&&x.update(),this},fit(){M.camera.copy(l.position),x&&M.focus.copy(x.target);const{center:r,distance:o}=e(),a=r.clone().sub(l.position).normalize().multiplyScalar(o);if(g.camera.copy(r).sub(a),g.focus.copy(r),c(l)){M.zoom=l.zoom;let e=0,o=0;const a=[new n.Vector3(b.min.x,b.min.y,b.min.z),new n.Vector3(b.min.x,b.max.y,b.min.z),new n.Vector3(b.min.x,b.min.y,b.max.z),new n.Vector3(b.min.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.min.z),new n.Vector3(b.max.x,b.min.y,b.max.z),new n.Vector3(b.max.x,b.min.y,b.min.z)];r.applyMatrix4(l.matrixWorldInverse);for(const t of a)t.applyMatrix4(l.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(l.top-l.bottom)/e,i=(l.right-l.left)/o;g.zoom=Math.min(c,i)/m,t||(l.zoom=g.zoom,l.updateProjectionMatrix())}return t?M.animating=!0:(l.position.copy(g.camera),l.lookAt(g.focus),x&&(x.target.copy(g.focus),x.update()),h()),y.current&&y.current(this.getSize()),this}}}),[b,l,x,m,t,h]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),x){const e=()=>M.animating=!1;return x.addEventListener("start",e),()=>x.removeEventListener("start",e)}}),[s,o,x]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,g.focus,t,r),d(M.camera,g.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,g.zoom,t,r),l.position.copy(M.camera),c(l)&&(l.zoom=M.zoom,l.updateProjectionMatrix()),x?(x.target.copy(M.focus),x.update()):l.lookAt(M.focus),h(),c(l)&&!(Math.abs(M.zoom-g.zoom)<u))return;if(!c(l)&&!z(M.camera,g.camera))return;if(x&&!z(M.focus,g.focus))return;M.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 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 a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const p=a.useRef(null),l=r.useThree((e=>e.camera)),x=r.useThree((e=>e.controls)),h=r.useThree((e=>e.invalidate)),y=a.useRef(f);function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}y.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=b.getSize(new n.Vector3),t=b.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(l)?4*r:r/(2*Math.atan(Math.PI*l.fov/360)),a=c(l)?4*r:o/l.aspect,i=m*Math.max(o,a);return{box:b,size:e,center:t,distance:i}}return{getSize:e,refresh(t){var r;if((r=t)&&r.isObject3D?b.setFromObject(t):(e=>e&&e.isBox3)(t)?b.copy(t):p.current&&b.setFromObject(p.current),b.isEmpty()){const e=l.position.length()||10;b.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==x?void 0:x.constructor.name)){const{distance:t}=e(),r=l.position.clone().sub(x.target).normalize().multiplyScalar(t),o=x.target.clone().add(r);l.position.copy(o)}return this},clip(){const{distance:t}=e();return x&&(x.maxDistance=10*t),l.near=t/100,l.far=100*t,l.updateProjectionMatrix(),x&&x.update(),h(),this},fit(){M.camera.copy(l.position),x&&M.focus.copy(x.target);const{center:r,distance:o}=e(),a=r.clone().sub(l.position).normalize().multiplyScalar(o);if(g.camera.copy(r).sub(a),g.focus.copy(r),c(l)){M.zoom=l.zoom;let e=0,o=0;const a=[new n.Vector3(b.min.x,b.min.y,b.min.z),new n.Vector3(b.min.x,b.max.y,b.min.z),new n.Vector3(b.min.x,b.min.y,b.max.z),new n.Vector3(b.min.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.min.z),new n.Vector3(b.max.x,b.min.y,b.max.z),new n.Vector3(b.max.x,b.min.y,b.min.z)];r.applyMatrix4(l.matrixWorldInverse);for(const t of a)t.applyMatrix4(l.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(l.top-l.bottom)/e,i=(l.right-l.left)/o;g.zoom=Math.min(c,i)/m,t||(l.zoom=g.zoom,l.updateProjectionMatrix())}return t?M.animating=!0:(l.position.copy(g.camera),l.lookAt(g.focus),x&&(x.target.copy(g.focus),x.update())),y.current&&y.current(this.getSize()),h(),this}}}),[b,l,x,m,t,h]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),x){const e=()=>M.animating=!1;return x.addEventListener("start",e),()=>x.removeEventListener("start",e)}}),[s,o,x]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,g.focus,t,r),d(M.camera,g.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,g.zoom,t,r),l.position.copy(M.camera),c(l)&&(l.zoom=M.zoom,l.updateProjectionMatrix()),x?(x.target.copy(M.focus),x.update()):l.lookAt(M.focus),h(),c(l)&&!(Math.abs(M.zoom-g.zoom)<u))return;if(!c(l)&&!z(M.camera,g.camera))return;if(x&&!z(M.focus,g.focus))return;M.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};

package/core/Bounds.js

@@ -97,6 +97,7 @@ function Bounds({
         camera.far = distance * 100;
         camera.updateProjectionMatrix();
         if (controls) controls.update();
+        invalidate();
         return this;
       },
 
@@ -147,11 +148,10 @@ function Bounds({
             controls.target.copy(goal.focus);
             controls.update();
           }
-
-          invalidate();
         }
 
         if (onFitRef.current) onFitRef.current(this.getSize());
+        invalidate();
         return this;
       }
 

package/core/GizmoHelper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),u=require("./useCamera.cjs.js");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 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)}require("@babel/runtime/helpers/extends"),require("react-merge-refs");var o=a(e);const c=o.createContext({}),i=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:a=[80,80],renderPriority:m=0,onUpdate:g,onTarget:b,children:y})=>{const v=r.useThree((({size:e})=>e)),w=r.useThree((({camera:e})=>e)),j=r.useThree((({controls:e})=>e)),q=r.useThree((({gl:e})=>e)),x=r.useThree((({scene:e})=>e)),O=r.useThree((({invalidate:e})=>e)),T=o.useRef(),C=o.useRef(),k=o.useRef(null),[P]=o.useState((()=>new t.Scene)),R=o.useRef(!1),z=o.useRef(0),E=o.useRef(new t.Vector3(0,0,0));o.useEffect((()=>(x.background&&(T.current=x.background,x.background=null,P.background=T.current),()=>{T.current&&(x.background=T.current)})),[]);r.useFrame(((e,r)=>{var t;k.current&&C.current&&((e=>{if(!R.current)return;if(p.angleTo(d)<.01)return void(R.current=!1);const r=e*i;p.rotateTowards(d,r),w.position.set(0,0,1).applyQuaternion(p).multiplyScalar(z.current).add(E.current),w.up.set(0,1,0).applyQuaternion(p).normalize(),w.quaternion.copy(p),g?g():j&&j.update(),O()})(r),l.copy(w.matrix).invert(),null==(t=C.current)||t.quaternion.setFromRotationMatrix(l),q.autoClear=!1,q.clearDepth(),q.render(P,k.current))}),m);const M={tweenCamera:e=>{R.current=!0,(j||b)&&(E.current=(null==j?void 0:j.target)||(null==b?void 0:b())),z.current=w.position.distanceTo(f),p.copy(w.quaternion),h.copy(e).multiplyScalar(z.current).add(f),s.lookAt(h),d.copy(s.quaternion),O()},raycast:u.useCamera(k)},[D,Q]=a,S=e.endsWith("-left")?-v.width/2+D:v.width/2-D,_=e.startsWith("top-")?v.height/2-Q:-v.height/2+Q;return r.createPortal(o.createElement(c.Provider,{value:M},o.createElement(n.OrthographicCamera,{ref:k,makeDefault:!1,position:[0,0,200]}),o.createElement("group",{ref:C,position:[S,_,0]},y)),P)},exports.useGizmoContext=()=>o.useContext(c);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("three"),n=require("./OrthographicCamera.cjs.js"),a=require("./useCamera.cjs.js");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 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)}require("@babel/runtime/helpers/extends"),require("react-merge-refs");var o=u(e);const c=o.createContext({}),i=2*Math.PI,s=new t.Object3D,l=new t.Matrix4,[p,d]=[new t.Quaternion,new t.Quaternion],f=new t.Vector3,h=new t.Vector3;exports.GizmoHelper=({alignment:e="bottom-right",margin:u=[80,80],renderPriority:m=0,autoClear:g=!0,onUpdate:b,onTarget:y,children:w})=>{const v=r.useThree((({size:e})=>e)),j=r.useThree((({camera:e})=>e)),q=r.useThree((({controls:e})=>e)),C=r.useThree((({gl:e})=>e)),x=r.useThree((({scene:e})=>e)),O=r.useThree((({invalidate:e})=>e)),T=o.useRef(),k=o.useRef(),P=o.useRef(null),[R]=o.useState((()=>new t.Scene)),M=o.useRef(!1),z=o.useRef(0),E=o.useRef(new t.Vector3(0,0,0)),Q=o.useCallback((e=>{M.current=!0,(q||y)&&(E.current=(null==q?void 0:q.target)||(null==y?void 0:y())),z.current=j.position.distanceTo(f),p.copy(j.quaternion),h.copy(e).multiplyScalar(z.current).add(f),s.lookAt(h),d.copy(s.quaternion),O()}),[q,j,y,O]);o.useEffect((()=>(x.background&&(T.current=x.background,x.background=null,R.background=T.current),()=>{T.current&&(x.background=T.current)})),[]),r.useFrame(((e,r)=>{if(P.current&&k.current){var t;if(M.current)if(p.angleTo(d)<.01)M.current=!1;else{const e=r*i;p.rotateTowards(d,e),j.position.set(0,0,1).applyQuaternion(p).multiplyScalar(z.current).add(E.current),j.up.set(0,1,0).applyQuaternion(p).normalize(),j.quaternion.copy(p),b?b():q&&q.update(),O()}l.copy(j.matrix).invert(),null==(t=k.current)||t.quaternion.setFromRotationMatrix(l),g&&(C.autoClear=!1),C.clearDepth(),C.render(R,P.current)}}),m);const S=o.useMemo((()=>({tweenCamera:Q,raycast:a.useCamera(P)})),[Q]),[_,D]=u,V=e.endsWith("-left")?-v.width/2+_:v.width/2-_,F=e.startsWith("top-")?v.height/2-D:-v.height/2+D;return r.createPortal(o.createElement(c.Provider,{value:S},o.createElement(n.OrthographicCamera,{ref:P,position:[0,0,200]}),o.createElement("group",{ref:k,position:[V,F,0]},w)),R)},exports.useGizmoContext=()=>o.useContext(c);

package/core/GizmoHelper.d.ts

@@ -8,8 +8,9 @@ export declare type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
     alignment?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
     margin?: [number, number];
     renderPriority?: number;
+    autoClear?: boolean;
     onUpdate?: () => void;
     onTarget?: () => Vector3;
 };
-export declare const GizmoHelper: ({ alignment, margin, renderPriority, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
+export declare const GizmoHelper: ({ alignment, margin, renderPriority, autoClear, onUpdate, onTarget, children: GizmoHelperComponent, }: GizmoHelperProps) => any;
 export {};

package/core/GizmoHelper.js

@@ -19,6 +19,7 @@ const GizmoHelper = ({
   alignment = 'bottom-right',
   margin = [80, 80],
   renderPriority = 0,
+  autoClear = true,
   onUpdate,
   onTarget,
   children: GizmoHelperComponent
@@ -49,8 +50,7 @@ const GizmoHelper = ({
   const animating = React.useRef(false);
   const radius = React.useRef(0);
   const focusPoint = React.useRef(new Vector3(0, 0, 0));
-
-  const tweenCamera = direction => {
+  const tweenCamera = React.useCallback(direction => {
     animating.current = true;
     if (defaultControls || onTarget) focusPoint.current = (defaultControls == null ? void 0 : defaultControls.target) || (onTarget == null ? void 0 : onTarget());
     radius.current = mainCamera.position.distanceTo(target); // Rotate from current camera orientation
@@ -61,27 +61,7 @@ const GizmoHelper = ({
     dummy.lookAt(targetPosition);
     q2.copy(dummy.quaternion);
     invalidate();
-  };
-
-  const animateStep = delta => {
-    if (!animating.current) return;
-
-    if (q1.angleTo(q2) < 0.01) {
-      animating.current = false;
-      return;
-    }
-
-    const step = delta * turnRate; // animate position by doing a slerp and then scaling the position on the unit sphere
-
-    q1.rotateTowards(q2, step); // animate orientation
-
-    mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius.current).add(focusPoint.current);
-    mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
-    mainCamera.quaternion.copy(q1);
-    if (onUpdate) onUpdate();else if (defaultControls) defaultControls.update();
-    invalidate();
-  };
-
+  }, [defaultControls, mainCamera, onTarget, invalidate]);
   React.useEffect(() => {
     if (scene.background) {
       //Interchange the actual scene background with the virtual scene
@@ -92,33 +72,43 @@ const GizmoHelper = ({
 
     return () => {
       // reset on unmount
-      if (backgroundRef.current) {
-        scene.background = backgroundRef.current;
-      }
+      if (backgroundRef.current) scene.background = backgroundRef.current;
     };
   }, []);
+  useFrame((_, delta) => {
+    if (virtualCam.current && gizmoRef.current) {
+      var _gizmoRef$current;
 
-  const beforeRender = () => {
-    var _gizmoRef$current;
+      // Animate step
+      if (animating.current) {
+        if (q1.angleTo(q2) < 0.01) {
+          animating.current = false;
+        } else {
+          const step = delta * turnRate; // animate position by doing a slerp and then scaling the position on the unit sphere
 
-    // Sync gizmo with main camera orientation
-    matrix.copy(mainCamera.matrix).invert();
-    (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix);
-  };
+          q1.rotateTowards(q2, step); // animate orientation
 
-  useFrame((_, delta) => {
-    if (virtualCam.current && gizmoRef.current) {
-      animateStep(delta);
-      beforeRender();
-      gl.autoClear = false;
+          mainCamera.position.set(0, 0, 1).applyQuaternion(q1).multiplyScalar(radius.current).add(focusPoint.current);
+          mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize();
+          mainCamera.quaternion.copy(q1);
+          if (onUpdate) onUpdate();else if (defaultControls) defaultControls.update();
+          invalidate();
+        }
+      } // Sync Gizmo with main camera orientation
+
+
+      matrix.copy(mainCamera.matrix).invert();
+      (_gizmoRef$current = gizmoRef.current) == null ? void 0 : _gizmoRef$current.quaternion.setFromRotationMatrix(matrix); // Render virtual camera
+
+      if (autoClear) gl.autoClear = false;
       gl.clearDepth();
       gl.render(virtualScene, virtualCam.current);
     }
   }, renderPriority);
-  const gizmoHelperContext = {
+  const gizmoHelperContext = React.useMemo(() => ({
     tweenCamera,
     raycast: useCamera(virtualCam)
-  }; // Position gizmo component within scene
+  }), [tweenCamera]); // Position gizmo component within scene
 
   const [marginX, marginY] = margin;
   const x = alignment.endsWith('-left') ? -size.width / 2 + marginX : size.width / 2 - marginX;
@@ -127,7 +117,6 @@ const GizmoHelper = ({
     value: gizmoHelperContext
   }, /*#__PURE__*/React.createElement(OrthographicCamera, {
     ref: virtualCam,
-    makeDefault: false,
     position: [0, 0, 200]
   }), /*#__PURE__*/React.createElement("group", {
     ref: gizmoRef,

package/core/Instances.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"),a=require("react-merge-refs"),c=require("react-composer"),u=require("../helpers/Position.cjs.js");function o(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=o(e),l=i(t),f=i(r),d=o(a),m=o(c);let y,p;const x=f.createContext(null),g=new l.Matrix4,b=new l.Matrix4,h=new l.Matrix4,M=new l.Color,w=new l.Vector3,A=new l.Quaternion,E=new l.Vector3,j=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o,getParent:i}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",s.default({instance:i(),instanceKey:c,ref:d.default([a,c])},r),t)})),v=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:i}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(j,s.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[v,O]=f.useState([]),[[P,q]]=f.useState((()=>{const e=new Float32Array(16*r);for(y=0;y<r;y++)h.identity().toArray(e,16*y);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useLayoutEffect((()=>{m.current.count=m.current.instanceMatrix.updateRange.count=m.current.instanceColor.updateRange.count=Math.min(r,void 0!==t?t:r,v.length)}),[v,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let C=0;n.useFrame((()=>{if(a===1/0||C<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),g.copy(m.current.matrixWorld).invert(),y=0;y<v.length;y++)p=v[y].current,p.matrixWorld.decompose(w,A,E),b.compose(w,A,E).premultiply(g),b.equals(h.fromArray(P,16*y))||(b.toArray(P,16*y),m.current.instanceMatrix.needsUpdate=!0),p.color.equals(M.fromArray(q,3*y))||(p.color.toArray(q,3*y),m.current.instanceColor.needsUpdate=!0);C++}}));const R=f.useMemo((()=>({getParent:()=>m,subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",s.default({userData:{instances:v},matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0],raycast:()=>null},c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:P.length/16,array:P,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:q.length/3,array:q,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:R},e(i)):f.createElement(x.Provider,{value:R},e))}));exports.Instance=j,exports.Instances=v,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement(m.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(v,s.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};
+"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"),a=require("react-merge-refs"),c=require("react-composer"),u=require("../helpers/Position.cjs.js");function o(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=o(e),l=i(t),f=i(r),d=o(a),m=o(c);let p,y;const x=f.createContext(null),g=new l.Matrix4,b=new l.Matrix4,h=new l.Matrix4;new l.Color;const M=new l.Vector3,w=new l.Quaternion,E=new l.Vector3,j=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o,getParent:i}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",s.default({instance:i(),instanceKey:c,ref:d.default([a,c])},r),t)})),v=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:i}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(j,s.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[v,A]=f.useState([]),[[O,P]]=f.useState((()=>{const e=new Float32Array(16*r);for(p=0;p<r;p++)h.identity().toArray(e,16*p);return[e,new Float32Array([...new Array(3*r)].map((()=>1)))]}));f.useLayoutEffect((()=>{m.current.count=m.current.instanceMatrix.updateRange.count=m.current.instanceColor.updateRange.count=Math.min(r,void 0!==t?t:r,v.length)}),[v,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let q=0;n.useFrame((()=>{if(a===1/0||q<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),g.copy(m.current.matrixWorld).invert(),p=0;p<v.length;p++)y=v[p].current,y.matrixWorld.decompose(M,w,E),b.compose(M,w,E).premultiply(g),b.toArray(O,16*p),m.current.instanceMatrix.needsUpdate=!0,y.color.toArray(P,3*p),m.current.instanceColor.needsUpdate=!0;q++}}));const C=f.useMemo((()=>({getParent:()=>m,subscribe:e=>(A((t=>[...t,e])),()=>A((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",s.default({userData:{instances:v},matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0],raycast:()=>null},c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:O.length/16,array:O,itemSize:16,usage:l.DynamicDrawUsage}),f.createElement("instancedBufferAttribute",{attach:"instanceColor",count:P.length/3,array:P,itemSize:3,usage:l.DynamicDrawUsage}),"function"==typeof e?f.createElement(o.Provider,{value:C},e(i)):f.createElement(x.Provider,{value:C},e))}));exports.Instance=j,exports.Instances=v,exports.Merged=function({meshes:e,children:t,...r}){const n=Array.isArray(e);if(!n)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return f.createElement(m.default,{components:(n?e:Object.values(e)).map((({geometry:e,material:t})=>f.createElement(v,s.default({key:e.uuid,geometry:e,material:t},r))))},(r=>n?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{}))))};

package/core/Instances.js

@@ -11,7 +11,7 @@ const globalContext = /*#__PURE__*/React.createContext(null);
 const parentMatrix = new THREE.Matrix4();
 const instanceMatrix = new THREE.Matrix4();
 const tempMatrix = new THREE.Matrix4();
-const color = new THREE.Color();
+new THREE.Color();
 const translation = new THREE.Vector3();
 const rotation = new THREE.Quaternion();
 const scale = new THREE.Vector3();
@@ -85,16 +85,10 @@ const Instances = /*#__PURE__*/React.forwardRef(({
 
         instanceRef.matrixWorld.decompose(translation, rotation, scale);
         instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix);
-
-        if (!instanceMatrix.equals(tempMatrix.fromArray(matrices, i * 16))) {
-          instanceMatrix.toArray(matrices, i * 16);
-          parentRef.current.instanceMatrix.needsUpdate = true;
-        }
-
-        if (!instanceRef.color.equals(color.fromArray(colors, i * 3))) {
-          instanceRef.color.toArray(colors, i * 3);
-          parentRef.current.instanceColor.needsUpdate = true;
-        }
+        instanceMatrix.toArray(matrices, i * 16);
+        parentRef.current.instanceMatrix.needsUpdate = true;
+        instanceRef.color.toArray(colors, i * 3);
+        parentRef.current.instanceColor.needsUpdate = true;
       }
 
       count++;

package/core/Points.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"),a=require("@react-three/fiber"),n=require("react-merge-refs"),u=require("../helpers/Position.cjs.js");function o(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 a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=o(e),c=i(t),l=i(r),f=o(n);let d,m;const b=l.createContext(null),y=new c.Matrix4,g=new c.Vector3,p=new c.Color,h=l.forwardRef((({children:e,range:t,limit:r=1e3,...n},u)=>{const o=l.useRef(null),[i,h]=l.useState([]),[[j,E,x]]=l.useState((()=>[new Float32Array(3*r),Float32Array.from({length:3*r},(()=>1)),Float32Array.from({length:r},(()=>1))]));l.useLayoutEffect((()=>{o.current.geometry.drawRange.count=Math.min(r,void 0!==t?t:r,i.length)}),[i,t]),l.useEffect((()=>{o.current.geometry.attributes.position.needsUpdate=!0})),a.useFrame((()=>{for(o.current.updateMatrix(),o.current.updateMatrixWorld(),y.copy(o.current.matrixWorld).invert(),d=0;d<i.length;d++)m=i[d].current,m.getWorldPosition(g).applyMatrix4(y),g.x===j[3*d]&&g.y===j[3*d+1]&&g.z===j[3*d+2]||(g.toArray(j,3*d),o.current.geometry.attributes.position.needsUpdate=!0,m.matrixWorldNeedsUpdate=!0),m.color.equals(p.fromArray(E,3*d))||(m.color.toArray(E,3*d),o.current.geometry.attributes.color.needsUpdate=!0),m.size!==x[d]&&(x.set([m.size],d),o.current.geometry.attributes.size.needsUpdate=!0)}));const w=l.useMemo((()=>{const e={};for(d=0;d<i.length;d++){var t;Object.assign(e,null==(t=i[d].current)?void 0:t.__r3f.handlers)}return Object.keys(e).reduce(((e,t)=>({...e,[t]:e=>{var r,a,n;const u=null==(r=i[e.index])?void 0:r.current;return null==u||null==(a=u.__r3f)||null==(n=a.handlers)?void 0:n[t]({...e,object:u})}})),{})}),[e,i]),z=l.useMemo((()=>({subscribe:e=>(h((t=>[...t,e])),()=>h((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("points",s.default({matrixAutoUpdate:!1,ref:f.default([u,o])},w,n),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attachObject:["attributes","position"],count:j.length/3,array:j,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attachObject:["attributes","color"],count:E.length/3,array:E,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attachObject:["attributes","size"],count:x.length,array:x,itemSize:1,usage:c.DynamicDrawUsage})),l.createElement(b.Provider,{value:z},e))})),j=l.forwardRef((({children:e,...t},r)=>{l.useMemo((()=>a.extend({Position:u.Position})),[]);const n=l.useRef(),{subscribe:o}=l.useContext(b);return l.useLayoutEffect((()=>o(n)),[]),l.createElement("position",s.default({ref:f.default([r,n])},t),e)})),E=l.forwardRef((({children:e,positions:t,colors:r,sizes:n,stride:u=3,...o},i)=>{const d=l.useRef(null);return a.useFrame((()=>{const e=d.current.geometry.attributes;e.position.needsUpdate=!0,r&&(e.color.needsUpdate=!0),n&&(e.size.needsUpdate=!0)})),l.createElement("points",s.default({ref:f.default([i,d])},o),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attachObject:["attributes","position"],count:t.length/u,array:t,itemSize:u,usage:c.DynamicDrawUsage}),r&&l.createElement("bufferAttribute",{attachObject:["attributes","color"],count:r.length/u,array:r,itemSize:3,usage:c.DynamicDrawUsage}),n&&l.createElement("bufferAttribute",{attachObject:["attributes","size"],count:n.length/u,array:n,itemSize:1,usage:c.DynamicDrawUsage})),e)})),x=l.forwardRef(((e,t)=>e.positions instanceof Float32Array?l.createElement(E,s.default({},e,{ref:t})):l.createElement(h,s.default({},e,{ref:t}))));exports.Point=j,exports.Points=x,exports.PointsBuffer=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),n=require("react-merge-refs"),u=require("../helpers/Position.cjs.js");function o(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 a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=o(e),c=i(t),l=i(r),f=o(n);let d,b;const m=l.createContext(null),g=new c.Matrix4,y=new c.Vector3;new c.Color;const p=l.forwardRef((({children:e,range:t,limit:r=1e3,...n},u)=>{const o=l.useRef(null),[i,p]=l.useState([]),[[h,j,E]]=l.useState((()=>[new Float32Array(3*r),Float32Array.from({length:3*r},(()=>1)),Float32Array.from({length:r},(()=>1))]));l.useLayoutEffect((()=>{o.current.geometry.drawRange.count=Math.min(r,void 0!==t?t:r,i.length)}),[i,t]),l.useEffect((()=>{o.current.geometry.attributes.position.needsUpdate=!0})),a.useFrame((()=>{for(o.current.updateMatrix(),o.current.updateMatrixWorld(),g.copy(o.current.matrixWorld).invert(),d=0;d<i.length;d++)b=i[d].current,y.toArray(h,3*d),o.current.geometry.attributes.position.needsUpdate=!0,b.matrixWorldNeedsUpdate=!0,b.color.toArray(j,3*d),o.current.geometry.attributes.color.needsUpdate=!0,E.set([b.size],d),o.current.geometry.attributes.size.needsUpdate=!0}));const w=l.useMemo((()=>{const e={};for(d=0;d<i.length;d++){var t;Object.assign(e,null==(t=i[d].current)?void 0:t.__r3f.handlers)}return Object.keys(e).reduce(((e,t)=>({...e,[t]:e=>{var r,a,n;const u=null==(r=i[e.index])?void 0:r.current;return null==u||null==(a=u.__r3f)||null==(n=a.handlers)?void 0:n[t]({...e,object:u})}})),{})}),[e,i]),x=l.useMemo((()=>({subscribe:e=>(p((t=>[...t,e])),()=>p((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("points",s.default({matrixAutoUpdate:!1,ref:f.default([u,o])},w,n),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attachObject:["attributes","position"],count:h.length/3,array:h,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attachObject:["attributes","color"],count:j.length/3,array:j,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attachObject:["attributes","size"],count:E.length,array:E,itemSize:1,usage:c.DynamicDrawUsage})),l.createElement(m.Provider,{value:x},e))})),h=l.forwardRef((({children:e,...t},r)=>{l.useMemo((()=>a.extend({Position:u.Position})),[]);const n=l.useRef(),{subscribe:o}=l.useContext(m);return l.useLayoutEffect((()=>o(n)),[]),l.createElement("position",s.default({ref:f.default([r,n])},t),e)})),j=l.forwardRef((({children:e,positions:t,colors:r,sizes:n,stride:u=3,...o},i)=>{const d=l.useRef(null);return a.useFrame((()=>{const e=d.current.geometry.attributes;e.position.needsUpdate=!0,r&&(e.color.needsUpdate=!0),n&&(e.size.needsUpdate=!0)})),l.createElement("points",s.default({ref:f.default([i,d])},o),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attachObject:["attributes","position"],count:t.length/u,array:t,itemSize:u,usage:c.DynamicDrawUsage}),r&&l.createElement("bufferAttribute",{attachObject:["attributes","color"],count:r.length/u,array:r,itemSize:3,usage:c.DynamicDrawUsage}),n&&l.createElement("bufferAttribute",{attachObject:["attributes","size"],count:n.length/u,array:n,itemSize:1,usage:c.DynamicDrawUsage})),e)})),E=l.forwardRef(((e,t)=>e.positions instanceof Float32Array?l.createElement(j,s.default({},e,{ref:t})):l.createElement(p,s.default({},e,{ref:t}))));exports.Point=h,exports.Points=E,exports.PointsBuffer=j;

package/core/Points.js

@@ -9,7 +9,7 @@ let i, positionRef;
 const context = /*#__PURE__*/React.createContext(null);
 const parentMatrix = new THREE.Matrix4();
 const position = new THREE.Vector3();
-const color = new THREE.Color();
+new THREE.Color();
 /**
  * Instance implementation, relies on react + context to update the attributes based on the children of this component
  */
@@ -41,23 +41,13 @@ const PointsInstances = /*#__PURE__*/React.forwardRef(({
 
     for (i = 0; i < refs.length; i++) {
       positionRef = refs[i].current;
-      positionRef.getWorldPosition(position).applyMatrix4(parentMatrix);
-
-      if (position.x !== positions[i * 3] || position.y !== positions[i * 3 + 1] || position.z !== positions[i * 3 + 2]) {
-        position.toArray(positions, i * 3);
-        parentRef.current.geometry.attributes.position.needsUpdate = true;
-        positionRef.matrixWorldNeedsUpdate = true;
-      }
-
-      if (!positionRef.color.equals(color.fromArray(colors, i * 3))) {
-        positionRef.color.toArray(colors, i * 3);
-        parentRef.current.geometry.attributes.color.needsUpdate = true;
-      }
-
-      if (positionRef.size !== sizes[i]) {
-        sizes.set([positionRef.size], i);
-        parentRef.current.geometry.attributes.size.needsUpdate = true;
-      }
+      position.toArray(positions, i * 3);
+      parentRef.current.geometry.attributes.position.needsUpdate = true;
+      positionRef.matrixWorldNeedsUpdate = true;
+      positionRef.color.toArray(colors, i * 3);
+      parentRef.current.geometry.attributes.color.needsUpdate = true;
+      sizes.set([positionRef.size], i);
+      parentRef.current.geometry.attributes.size.needsUpdate = true;
     }
   });
   const events = React.useMemo(() => {

package/core/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),c=require("./Image.cjs.js"),j=require("./Edges.cjs.js"),n=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),l=require("./CubeCamera.cjs.js"),x=require("./DeviceOrientationControls.cjs.js"),q=require("./FlyControls.cjs.js"),d=require("./MapControls.cjs.js"),C=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),m=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),b=require("./PointerLockControls.cjs.js"),M=require("./FirstPersonControls.cjs.js"),P=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),T=require("./useCubeTexture.cjs.js"),g=require("./useFBX.cjs.js"),v=require("./useGLTF.cjs.js"),L=require("./useProgress.cjs.js"),A=require("./useTexture.cjs.js"),G=require("./useKTX2.cjs.js"),k=require("./Stats.cjs.js"),D=require("./useDepthBuffer.cjs.js"),F=require("./useAspect.cjs.js"),w=require("./useCamera.cjs.js"),z=require("./useDetectGPU.cjs.js"),I=require("./useHelper.cjs.js"),O=require("./useBVH.cjs.js"),E=require("./useContextBridge.cjs.js"),R=require("./useAnimations.cjs.js"),y=require("./useFBO.cjs.js"),H=require("./useIntersect.cjs.js"),V=require("./CurveModifier.cjs.js"),Q=require("./MeshDistortMaterial.cjs.js"),X=require("./MeshWobbleMaterial.cjs.js"),K=require("./MeshReflectorMaterial.cjs.js"),W=require("./PointMaterial.cjs.js"),N=require("./shaderMaterial.cjs.js"),U=require("./softShadows.cjs.js"),_=require("./shapes.cjs.js"),J=require("./RoundedBox.cjs.js"),Y=require("./ScreenQuad.cjs.js"),Z=require("./Center.cjs.js"),$=require("./Bounds.cjs.js"),ee=require("./CameraShake.cjs.js"),re=require("./Float.cjs.js"),se=require("./Stage.cjs.js"),te=require("./Backdrop.cjs.js"),oe=require("./Shadow.cjs.js"),ie=require("./ContactShadows.cjs.js"),ue=require("./Reflector.cjs.js"),ae=require("./SpotLight.cjs.js"),ce=require("./Environment.cjs.js"),je=require("./Sky.cjs.js"),ne=require("./Stars.cjs.js"),pe=require("./Cloud.cjs.js"),le=require("./useMatcapTexture.cjs.js"),xe=require("./useNormalTexture.cjs.js"),qe=require("./Points.cjs.js"),de=require("./Instances.cjs.js"),Ce=require("./Segments.cjs.js"),he=require("./Detailed.cjs.js"),me=require("./Preload.cjs.js"),Be=require("./BakeShadows.cjs.js"),be=require("./meshBounds.cjs.js"),Me=require("./AdaptiveDpr.cjs.js"),Pe=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=c.Image,exports.Edges=j.Edges,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=l.CubeCamera,exports.DeviceOrientationControls=x.DeviceOrientationControls,exports.FlyControls=q.FlyControls,exports.MapControls=d.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=b.PointerLockControls,exports.FirstPersonControls=M.FirstPersonControls,exports.GizmoHelper=P.GizmoHelper,exports.useGizmoContext=P.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=T.useCubeTexture,exports.useFBX=g.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=I.useHelper,exports.useBVH=O.useBVH,exports.useContextBridge=E.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.CurveModifier=V.CurveModifier,exports.MeshDistortMaterial=Q.MeshDistortMaterial,exports.MeshWobbleMaterial=X.MeshWobbleMaterial,exports.MeshReflectorMaterial=K.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=_.Box,exports.Circle=_.Circle,exports.Cone=_.Cone,exports.Cylinder=_.Cylinder,exports.Dodecahedron=_.Dodecahedron,exports.Extrude=_.Extrude,exports.Icosahedron=_.Icosahedron,exports.Lathe=_.Lathe,exports.Octahedron=_.Octahedron,exports.Plane=_.Plane,exports.Polyhedron=_.Polyhedron,exports.Ring=_.Ring,exports.Sphere=_.Sphere,exports.Tetrahedron=_.Tetrahedron,exports.Torus=_.Torus,exports.TorusKnot=_.TorusKnot,exports.Tube=_.Tube,exports.RoundedBox=J.RoundedBox,exports.ScreenQuad=Y.ScreenQuad,exports.Center=Z.Center,exports.Bounds=$.Bounds,exports.useBounds=$.useBounds,exports.CameraShake=ee.CameraShake,exports.Float=re.Float,exports.Stage=se.Stage,exports.Backdrop=te.Backdrop,exports.Shadow=oe.Shadow,exports.ContactShadows=ie.ContactShadows,exports.Reflector=ue.Reflector,exports.SpotLight=ae.SpotLight,exports.Environment=ce.Environment,exports.Sky=je.Sky,exports.calcPosFromAngles=je.calcPosFromAngles,exports.Stars=ne.Stars,exports.Cloud=pe.Cloud,exports.useMatcapTexture=le.useMatcapTexture,exports.useNormalTexture=xe.useNormalTexture,exports.Point=qe.Point,exports.Points=qe.Points,exports.PointsBuffer=qe.PointsBuffer,exports.Instance=de.Instance,exports.Instances=de.Instances,exports.Merged=de.Merged,exports.Segment=Ce.Segment,exports.Segments=Ce.Segments,exports.Detailed=he.Detailed,exports.Preload=me.Preload,exports.BakeShadows=Be.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Pe.AdaptiveEvents;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),j=require("./Image.cjs.js"),c=require("./Edges.cjs.js"),n=require("./OrthographicCamera.cjs.js"),p=require("./PerspectiveCamera.cjs.js"),x=require("./CubeCamera.cjs.js"),l=require("./DeviceOrientationControls.cjs.js"),d=require("./FlyControls.cjs.js"),q=require("./MapControls.cjs.js"),C=require("./OrbitControls.cjs.js"),h=require("./TrackballControls.cjs.js"),m=require("./ArcballControls.cjs.js"),B=require("./TransformControls.cjs.js"),P=require("./PointerLockControls.cjs.js"),b=require("./FirstPersonControls.cjs.js"),M=require("./GizmoHelper.cjs.js"),S=require("./GizmoViewcube.cjs.js"),f=require("./GizmoViewport.cjs.js"),T=require("./useCubeTexture.cjs.js"),g=require("./useFBX.cjs.js"),v=require("./useGLTF.cjs.js"),L=require("./useProgress.cjs.js"),A=require("./useTexture.cjs.js"),G=require("./useKTX2.cjs.js"),k=require("./Stats.cjs.js"),D=require("./useDepthBuffer.cjs.js"),F=require("./useAspect.cjs.js"),w=require("./useCamera.cjs.js"),z=require("./useDetectGPU.cjs.js"),E=require("./useHelper.cjs.js"),I=require("./useBVH.cjs.js"),O=require("./useContextBridge.cjs.js"),R=require("./useAnimations.cjs.js"),y=require("./useFBO.cjs.js"),H=require("./useIntersect.cjs.js"),V=require("./useBoxProjectedEnv.cjs.js"),Q=require("./CurveModifier.cjs.js"),X=require("./MeshDistortMaterial.cjs.js"),K=require("./MeshWobbleMaterial.cjs.js"),W=require("./MeshReflectorMaterial.cjs.js"),N=require("./PointMaterial.cjs.js"),U=require("./shaderMaterial.cjs.js"),_=require("./softShadows.cjs.js"),J=require("./shapes.cjs.js"),Y=require("./RoundedBox.cjs.js"),Z=require("./ScreenQuad.cjs.js"),$=require("./Center.cjs.js"),ee=require("./Bounds.cjs.js"),re=require("./CameraShake.cjs.js"),se=require("./Float.cjs.js"),te=require("./Stage.cjs.js"),oe=require("./Backdrop.cjs.js"),ie=require("./Shadow.cjs.js"),ue=require("./ContactShadows.cjs.js"),ae=require("./Reflector.cjs.js"),je=require("./SpotLight.cjs.js"),ce=require("./Environment.cjs.js"),ne=require("./Sky.cjs.js"),pe=require("./Stars.cjs.js"),xe=require("./Cloud.cjs.js"),le=require("./useMatcapTexture.cjs.js"),de=require("./useNormalTexture.cjs.js"),qe=require("./Points.cjs.js"),Ce=require("./Instances.cjs.js"),he=require("./Segments.cjs.js"),me=require("./Detailed.cjs.js"),Be=require("./Preload.cjs.js"),Pe=require("./BakeShadows.cjs.js"),be=require("./meshBounds.cjs.js"),Me=require("./AdaptiveDpr.cjs.js"),Se=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=j.Image,exports.Edges=c.Edges,exports.OrthographicCamera=n.OrthographicCamera,exports.PerspectiveCamera=p.PerspectiveCamera,exports.CubeCamera=x.CubeCamera,exports.DeviceOrientationControls=l.DeviceOrientationControls,exports.FlyControls=d.FlyControls,exports.MapControls=q.MapControls,exports.OrbitControls=C.OrbitControls,exports.TrackballControls=h.TrackballControls,exports.ArcballControls=m.ArcballControls,exports.TransformControls=B.TransformControls,exports.PointerLockControls=P.PointerLockControls,exports.FirstPersonControls=b.FirstPersonControls,exports.GizmoHelper=M.GizmoHelper,exports.useGizmoContext=M.useGizmoContext,exports.GizmoViewcube=S.GizmoViewcube,exports.GizmoViewport=f.GizmoViewport,exports.useCubeTexture=T.useCubeTexture,exports.useFBX=g.useFBX,exports.useGLTF=v.useGLTF,exports.useProgress=L.useProgress,exports.IsObject=A.IsObject,exports.useTexture=A.useTexture,exports.useKTX2=G.useKTX2,exports.Stats=k.Stats,exports.useDepthBuffer=D.useDepthBuffer,exports.useAspect=F.useAspect,exports.useCamera=w.useCamera,exports.useDetectGPU=z.useDetectGPU,exports.useHelper=E.useHelper,exports.useBVH=I.useBVH,exports.useContextBridge=O.useContextBridge,exports.useAnimations=R.useAnimations,exports.useFBO=y.useFBO,exports.useIntersect=H.useIntersect,exports.useBoxProjectedEnv=V.useBoxProjectedEnv,exports.CurveModifier=Q.CurveModifier,exports.MeshDistortMaterial=X.MeshDistortMaterial,exports.MeshWobbleMaterial=K.MeshWobbleMaterial,exports.MeshReflectorMaterial=W.MeshReflectorMaterial,exports.PointMaterial=N.PointMaterial,exports.PointMaterialImpl=N.PointMaterialImpl,exports.shaderMaterial=U.shaderMaterial,exports.softShadows=_.softShadows,exports.Box=J.Box,exports.Circle=J.Circle,exports.Cone=J.Cone,exports.Cylinder=J.Cylinder,exports.Dodecahedron=J.Dodecahedron,exports.Extrude=J.Extrude,exports.Icosahedron=J.Icosahedron,exports.Lathe=J.Lathe,exports.Octahedron=J.Octahedron,exports.Plane=J.Plane,exports.Polyhedron=J.Polyhedron,exports.Ring=J.Ring,exports.Sphere=J.Sphere,exports.Tetrahedron=J.Tetrahedron,exports.Torus=J.Torus,exports.TorusKnot=J.TorusKnot,exports.Tube=J.Tube,exports.RoundedBox=Y.RoundedBox,exports.ScreenQuad=Z.ScreenQuad,exports.Center=$.Center,exports.Bounds=ee.Bounds,exports.useBounds=ee.useBounds,exports.CameraShake=re.CameraShake,exports.Float=se.Float,exports.Stage=te.Stage,exports.Backdrop=oe.Backdrop,exports.Shadow=ie.Shadow,exports.ContactShadows=ue.ContactShadows,exports.Reflector=ae.Reflector,exports.SpotLight=je.SpotLight,exports.Environment=ce.Environment,exports.Sky=ne.Sky,exports.calcPosFromAngles=ne.calcPosFromAngles,exports.Stars=pe.Stars,exports.Cloud=xe.Cloud,exports.useMatcapTexture=le.useMatcapTexture,exports.useNormalTexture=de.useNormalTexture,exports.Point=qe.Point,exports.Points=qe.Points,exports.PointsBuffer=qe.PointsBuffer,exports.Instance=Ce.Instance,exports.Instances=Ce.Instances,exports.Merged=Ce.Merged,exports.Segment=he.Segment,exports.Segments=he.Segments,exports.Detailed=me.Detailed,exports.Preload=Be.Preload,exports.BakeShadows=Pe.BakeShadows,exports.meshBounds=be.meshBounds,exports.AdaptiveDpr=Me.AdaptiveDpr,exports.AdaptiveEvents=Se.AdaptiveEvents;

package/core/index.d.ts

@@ -40,6 +40,7 @@ export * from './useContextBridge';
 export * from './useAnimations';
 export * from './useFBO';
 export * from './useIntersect';
+export * from './useBoxProjectedEnv';
 export * from './CurveModifier';
 export * from './MeshDistortMaterial';
 export * from './MeshWobbleMaterial';

package/core/index.js

@@ -40,6 +40,7 @@ export { useContextBridge } from './useContextBridge.js';
 export { useAnimations } from './useAnimations.js';
 export { useFBO } from './useFBO.js';
 export { useIntersect } from './useIntersect.js';
+export { useBoxProjectedEnv } from './useBoxProjectedEnv.js';
 export { CurveModifier } from './CurveModifier.js';
 export { MeshDistortMaterial } from './MeshDistortMaterial.js';
 export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';

package/core/useBoxProjectedEnv.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),n=require("@react-three/fiber");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var o=i(e),t=i(r);exports.useBoxProjectedEnv=function(e=new o.Vector3,r=new o.Vector3){const[i]=t.useState((()=>({position:new o.Vector3,size:new o.Vector3})));n.applyProps(i,{position:e,size:r});const a=t.useRef(null),c=t.useMemo((()=>({ref:a,onBeforeCompile:e=>function(e,r,n){e.defines.BOX_PROJECTED_ENV_MAP=!0,e.uniforms.envMapPosition={value:r},e.uniforms.envMapSize={value:n},e.vertexShader=`\n  varying vec3 vWorldPosition;\n  ${e.vertexShader.replace("#include <worldpos_vertex>","\n#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )\n  vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );\n  #ifdef BOX_PROJECTED_ENV_MAP\n    vWorldPosition = worldPosition.xyz;\n  #endif\n#endif\n")}`,e.fragmentShader=`\n    \n#ifdef BOX_PROJECTED_ENV_MAP\n  uniform vec3 envMapSize;\n  uniform vec3 envMapPosition;\n  varying vec3 vWorldPosition;\n    \n  vec3 parallaxCorrectNormal( vec3 v, vec3 cubeSize, vec3 cubePos ) {\n    vec3 nDir = normalize( v );\n    vec3 rbmax = ( .5 * cubeSize + cubePos - vWorldPosition ) / nDir;\n    vec3 rbmin = ( -.5 * cubeSize + cubePos - vWorldPosition ) / nDir;\n    vec3 rbminmax;\n    rbminmax.x = ( nDir.x > 0. ) ? rbmax.x : rbmin.x;\n    rbminmax.y = ( nDir.y > 0. ) ? rbmax.y : rbmin.y;\n    rbminmax.z = ( nDir.z > 0. ) ? rbmax.z : rbmin.z;\n    float correction = min( min( rbminmax.x, rbminmax.y ), rbminmax.z );\n    vec3 boxIntersection = vWorldPosition + nDir * correction;    \n    return boxIntersection - cubePos;\n  }\n#endif\n\n    ${e.fragmentShader.replace("#include <envmap_physical_pars_fragment>",o.ShaderChunk.envmap_physical_pars_fragment).replace("vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );","vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );\n         \n#ifdef BOX_PROJECTED_ENV_MAP\n  worldNormal = parallaxCorrectNormal( worldNormal, envMapSize, envMapPosition );\n#endif\n\n         ").replace("reflectVec = inverseTransformDirection( reflectVec, viewMatrix );","reflectVec = inverseTransformDirection( reflectVec, viewMatrix );\n         \n#ifdef BOX_PROJECTED_ENV_MAP\n  reflectVec = parallaxCorrectNormal( reflectVec, envMapSize, envMapPosition );\n#endif\n\n        ")}`}(e,i.position,i.size),customProgramCacheKey:()=>JSON.stringify(i.position.toArray())+JSON.stringify(i.size.toArray())})),[...i.position.toArray(),...i.size.toArray()]);return t.useLayoutEffect((()=>{a.current.needsUpdate=!0}),[i]),c};

package/core/useBoxProjectedEnv.d.ts

@@ -0,0 +1,8 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ReactThreeFiber } from '@react-three/fiber';
+export declare function useBoxProjectedEnv(position?: ReactThreeFiber.Vector3, size?: ReactThreeFiber.Vector3): {
+    ref: React.MutableRefObject<THREE.Material>;
+    onBeforeCompile: (shader: THREE.Shader) => void;
+    customProgramCacheKey: () => string;
+};

package/core/useBoxProjectedEnv.js

@@ -0,0 +1,98 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { applyProps } from '@react-three/fiber';
+
+// and @0beqz https://gist.github.com/0beqz/8d51b4ae16d68021a09fb504af708fca
+
+const worldposReplace =
+/* glsl */
+`
+#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
+  vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
+  #ifdef BOX_PROJECTED_ENV_MAP
+    vWorldPosition = worldPosition.xyz;
+  #endif
+#endif
+`;
+const boxProjectDefinitions =
+/*glsl */
+`
+#ifdef BOX_PROJECTED_ENV_MAP
+  uniform vec3 envMapSize;
+  uniform vec3 envMapPosition;
+  varying vec3 vWorldPosition;
+    
+  vec3 parallaxCorrectNormal( vec3 v, vec3 cubeSize, vec3 cubePos ) {
+    vec3 nDir = normalize( v );
+    vec3 rbmax = ( .5 * cubeSize + cubePos - vWorldPosition ) / nDir;
+    vec3 rbmin = ( -.5 * cubeSize + cubePos - vWorldPosition ) / nDir;
+    vec3 rbminmax;
+    rbminmax.x = ( nDir.x > 0. ) ? rbmax.x : rbmin.x;
+    rbminmax.y = ( nDir.y > 0. ) ? rbmax.y : rbmin.y;
+    rbminmax.z = ( nDir.z > 0. ) ? rbmax.z : rbmin.z;
+    float correction = min( min( rbminmax.x, rbminmax.y ), rbminmax.z );
+    vec3 boxIntersection = vWorldPosition + nDir * correction;    
+    return boxIntersection - cubePos;
+  }
+#endif
+`; // will be inserted after "vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );"
+
+const getIBLIrradiance_patch =
+/* glsl */
+`
+#ifdef BOX_PROJECTED_ENV_MAP
+  worldNormal = parallaxCorrectNormal( worldNormal, envMapSize, envMapPosition );
+#endif
+`; // will be inserted after "reflectVec = inverseTransformDirection( reflectVec, viewMatrix );"
+
+const getIBLRadiance_patch =
+/* glsl */
+`
+#ifdef BOX_PROJECTED_ENV_MAP
+  reflectVec = parallaxCorrectNormal( reflectVec, envMapSize, envMapPosition );
+#endif
+`;
+
+function boxProjectedEnvMap(shader, envMapPosition, envMapSize) {
+  shader.defines.BOX_PROJECTED_ENV_MAP = true; // uniforms
+
+  shader.uniforms.envMapPosition = {
+    value: envMapPosition
+  };
+  shader.uniforms.envMapSize = {
+    value: envMapSize
+  }; // vertex shader
+
+  shader.vertexShader = `
+  varying vec3 vWorldPosition;
+  ${shader.vertexShader.replace('#include <worldpos_vertex>', worldposReplace)}`; // fragment shader
+
+  shader.fragmentShader = `
+    ${boxProjectDefinitions}
+    ${shader.fragmentShader.replace('#include <envmap_physical_pars_fragment>', THREE.ShaderChunk.envmap_physical_pars_fragment).replace('vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );', `vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );
+         ${getIBLIrradiance_patch}
+         `).replace('reflectVec = inverseTransformDirection( reflectVec, viewMatrix );', `reflectVec = inverseTransformDirection( reflectVec, viewMatrix );
+         ${getIBLRadiance_patch}
+        `)}`;
+}
+
+function useBoxProjectedEnv(position = new THREE.Vector3(), size = new THREE.Vector3()) {
+  const [config] = React.useState(() => ({
+    position: new THREE.Vector3(),
+    size: new THREE.Vector3()
+  }));
+  applyProps(config, {
+    position,
+    size
+  });
+  const ref = React.useRef(null);
+  const spread = React.useMemo(() => ({
+    ref,
+    onBeforeCompile: shader => boxProjectedEnvMap(shader, config.position, config.size),
+    customProgramCacheKey: () => JSON.stringify(config.position.toArray()) + JSON.stringify(config.size.toArray())
+  }), [...config.position.toArray(), ...config.size.toArray()]);
+  React.useLayoutEffect(() => void (ref.current.needsUpdate = true), [config]);
+  return spread;
+}
+
+export { useBoxProjectedEnv };