@react-three/drei 9.0.0-beta.1 → 9.0.0-beta.4

package/core/OrbitControls.js

@@ -14,33 +14,23 @@ const OrbitControls = /*#__PURE__*/React.forwardRef(({
   onEnd,
   ...restProps
 }, ref) => {
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const gl = useThree(({
-    gl
-  }) => gl);
-  const events = useThree(({
-    events
-  }) => events);
-  const set = useThree(({
-    set
-  }) => set);
-  const get = useThree(({
-    get
-  }) => get);
-  const performance = useThree(({
-    performance
-  }) => performance);
+  const invalidate = useThree(state => state.invalidate);
+  const defaultCamera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
+  const performance = useThree(state => state.performance);
   const explCamera = camera || defaultCamera;
-  const explDomElement = domElement || (typeof events.connected !== 'boolean' ? events.connected : gl.domElement);
+  const explDomElement = domElement || events.connected || gl.domElement;
   const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
   });
+  React.useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, regress, controls, invalidate]);
   React.useEffect(() => {
     const callback = e => {
       invalidate();
@@ -48,17 +38,15 @@ const OrbitControls = /*#__PURE__*/React.forwardRef(({
       if (onChange) onChange(e);
     };
 
-    controls.connect(explDomElement);
     controls.addEventListener('change', callback);
     if (onStart) controls.addEventListener('start', onStart);
     if (onEnd) controls.addEventListener('end', onEnd);
     return () => {
-      controls.removeEventListener('change', callback);
       if (onStart) controls.removeEventListener('start', onStart);
       if (onEnd) controls.removeEventListener('end', onEnd);
-      controls.dispose();
+      controls.removeEventListener('change', callback);
     };
-  }, [explDomElement, onChange, onStart, onEnd, regress, controls, invalidate]);
+  }, [onChange, onStart, onEnd]);
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;

package/core/OrthographicCamera.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { OrthographicCamera as OrthographicCameraImpl } from 'three';
-export declare const OrthographicCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<OrthographicCameraImpl, typeof OrthographicCameraImpl>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const OrthographicCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<OrthographicCameraImpl>, import("@react-three/fiber").NodeProps<OrthographicCameraImpl, typeof OrthographicCameraImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
     scale?: import("@react-three/fiber").Vector3 | undefined;

package/core/PerspectiveCamera.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PerspectiveCamera as PerspectiveCameraImpl } from 'three';
-export declare const PerspectiveCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<PerspectiveCameraImpl, typeof PerspectiveCameraImpl>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const PerspectiveCamera: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<PerspectiveCameraImpl>, import("@react-three/fiber").NodeProps<PerspectiveCameraImpl, typeof PerspectiveCameraImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
     scale?: import("@react-three/fiber").Vector3 | undefined;

package/core/PointMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=n(e),i=o(r),l=o(t);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        #ifdef TONE_MAPPING\n          color = toneMapping(color);\n        #endif\n        gl_FragColor = linearToOutputTexel(vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r)));\n      }",vertexColors:!0})}get scale(){return this.uniforms.size.value}set scale(e){this.uniforms.size.value=e}}const u=l.forwardRef(((e,r)=>{const[t]=l.useState((()=>new c));return l.createElement("primitive",a.default({object:t,ref:r,attach:"material"},e))}));exports.PointMaterial=u,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({},e,{object:r,ref:t,attach:"material"}))}));exports.PointMaterial=i,exports.PointMaterialImpl=c;

package/core/PointMaterial.d.ts

@@ -1,8 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
-declare type PointMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
-    scale?: number;
-};
+import { PrimitiveProps } from '@react-three/fiber';
+declare type PointMaterialType = JSX.IntrinsicElements['pointsMaterial'];
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -10,10 +9,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 declare const PointMaterial: React.ForwardRefExoticComponent<Pick<Omit<PrimitiveProps, "object" | "attach">, string | number> & React.RefAttributes<PointMaterialImpl>>;
 export {};

package/core/PointMaterial.js

@@ -2,48 +2,30 @@ 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;
-        #ifdef TONE_MAPPING
-          color = toneMapping(color);
-        #endif
-        gl_FragColor = linearToOutputTexel(vec4(color, 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r)));
-      }`,
-      vertexColors: true
-    });
-  }
-
-  get scale() {
-    return this.uniforms.size.value;
-  }
+class PointMaterialImpl extends THREE.PointsMaterial {
+  constructor(props) {
+    super(props);
 
-  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());
-  return /*#__PURE__*/React.createElement("primitive", _extends({
+  const [material] = React.useState(() => new PointMaterialImpl(null));
+  return /*#__PURE__*/React.createElement("primitive", _extends({}, props, {
     object: material,
     ref: ref,
     attach: "material"
-  }, props));
+  }));
 });
 
 export { PointMaterial, PointMaterialImpl };

package/core/PointerLockControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),n=require("react"),r=require("three-stdlib");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=l(e),c=o(n);const i=c.forwardRef((({selector:e,onChange:n,onLock:l,onUnlock:o,...i},a)=>{const{camera:d,...s}=i,f=t.useThree((({gl:e})=>e)),v=t.useThree((({camera:e})=>e)),E=t.useThree((({invalidate:e})=>e)),L=d||v,[m]=c.useState((()=>new r.PointerLockControls(L,f.domElement)));return c.useEffect((()=>{const e=e=>{E(),n&&n(e)};return null==m||null==m.addEventListener||m.addEventListener("change",e),l&&(null==m||null==m.addEventListener||m.addEventListener("lock",l)),o&&(null==m||null==m.addEventListener||m.addEventListener("unlock",o)),()=>{null==m||null==m.removeEventListener||m.removeEventListener("change",e),l&&(null==m||null==m.addEventListener||m.addEventListener("lock",l)),o&&(null==m||null==m.addEventListener||m.addEventListener("unlock",o))}}),[n,l,o,m,E]),c.useEffect((()=>{const t=()=>null==m?void 0:m.lock(),n=e?Array.from(document.querySelectorAll(e)):[document];return n.forEach((e=>e&&e.addEventListener("click",t))),()=>{n.forEach((e=>e?e.removeEventListener("click",t):void 0))}}),[m,e]),m?c.createElement("primitive",u.default({ref:a,dispose:void 0,object:m},s)):null}));exports.PointerLockControls=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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),u=c(r);const a=u.forwardRef((({domElement:e,selector:r,onChange:o,onLock:c,onUnlock:a,enabled:i=!0,...f},d)=>{const{camera:l,...v}=f,m=t.useThree((({gl:e})=>e)),h=t.useThree((e=>e.camera)),E=t.useThree((e=>e.invalidate)),b=t.useThree((e=>e.raycaster)),k=t.useThree((e=>e.events)),p=l||h,L=e||k.connected||m.domElement,[g]=u.useState((()=>new n.PointerLockControls(p)));return u.useEffect((()=>{if(i){g.connect(L);const e=b.computeOffsets;return b.computeOffsets=e=>({offsetX:e.target.width/2,offsetY:e.target.height/2}),()=>{g.disconnect(),b.computeOffsets=e}}}),[i,g]),u.useEffect((()=>{const e=e=>{E(),o&&o(e)};g.addEventListener("change",e),c&&g.addEventListener("lock",c),a&&g.addEventListener("unlock",a);const t=()=>g.lock(),n=r?Array.from(document.querySelectorAll(r)):[document];return n.forEach((e=>e&&e.addEventListener("click",t))),()=>{g.removeEventListener("change",e),c&&g.addEventListener("lock",c),a&&g.addEventListener("unlock",a),n.forEach((e=>e?e.removeEventListener("click",t):void 0))}}),[o,c,a,r]),u.createElement("primitive",s.default({ref:d,object:g},v))}));exports.PointerLockControls=a;

package/core/PointerLockControls.d.ts

@@ -3,10 +3,12 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib';
 export declare type PointerLockControlsProps = ReactThreeFiber.Object3DNode<PointerLockControlsImpl, typeof PointerLockControlsImpl> & {
+    domElement?: HTMLElement;
     selector?: string;
+    enabled?: boolean;
     camera?: THREE.Camera;
     onChange?: (e?: THREE.Event) => void;
     onLock?: (e?: THREE.Event) => void;
     onUnlock?: (e?: THREE.Event) => void;
 };
-export declare const PointerLockControls: React.ForwardRefExoticComponent<Pick<PointerLockControlsProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "connect" | "disconnect" | "domElement" | "minPolarAngle" | "maxPolarAngle" | "isLocked" | "getDirection" | "moveForward" | "moveRight" | "lock" | "unlock" | "selector" | "onLock" | "onUnlock"> & React.RefAttributes<PointerLockControlsImpl>>;
+export declare const PointerLockControls: React.ForwardRefExoticComponent<Pick<PointerLockControlsProps, "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onChange" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "camera" | "enabled" | "connect" | "disconnect" | "domElement" | "minPolarAngle" | "maxPolarAngle" | "isLocked" | "getDirection" | "moveForward" | "moveRight" | "lock" | "unlock" | "selector" | "onLock" | "onUnlock"> & React.RefAttributes<PointerLockControlsImpl>>;

package/core/PointerLockControls.js

@@ -4,10 +4,12 @@ import * as React from 'react';
 import { PointerLockControls as PointerLockControls$1 } from 'three-stdlib';
 
 const PointerLockControls = /*#__PURE__*/React.forwardRef(({
+  domElement,
   selector,
   onChange,
   onLock,
   onUnlock,
+  enabled = true,
   ...props
 }, ref) => {
   const {
@@ -17,43 +19,55 @@ const PointerLockControls = /*#__PURE__*/React.forwardRef(({
   const gl = useThree(({
     gl
   }) => gl);
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
+  const raycaster = useThree(state => state.raycaster);
+  const events = useThree(state => state.events);
   const explCamera = camera || defaultCamera;
-  const [controls] = React.useState(() => new PointerLockControls$1(explCamera, gl.domElement));
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const [controls] = React.useState(() => new PointerLockControls$1(explCamera));
+  React.useEffect(() => {
+    if (enabled) {
+      controls.connect(explDomElement); // Force events to be centered while PLC is active
+
+      const oldComputeOffsets = raycaster.computeOffsets;
+
+      raycaster.computeOffsets = e => ({
+        offsetX: e.target.width / 2,
+        offsetY: e.target.height / 2
+      });
+
+      return () => {
+        controls.disconnect();
+        raycaster.computeOffsets = oldComputeOffsets;
+      };
+    }
+  }, [enabled, controls]);
   React.useEffect(() => {
     const callback = e => {
       invalidate();
       if (onChange) onChange(e);
     };
 
-    controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('change', callback);
-    if (onLock) controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('lock', onLock);
-    if (onUnlock) controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('unlock', onUnlock);
-    return () => {
-      controls == null ? void 0 : controls.removeEventListener == null ? void 0 : controls.removeEventListener('change', callback);
-      if (onLock) controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('lock', onLock);
-      if (onUnlock) controls == null ? void 0 : controls.addEventListener == null ? void 0 : controls.addEventListener('unlock', onUnlock);
-    };
-  }, [onChange, onLock, onUnlock, controls, invalidate]);
-  React.useEffect(() => {
-    const handler = () => controls == null ? void 0 : controls.lock();
+    controls.addEventListener('change', callback);
+    if (onLock) controls.addEventListener('lock', onLock);
+    if (onUnlock) controls.addEventListener('unlock', onUnlock); // Enforce previous interaction
+
+    const handler = () => controls.lock();
 
     const elements = selector ? Array.from(document.querySelectorAll(selector)) : [document];
     elements.forEach(element => element && element.addEventListener('click', handler));
     return () => {
+      controls.removeEventListener('change', callback);
+      if (onLock) controls.addEventListener('lock', onLock);
+      if (onUnlock) controls.addEventListener('unlock', onUnlock);
       elements.forEach(element => element ? element.removeEventListener('click', handler) : undefined);
     };
-  }, [controls, selector]);
-  return controls ? /*#__PURE__*/React.createElement("primitive", _extends({
+  }, [onChange, onLock, onUnlock, selector]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
     ref: ref,
-    dispose: undefined,
     object: controls
-  }, rest)) : null;
+  }, rest));
 });
 
 export { PointerLockControls };

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([]),[[x,E,w]]=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===x[3*d]&&g.y===x[3*d+1]&&g.z===x[3*d+2]||(g.toArray(x,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!==w[d]&&(w.set([m.size],d),o.current.geometry.attributes.size.needsUpdate=!0)}));const U=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])},U,n),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",count:x.length/3,array:x,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attach:"attributes-color",count:E.length/3,array:E,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attach:"attributes-size",count:w.length,array:w,itemSize:1,usage:c.DynamicDrawUsage})),l.createElement(b.Provider,{value:z},e))})),x=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({matrixAutoUpdate:!1,ref:f.default([i,d])},o),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",count:t.length/u,array:t,itemSize:u,usage:c.DynamicDrawUsage}),r&&l.createElement("bufferAttribute",{attach:"attributes-color",count:r.length/u,array:r,itemSize:3,usage:c.DynamicDrawUsage}),n&&l.createElement("bufferAttribute",{attach:"attributes-size",count:n.length/u,array:n,itemSize:1,usage:c.DynamicDrawUsage})),e)})),w=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=x,exports.Points=w,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,m;const b=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,E,w]]=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++)m=i[d].current,y.toArray(h,3*d),o.current.geometry.attributes.position.needsUpdate=!0,m.matrixWorldNeedsUpdate=!0,m.color.toArray(E,3*d),o.current.geometry.attributes.color.needsUpdate=!0,w.set([m.size],d),o.current.geometry.attributes.size.needsUpdate=!0}));const x=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=>(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])},x,n),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",count:h.length/3,array:h,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attach:"attributes-color",count:E.length/3,array:E,itemSize:3,usage:c.DynamicDrawUsage}),l.createElement("bufferAttribute",{attach:"attributes-size",count:w.length,array:w,itemSize:1,usage:c.DynamicDrawUsage})),l.createElement(b.Provider,{value:U},e))})),h=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",{attach:"attributes-position",count:t.length/u,array:t,itemSize:u,usage:c.DynamicDrawUsage}),r&&l.createElement("bufferAttribute",{attach:"attributes-color",count:r.length/u,array:r,itemSize:3,usage:c.DynamicDrawUsage}),n&&l.createElement("bufferAttribute",{attach:"attributes-size",count:n.length/u,array:n,itemSize:1,usage:c.DynamicDrawUsage})),e)})),w=l.forwardRef(((e,t)=>e.positions instanceof Float32Array?l.createElement(E,s.default({},e,{ref:t})):l.createElement(p,s.default({},e,{ref:t}))));exports.Point=h,exports.Points=w,exports.PointsBuffer=E;

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" | "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" | "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" | "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" | "stride" | "isPoints" | "positions" | "sizes"> & React.RefAttributes<THREE.Points<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>;
+export declare const Points: React.ForwardRefExoticComponent<Pick<PointsInstancesProps | PointsBuffersProps, "visible" | "attach" | "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", {
     attach: "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/PositionalAudio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PositionalAudio as PositionalAudioImpl } from 'three';
-export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").Node<PositionalAudioImpl, typeof PositionalAudioImpl>, import("@react-three/fiber").NonFunctionKeys<{
+export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<PositionalAudioImpl>, import("@react-three/fiber").NodeProps<PositionalAudioImpl, typeof PositionalAudioImpl>>>, import("@react-three/fiber").NonFunctionKeys<{
     position?: import("@react-three/fiber").Vector3 | undefined;
     up?: import("@react-three/fiber").Vector3 | undefined;
     scale?: import("@react-three/fiber").Vector3 | undefined;

package/core/Reflector.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterial:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:i=[0,0],args:s=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:p=1,depthScale:m=0,depthToBlurRatioBias:h=.25,mirror:f=0,children:x,debug:M=0,distortion:b=1,mixContrast:w=1,distortionMap:g,...T},y)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const R=a.useThree((({gl:e})=>e)),S=a.useThree((({camera:e})=>e)),j=a.useThree((({scene:e})=>e)),B=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[P]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Matrix4)),[W]=d.useState((()=>new r.Vector3(0,0,-1))),[O]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector3)),[C]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Matrix4)),[L]=d.useState((()=>new r.PerspectiveCamera)),k=d.useCallback((()=>{if(E.setFromMatrixPosition(v.current.matrixWorld),F.setFromMatrixPosition(S.matrixWorld),V.extractRotation(v.current.matrixWorld),P.set(0,0,1),P.applyMatrix4(V),q.subVectors(E,F),q.dot(P)>0)return;q.reflect(P).negate(),q.add(E),V.extractRotation(S.matrixWorld),W.set(0,0,-1),W.applyMatrix4(V),W.add(F),U.subVectors(E,W),U.reflect(P).negate(),U.add(E),L.position.copy(q),L.up.set(0,1,0),L.up.applyMatrix4(V),L.up.reflect(P),L.lookAt(U),L.far=S.far,L.updateMatrixWorld(),L.projectionMatrix.copy(S.projectionMatrix),_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(L.projectionMatrix),_.multiply(L.matrixWorldInverse),_.multiply(v.current.matrixWorld),D.setFromNormalAndCoplanarPoint(P,E),D.applyMatrix4(L.matrixWorldInverse),O.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const e=L.projectionMatrix;C.x=(Math.sign(O.x)+e.elements[8])/e.elements[0],C.y=(Math.sign(O.y)+e.elements[9])/e.elements[5],C.z=-1,C.w=(1+e.elements[10])/e.elements[14],O.multiplyScalar(2/O.dot(C)),e.elements[2]=O.x,e.elements[6]=O.y,e.elements[10]=O.z+1,e.elements[14]=O.w}),[]),[z,A,G,I]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:R.outputEncoding},s=new r.WebGLRenderTarget(n,n,a);s.depthBuffer=!0,s.depthTexture=new r.DepthTexture(n,n),s.depthTexture.format=r.DepthFormat,s.depthTexture.type=r.UnsignedShortType;const u=new r.WebGLRenderTarget(n,n,a);return[s,u,new o.BlurPass({gl:R,resolution:n,width:i[0],height:i[1],minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h}),{mirror:f,textureMatrix:_,mixBlur:e,tDiffuse:s.texture,tDepth:s.depthTexture,tDiffuseBlur:u.texture,hasBlur:B,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:g,mixContrast:w,"defines-USE_BLUR":B?"":void 0,"defines-USE_DEPTH":m>0?"":void 0,"defines-USE_DISTORTION":g?"":void 0}]}),[R,i,_,n,f,B,e,t,l,p,m,h,M,b,g,w]);return a.useFrame((()=>{if(null==v||!v.current)return;v.current.visible=!1;const e=R.xr.enabled,t=R.shadowMap.autoUpdate;k(),R.xr.enabled=!1,R.shadowMap.autoUpdate=!1,R.setRenderTarget(z),R.state.buffers.depth.setMask(!0),R.autoClear||R.clear(),R.render(j,L),B&&G.render(R,z,A),R.xr.enabled=e,R.shadowMap.autoUpdate=t,v.current.visible=!0,R.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([v,y])},T),d.createElement("planeBufferGeometry",{args:s}),x?x("meshReflectorMaterial",I):d.createElement("meshReflectorMaterial",I))}));exports.Reflector=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterial:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:i=[0,0],args:s=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:p=1,depthScale:m=0,depthToBlurRatioBias:h=.25,mirror:f=0,children:x,debug:M=0,distortion:b=1,mixContrast:w=1,distortionMap:g,...T},y)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const S=a.useThree((({gl:e})=>e)),R=a.useThree((({camera:e})=>e)),j=a.useThree((({scene:e})=>e)),v=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,B=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[P]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Matrix4)),[F]=d.useState((()=>new r.Vector3(0,0,-1))),[O]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector3)),[C]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Matrix4)),[L]=d.useState((()=>new r.PerspectiveCamera)),k=d.useCallback((()=>{if(E.setFromMatrixPosition(B.current.matrixWorld),V.setFromMatrixPosition(R.matrixWorld),W.extractRotation(B.current.matrixWorld),P.set(0,0,1),P.applyMatrix4(W),q.subVectors(E,V),q.dot(P)>0)return;q.reflect(P).negate(),q.add(E),W.extractRotation(R.matrixWorld),F.set(0,0,-1),F.applyMatrix4(W),F.add(V),U.subVectors(E,F),U.reflect(P).negate(),U.add(E),L.position.copy(q),L.up.set(0,1,0),L.up.applyMatrix4(W),L.up.reflect(P),L.lookAt(U),L.far=R.far,L.updateMatrixWorld(),L.projectionMatrix.copy(R.projectionMatrix),_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(L.projectionMatrix),_.multiply(L.matrixWorldInverse),_.multiply(B.current.matrixWorld),D.setFromNormalAndCoplanarPoint(P,E),D.applyMatrix4(L.matrixWorldInverse),O.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const e=L.projectionMatrix;C.x=(Math.sign(O.x)+e.elements[8])/e.elements[0],C.y=(Math.sign(O.y)+e.elements[9])/e.elements[5],C.z=-1,C.w=(1+e.elements[10])/e.elements[14],O.multiplyScalar(2/O.dot(C)),e.elements[2]=O.x,e.elements[6]=O.y,e.elements[10]=O.z+1,e.elements[14]=O.w}),[]),[z,A,I,G]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:S.outputEncoding},s=new r.WebGLRenderTarget(n,n,a);s.depthBuffer=!0,s.depthTexture=new r.DepthTexture(n,n),s.depthTexture.format=r.DepthFormat,s.depthTexture.type=r.UnsignedShortType;const u=new r.WebGLRenderTarget(n,n,a);return[s,u,new o.BlurPass({gl:S,resolution:n,width:i[0],height:i[1],minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h}),{mirror:f,textureMatrix:_,mixBlur:e,tDiffuse:s.texture,tDepth:s.depthTexture,tDiffuseBlur:u.texture,hasBlur:v,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:g,mixContrast:w,"defines-USE_BLUR":v?"":void 0,"defines-USE_DEPTH":m>0?"":void 0,"defines-USE_DISTORTION":g?"":void 0}]}),[S,i,_,n,f,v,e,t,l,p,m,h,M,b,g,w]);return a.useFrame((()=>{if(null==B||!B.current)return;B.current.visible=!1;const e=S.xr.enabled,t=S.shadowMap.autoUpdate;k(),S.xr.enabled=!1,S.shadowMap.autoUpdate=!1,S.setRenderTarget(z),S.state.buffers.depth.setMask(!0),S.autoClear||S.clear(),S.render(j,L),v&&I.render(S,z,A),S.xr.enabled=e,S.shadowMap.autoUpdate=t,B.current.visible=!0,S.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([B,y])},T),d.createElement("planeBufferGeometry",{args:s}),x?x("meshReflectorMaterial",G):d.createElement("meshReflectorMaterial",G))}));exports.Reflector=p;

package/core/Reflector.d.ts

@@ -26,4 +26,4 @@ declare global {
         }
     }
 }
-export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "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" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
+export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "visible" | "attach" | "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" | "blur" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "resolution" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "distortion" | "mixContrast" | "distortionMap" | "debug"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;

package/core/Reflector.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, RGBFormat, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 import { BlurPass } from '../materials/BlurPass.js';
@@ -108,7 +108,6 @@ const Reflector = /*#__PURE__*/React.forwardRef(({
     const parameters = {
       minFilter: LinearFilter,
       magFilter: LinearFilter,
-      format: RGBFormat,
       encoding: gl.outputEncoding
     };
     const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);

package/core/RoundedBox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three");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 u=n(e),c=a(t);const s=1e-5;const o=c.forwardRef((function({args:[e=1,t=1,n=1]=[],radius:a=.05,smoothness:o=4,children:f,...i},l){const b=c.useMemo((()=>function(e,t,n){const a=new r.Shape,u=n-s;return a.absarc(s,s,s,-Math.PI/2,-Math.PI,!0),a.absarc(s,t-2*u,s,Math.PI,Math.PI/2,!0),a.absarc(e-2*u,t-2*u,s,Math.PI/2,0,!0),a.absarc(e-2*u,s,s,0,-Math.PI/2,!0),a}(e,t,a)),[e,t,a]),d=c.useMemo((()=>({depth:n-2*a,bevelEnabled:!0,bevelSegments:2*o,steps:1,bevelSize:a-s,bevelThickness:a,curveSegments:o})),[n,a,o]),h=c.useRef();return c.useLayoutEffect((()=>{h.current&&h.current.center()}),[b,d]),c.createElement("mesh",u.default({ref:l},i),c.createElement("extrudeBufferGeometry",{attach:"geometry",ref:h,args:[b,d]}),f)}));exports.RoundedBox=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three");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 u=n(e),s=a(t);const c=1e-5;const o=s.forwardRef((function({args:[e=1,t=1,n=1]=[],radius:a=.05,steps:o=1,smoothness:f=4,children:i,...l},b){const d=s.useMemo((()=>function(e,t,n){const a=new r.Shape,u=n-c;return a.absarc(c,c,c,-Math.PI/2,-Math.PI,!0),a.absarc(c,t-2*u,c,Math.PI,Math.PI/2,!0),a.absarc(e-2*u,t-2*u,c,Math.PI/2,0,!0),a.absarc(e-2*u,c,c,0,-Math.PI/2,!0),a}(e,t,a)),[e,t,a]),h=s.useMemo((()=>({depth:n-2*a,bevelEnabled:!0,bevelSegments:2*f,steps:o,bevelSize:a-c,bevelThickness:a,curveSegments:f})),[n,a,f]),m=s.useRef();return s.useLayoutEffect((()=>{m.current&&m.current.center()}),[d,h]),s.createElement("mesh",u.default({ref:b},l),s.createElement("extrudeBufferGeometry",{attach:"geometry",ref:m,args:[d,h]}),i)}));exports.RoundedBox=o;

package/core/RoundedBox.d.ts

@@ -5,6 +5,7 @@ declare type Props = {
     args?: NamedArrayTuple<(width?: number, height?: number, depth?: number) => void>;
     radius?: number;
     smoothness?: number;
+    steps?: number;
 } & Omit<JSX.IntrinsicElements['mesh'], 'args'>;
-export declare const RoundedBox: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "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" | "isMesh" | "updateMorphTargets" | "radius" | "smoothness"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
+export declare const RoundedBox: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "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" | "isMesh" | "updateMorphTargets" | "radius" | "steps" | "smoothness"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
 export {};

package/core/RoundedBox.js

@@ -17,6 +17,7 @@ function createShape(width, height, radius0) {
 const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
   args: [width = 1, height = 1, depth = 1] = [],
   radius = 0.05,
+  steps = 1,
   smoothness = 4,
   children,
   ...rest
@@ -26,7 +27,7 @@ const RoundedBox = /*#__PURE__*/React.forwardRef(function RoundedBox({
     depth: depth - radius * 2,
     bevelEnabled: true,
     bevelSegments: smoothness * 2,
-    steps: 1,
+    steps,
     bevelSize: radius - eps,
     bevelThickness: radius,
     curveSegments: smoothness

package/core/Sampler.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three-stdlib"),n=require("three");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=u(e),l=c(r);exports.Sampler=({children:e,weight:r,transform:u,instances:c,mesh:o,...a})=>{const s=l.useRef(null),d=l.useRef(null),f=l.useRef(null);return l.useEffect((()=>{var e,r;d.current=null!==(e=null==c?void 0:c.current)&&void 0!==e?e:s.current.children.find((e=>e.hasOwnProperty("instanceMatrix"))),f.current=null!==(r=null==o?void 0:o.current)&&void 0!==r?r:s.current.children.find((e=>"Mesh"===e.type))}),[e,null==o?void 0:o.current,null==c?void 0:c.current]),l.useEffect((()=>{if(void 0===f.current)return;if(void 0===d.current)return;const e=new t.MeshSurfaceSampler(f.current);r&&e.setWeightAttribute(r),e.build();const c=new n.Vector3,i=new n.Vector3,l=new n.Color,o=new n.Object3D;f.current.updateMatrixWorld(!0);for(let r=0;r<d.current.count;r++)e.sample(c,i,l),"function"==typeof u?u({dummy:o,sampledMesh:f.current,position:c,normal:i,color:l},r):o.position.copy(c),o.updateMatrix(),d.current.setMatrixAt(r,o.matrix);d.current.instanceMatrix.needsUpdate=!0}),[e,null==o?void 0:o.current,null==c?void 0:c.current]),l.createElement("group",i.default({ref:s},a),e)};

package/core/Sampler.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Color, InstancedMesh, Mesh, Object3D, Vector3 } from 'three';
+import { GroupProps } from '@react-three/fiber';
+declare type SamplePayload = {
+    position: Vector3;
+    normal: Vector3;
+    color: Color;
+};
+export declare type TransformFn = (payload: TransformPayload, i: number) => void;
+declare type TransformPayload = SamplePayload & {
+    dummy: Object3D;
+    sampledMesh: Mesh;
+};
+declare type Props = {
+    mesh?: React.RefObject<Mesh>;
+    instances?: React.RefObject<InstancedMesh>;
+    weight?: string;
+    transform?: TransformFn;
+};
+export declare const Sampler: ({ children, weight, transform, instances, mesh, ...props }: React.PropsWithChildren<Props & GroupProps>) => JSX.Element;
+export {};