@react-three/drei 8.10.6 → 8.11.1

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>
@@ -732,7 +733,7 @@ This material makes your geometry distort following simplex noise.
 
 #### PointMaterial
 
-An antialiased round dot that always keeps the same size.
+Antialiased round dots. It takes the same props as regular THREE.PointsMaterial
 
 ```jsx
 <points>
@@ -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
@@ -1338,27 +1363,12 @@ A wrapper around [THREE.Points](https://threejs.org/docs/index.html?q=points#api
   limit={1000} // Optional: max amount of items (for calculating buffer size)
   range={1000} // Optional: draw-range
 >
-  <pointsMaterial />
+  <pointsMaterial vertexColors />
   <Point position={[1, 2, 3]} color="red" onClick={onClick} onPointerOver={onPointerOver} ... />
   // As many as you want, make them conditional, mount/unmount them, lazy load them, etc ...
 </Points>
 ```
 
-If you have a material that supports vertex colors (like drei/PointMaterial) you can have individual colors!
-
-```jsx
-<Points>
-  <PointMaterial />
-  <Point color="hotpink" />
-```
-
-Otherwise use any material you like:
-
-```jsx
-<Points>
-  <pointsMaterial vertexColors size={10} />
-```
-
 If you just want to use buffers for position, color and size, you can use the alternative API:
 
 ```jsx

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/PointMaterial.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");function n(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 o=n(e),i=a(t),l=a(r);class c extends i.ShaderMaterial{constructor(){super({transparent:!0,uniforms:{size:{value:1}},vertexShader:i.ShaderLib.points.vertexShader,fragmentShader:"\n      varying vec3 vColor;\n      void main() {\n        vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n        float r = dot(cxy, cxy);\n        float delta = fwidth(r);\n        vec3 color = vColor;\n        gl_FragColor = vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r));\n\n        #include <tonemapping_fragment>\n\t      #include <encodings_fragment>\n      }",vertexColors:!0})}get scale(){return this.uniforms.size.value}set scale(e){this.uniforms.size.value=e}}const s=l.forwardRef(((e,t)=>{const[r]=l.useState((()=>new c));return l.createElement("primitive",o.default({object:r,ref:t,attach:"material"},e))}));exports.PointMaterial=s,exports.PointMaterialImpl=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(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 o=a(e),l=n(t),u=n(r);class c extends l.PointsMaterial{constructor(e){super(e),this.onBeforeCompile=e=>{e.fragmentShader=e.fragmentShader.replace("#include <output_fragment>","\n        #include <output_fragment>\n      vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n      float r = dot(cxy, cxy);\n      float delta = fwidth(r);     \n      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\n      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );\n      ")}}}const i=u.forwardRef(((e,t)=>{const[r]=u.useState((()=>new c(null)));return u.createElement("primitive",o.default({object:r,ref:t,attach:"material"},e))}));exports.PointMaterial=i,exports.PointMaterialImpl=c;

package/core/PointMaterial.d.ts

@@ -1,8 +1,6 @@
 import * as THREE from 'three';
 import * as React from 'react';
-declare type PointMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
-    scale?: number;
-};
+declare type PointMaterialType = JSX.IntrinsicElements['pointsMaterial'];
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -10,10 +8,8 @@ declare global {
         }
     }
 }
-export declare class PointMaterialImpl extends THREE.ShaderMaterial {
-    constructor();
-    get scale(): any;
-    set scale(v: any);
+export declare class PointMaterialImpl extends THREE.PointsMaterial {
+    constructor(props: any);
 }
 export declare const PointMaterial: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
 export {};

package/core/PointMaterial.js

@@ -2,43 +2,25 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
 
-class PointMaterialImpl extends THREE.ShaderMaterial {
-  constructor() {
-    super({
-      transparent: true,
-      uniforms: {
-        size: {
-          value: 1
-        }
-      },
-      vertexShader: THREE.ShaderLib.points.vertexShader,
-      fragmentShader: `
-      varying vec3 vColor;
-      void main() {
-        vec2 cxy = 2.0 * gl_PointCoord - 1.0;
-        float r = dot(cxy, cxy);
-        float delta = fwidth(r);
-        vec3 color = vColor;
-        gl_FragColor = vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r));
+class PointMaterialImpl extends THREE.PointsMaterial {
+  constructor(props) {
+    super(props);
 
-        #include <tonemapping_fragment>
-	      #include <encodings_fragment>
-      }`,
-      vertexColors: true
-    });
-  }
-
-  get scale() {
-    return this.uniforms.size.value;
-  }
-
-  set scale(v) {
-    this.uniforms.size.value = v;
+    this.onBeforeCompile = shader => {
+      shader.fragmentShader = shader.fragmentShader.replace('#include <output_fragment>', `
+        #include <output_fragment>
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);     
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      `);
+    };
   }
 
 }
 const PointMaterial = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const [material] = React.useState(() => new PointMaterialImpl());
+  const [material] = React.useState(() => new PointMaterialImpl(null));
   return /*#__PURE__*/React.createElement("primitive", _extends({
     object: material,
     ref: ref,

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,x,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(),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(x,3*d))||(m.color.toArray(x,3*d),o.current.geometry.attributes.color.needsUpdate=!0),m.size!==E[d]&&(E.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]),U=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:x.length/3,array:x,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attachObject:["attributes","size"],count:E.length,array:E,itemSize:1,usage:c.DynamicDrawUsage})),l.createElement(b.Provider,{value:U},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)})),x=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({matrixAutoUpdate:!1,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(x,s.default({},e,{ref:t})):l.createElement(h,s.default({},e,{ref:t}))));exports.Point=j,exports.Points=E,exports.PointsBuffer=x;
+"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.d.ts

@@ -5,12 +5,12 @@ declare type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
     limit?: number;
 };
 export declare const Point: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
-declare type PointsBuffersProps = Omit<JSX.IntrinsicElements['points'], 'position'> & {
+declare type PointsBuffersProps = JSX.IntrinsicElements['points'] & {
     positions: Float32Array;
     colors?: Float32Array;
     sizes?: Float32Array;
     stride?: 2 | 3;
 };
-export declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "colors" | "isPoints" | "positions" | "sizes" | "stride"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
-export declare const Points: React.ForwardRefExoticComponent<Pick<PointsInstancesProps | PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "isPoints"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export declare const PointsBuffer: React.ForwardRefExoticComponent<Pick<PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "colors" | "isPoints" | "positions" | "sizes" | "stride"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export declare const Points: React.ForwardRefExoticComponent<Pick<PointsInstancesProps | PointsBuffersProps, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onClick" | "onContextMenu" | "onDoubleClick" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOut" | "onWheel" | "onPointerMissed" | "material" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "updateMorphTargets" | "isPoints"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
 export {};

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(() => {
@@ -143,17 +133,10 @@ const PointsBuffer = /*#__PURE__*/React.forwardRef(({
   useFrame(() => {
     const attr = pointsRef.current.geometry.attributes;
     attr.position.needsUpdate = true;
-
-    if (colors) {
-      attr.color.needsUpdate = true;
-    }
-
-    if (sizes) {
-      attr.size.needsUpdate = true;
-    }
+    if (colors) attr.color.needsUpdate = true;
+    if (sizes) attr.size.needsUpdate = true;
   });
   return /*#__PURE__*/React.createElement("points", _extends({
-    matrixAutoUpdate: false,
     ref: mergeRefs([forwardedRef, pointsRef])
   }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attachObject: ['attributes', 'position'],
@@ -180,9 +163,7 @@ const Points = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     return /*#__PURE__*/React.createElement(PointsBuffer, _extends({}, props, {
       ref: forwardedRef
     }));
-  }
-
-  return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
+  } else return /*#__PURE__*/React.createElement(PointsInstances, _extends({}, props, {
     ref: forwardedRef
   }));
 });

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 };