@react-three/drei 7.25.4 → 7.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/README.md +1661 -0
  2. package/core/ArcballControls.d.ts +1 -1
  3. package/core/Backdrop.js +3 -1
  4. package/core/BakeShadows.cjs.js +1 -1
  5. package/core/BakeShadows.js +3 -3
  6. package/core/Bounds.cjs.js +1 -1
  7. package/core/Bounds.js +2 -2
  8. package/core/DeviceOrientationControls.d.ts +1 -1
  9. package/core/Instances.cjs.js +1 -1
  10. package/core/Instances.js +1 -1
  11. package/core/Line.d.ts +1 -1
  12. package/core/MapControls.d.ts +1 -1
  13. package/core/MeshDistortMaterial.d.ts +1 -1
  14. package/core/MeshReflectorMaterial.cjs.js +1 -0
  15. package/core/MeshReflectorMaterial.d.ts +25 -0
  16. package/core/MeshReflectorMaterial.js +180 -0
  17. package/core/MeshWobbleMaterial.d.ts +1 -1
  18. package/core/OrbitControls.d.ts +1 -1
  19. package/core/PositionalAudio.d.ts +1 -1
  20. package/core/QuadraticBezierLine.js +5 -1
  21. package/core/Reflector.cjs.js +1 -1
  22. package/core/Reflector.d.ts +4 -5
  23. package/core/Reflector.js +34 -49
  24. package/core/SpotLight.d.ts +1 -1
  25. package/core/Text.d.ts +1 -1
  26. package/core/TrackballControls.d.ts +1 -1
  27. package/core/TransformControls.d.ts +1 -1
  28. package/core/index.cjs.js +1 -1
  29. package/core/index.d.ts +1 -0
  30. package/core/index.js +4 -1
  31. package/core/useDetectGPU.cjs.js +1 -1
  32. package/core/useDetectGPU.d.ts +1 -1
  33. package/core/useDetectGPU.js +1 -5
  34. package/index.cjs.js +1 -1
  35. package/index.js +2 -1
  36. package/materials/BlurPass.cjs.js +1 -0
  37. package/materials/BlurPass.d.ts +23 -0
  38. package/materials/BlurPass.js +75 -0
  39. package/materials/ConvolutionMaterial.cjs.js +1 -0
  40. package/materials/ConvolutionMaterial.d.ts +7 -0
  41. package/materials/ConvolutionMaterial.js +97 -0
  42. package/materials/MeshReflectorMaterial.cjs.js +1 -1
  43. package/materials/MeshReflectorMaterial.d.ts +10 -66
  44. package/materials/MeshReflectorMaterial.js +65 -313
  45. package/native/index.cjs.js +1 -1
  46. package/native/index.d.ts +0 -1
  47. package/native/index.js +4 -1
  48. package/package.json +3 -1
  49. package/web/PresentationControls.cjs.js +1 -0
  50. package/web/PresentationControls.d.ts +14 -0
  51. package/web/PresentationControls.js +73 -0
  52. package/web/ScrollControls.cjs.js +1 -1
  53. package/web/ScrollControls.js +1 -1
  54. package/web/index.cjs.js +1 -1
  55. package/web/index.d.ts +1 -1
  56. package/web/index.js +7 -1
  57. package/materials/index.cjs.js +0 -1
  58. package/materials/index.d.ts +0 -1
  59. package/materials/index.js +0 -2
@@ -12,4 +12,4 @@ export declare type ArcballControlsProps = ReactThreeFiber.Overwrite<ReactThreeF
12
12
  onStart?: (e?: THREE.Event) => void;
13
13
  onEnd?: (e?: THREE.Event) => void;
14
14
  }>;
15
- export declare const ArcballControls: React.ForwardRefExoticComponent<Pick<ArcballControlsProps, string | number | symbol> & React.RefAttributes<any>>;
15
+ export declare const ArcballControls: React.ForwardRefExoticComponent<Pick<ArcballControlsProps, string | number | symbol> & React.RefAttributes<ArcballControlsImpl>>;
package/core/Backdrop.js CHANGED
@@ -16,7 +16,9 @@ function Backdrop({
16
16
  const position = ref.current.attributes.position;
17
17
 
18
18
  for (let x = 0; x < segments + 1; x++) {
19
- for (let y = 0; y < segments + 1; y++) position.setXYZ(i++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
19
+ for (let y = 0; y < segments + 1; y++) {
20
+ position.setXYZ(i++, x / segments - offset + (x === 0 ? -floor : 0), y / segments - offset, easeInExpo(x / segments));
21
+ }
20
22
  }
21
23
 
22
24
  position.needsUpdate = true;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber");function r(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 a=r(e);exports.BakeShadows=function(){const e=t.useThree((e=>e.gl));return a.useEffect((()=>(e.shadowMap.autoUpdate=!1,e.shadowMap.needsUpdate=!0,()=>{e.shadowMap.autoUpdate=e.shadowMap.needsUpdate=!0})),[]),null};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("@react-three/fiber");exports.BakeShadows=function(){const t=a.useThree((e=>e.gl));return e.useEffect((()=>(t.shadowMap.autoUpdate=!1,t.shadowMap.needsUpdate=!0,()=>{t.shadowMap.autoUpdate=t.shadowMap.needsUpdate=!0})),[t.shadowMap]),null};
@@ -1,15 +1,15 @@
1
- import * as React from 'react';
1
+ import { useEffect } from 'react';
2
2
  import { useThree } from '@react-three/fiber';
3
3
 
4
4
  function BakeShadows() {
5
5
  const gl = useThree(state => state.gl);
6
- React.useEffect(() => {
6
+ useEffect(() => {
7
7
  gl.shadowMap.autoUpdate = false;
8
8
  gl.shadowMap.needsUpdate = true;
9
9
  return () => {
10
10
  gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
11
11
  };
12
- }, []);
12
+ }, [gl.shadowMap]);
13
13
  return null;
14
14
  }
15
15
 
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const x=a.useRef(null),p=r.useThree((e=>e.camera)),l=r.useThree((e=>e.controls)),z=r.useThree((e=>e.invalidate)),h=a.useRef(f);function y(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}h.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=g.getSize(new n.Vector3),t=g.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(p)?4*r:r/(2*Math.atan(Math.PI*p.fov/360)),a=c(p)?4*r:o/p.aspect,i=m*Math.max(o,a);return{box:g,size:e,center:t,distance:i}}return{getSize:e,refresh(e){var t;if((t=e)&&t.isObject3D?g.setFromObject(e):(e=>e&&e.isBox3)(e)?g.copy(e):g.setFromObject(x.current),g.isEmpty()){const e=p.position.length()||10;g.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}return this},clip(){const{distance:t}=e();return l&&(l.maxDistance=10*t),p.near=t/100,p.far=100*t,p.updateProjectionMatrix(),l&&l.update(),this},fit(){M.camera.copy(p.position),l&&M.focus.copy(l.target);const{center:r,distance:o}=e(),a=r.clone().sub(p.position).normalize().multiplyScalar(o);if(b.camera.copy(r).sub(a),b.focus.copy(r),c(p)){M.zoom=p.zoom;let e=0,o=0;const a=[new n.Vector3(g.min.x,g.min.y,g.min.z),new n.Vector3(g.min.x,g.max.y,g.min.z),new n.Vector3(g.min.x,g.min.y,g.max.z),new n.Vector3(g.min.x,g.max.y,g.max.z),new n.Vector3(g.max.x,g.max.y,g.max.z),new n.Vector3(g.max.x,g.max.y,g.min.z),new n.Vector3(g.max.x,g.min.y,g.max.z),new n.Vector3(g.max.x,g.min.y,g.min.z)];r.applyMatrix4(p.matrixWorldInverse);for(const t of a)t.applyMatrix4(p.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(p.top-p.bottom)/e,i=(p.right-p.left)/o;b.zoom=Math.min(c,i)/m,t||(p.zoom=b.zoom,p.updateProjectionMatrix())}return t?M.animating=!0:(p.position.copy(b.camera),p.lookAt(b.focus),l&&(l.target.copy(b.focus),l.update()),z()),h.current&&h.current(this.getSize()),this}}}),[g,p,l,m,t,z]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),l){const e=e=>M.animating=!1;return l.addEventListener("start",e),()=>l.removeEventListener("start",e)}}),[s,o,l]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,b.focus,t,r),d(M.camera,b.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,b.zoom,t,r),p.position.copy(M.camera),c(p)&&(p.zoom=M.zoom,p.updateProjectionMatrix()),l?(l.target.copy(M.focus),l.update()):p.lookAt(M.focus),z(),c(p)&&!(Math.abs(M.zoom-b.zoom)<u))return;if(!c(p)&&!y(M.camera,b.camera))return;if(l&&!y(M.focus,b.focus))return;M.animating=!1}})),a.createElement("group",{ref:x},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const x=a.useRef(null),p=r.useThree((e=>e.camera)),l=r.useThree((e=>e.controls)),z=r.useThree((e=>e.invalidate)),h=a.useRef(f);function y(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}h.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=g.getSize(new n.Vector3),t=g.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(p)?4*r:r/(2*Math.atan(Math.PI*p.fov/360)),a=c(p)?4*r:o/p.aspect,i=m*Math.max(o,a);return{box:g,size:e,center:t,distance:i}}return{getSize:e,refresh(e){var t;if((t=e)&&t.isObject3D?g.setFromObject(e):(e=>e&&e.isBox3)(e)?g.copy(e):x.current&&g.setFromObject(x.current),g.isEmpty()){const e=p.position.length()||10;g.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}return this},clip(){const{distance:t}=e();return l&&(l.maxDistance=10*t),p.near=t/100,p.far=100*t,p.updateProjectionMatrix(),l&&l.update(),this},fit(){M.camera.copy(p.position),l&&M.focus.copy(l.target);const{center:r,distance:o}=e(),a=r.clone().sub(p.position).normalize().multiplyScalar(o);if(b.camera.copy(r).sub(a),b.focus.copy(r),c(p)){M.zoom=p.zoom;let e=0,o=0;const a=[new n.Vector3(g.min.x,g.min.y,g.min.z),new n.Vector3(g.min.x,g.max.y,g.min.z),new n.Vector3(g.min.x,g.min.y,g.max.z),new n.Vector3(g.min.x,g.max.y,g.max.z),new n.Vector3(g.max.x,g.max.y,g.max.z),new n.Vector3(g.max.x,g.max.y,g.min.z),new n.Vector3(g.max.x,g.min.y,g.max.z),new n.Vector3(g.max.x,g.min.y,g.min.z)];r.applyMatrix4(p.matrixWorldInverse);for(const t of a)t.applyMatrix4(p.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(p.top-p.bottom)/e,i=(p.right-p.left)/o;b.zoom=Math.min(c,i)/m,t||(p.zoom=b.zoom,p.updateProjectionMatrix())}return t?M.animating=!0:(p.position.copy(b.camera),p.lookAt(b.focus),l&&(l.target.copy(b.focus),l.update()),z()),h.current&&h.current(this.getSize()),this}}}),[g,p,l,m,t,z]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),l){const e=()=>M.animating=!1;return l.addEventListener("start",e),()=>l.removeEventListener("start",e)}}),[s,o,l]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,b.focus,t,r),d(M.camera,b.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,b.zoom,t,r),p.position.copy(M.camera),c(p)&&(p.zoom=M.zoom,p.updateProjectionMatrix()),l?(l.target.copy(M.focus),l.update()):p.lookAt(M.focus),z(),c(p)&&!(Math.abs(M.zoom-b.zoom)<u))return;if(!c(p)&&!y(M.camera,b.camera))return;if(l&&!y(M.focus,b.focus))return;M.animating=!1}})),a.createElement("group",{ref:x},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};
package/core/Bounds.js CHANGED
@@ -68,7 +68,7 @@ function Bounds({
68
68
  getSize,
69
69
 
70
70
  refresh(object) {
71
- if (isObject3D(object)) box.setFromObject(object);else if (isBox3(object)) box.copy(object);else box.setFromObject(ref.current);
71
+ if (isObject3D(object)) box.setFromObject(object);else if (isBox3(object)) box.copy(object);else if (ref.current) box.setFromObject(ref.current);
72
72
 
73
73
  if (box.isEmpty()) {
74
74
  const max = camera.position.length() || 10;
@@ -154,7 +154,7 @@ function Bounds({
154
154
 
155
155
  if (controls) {
156
156
  // Try to prevent drag hijacking
157
- const callback = event => current.animating = false;
157
+ const callback = () => current.animating = false;
158
158
 
159
159
  controls.addEventListener('start', callback);
160
160
  return () => controls.removeEventListener('start', callback);
@@ -6,4 +6,4 @@ export declare type DeviceOrientationControlsProps = ReactThreeFiber.Object3DNod
6
6
  camera?: THREE.Camera;
7
7
  onChange?: (e?: THREE.Event) => void;
8
8
  };
9
- export declare const DeviceOrientationControls: React.ForwardRefExoticComponent<Pick<DeviceOrientationControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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" | "update" | "deviceOrientation" | "screenOrientation" | "alphaOffset"> & React.RefAttributes<DeviceOrientationControlsImp>>;
9
+ export declare const DeviceOrientationControls: React.ForwardRefExoticComponent<Pick<DeviceOrientationControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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" | "update" | "connect" | "disconnect" | "deviceOrientation" | "screenOrientation" | "alphaOffset"> & React.RefAttributes<DeviceOrientationControlsImp>>;
@@ -1 +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 s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=o(e),l=s(t),f=s(r),d=o(a),m=o(c);let y,p;const x=f.createContext(null),b=new l.Matrix4,h=new l.Matrix4,g=new l.Matrix4,M=new l.Color,v=new l.Vector3,w=new l.Quaternion,j=new l.Vector3,A=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",i.default({ref:d.default([a,c])},r),t)})),E=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:s}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(A,i.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[E,O]=f.useState([]),[[q,P]]=f.useState((()=>{const e=new Float32Array(16*r);for(y=0;y<r;y++)g.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,E.length)}),[E,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let _=0;n.useFrame((e=>{if(a===1/0||_<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),b.copy(m.current.matrixWorld).invert(),y=0;y<E.length;y++)p=E[y].current,p.matrixWorld.decompose(v,w,j),h.compose(v,w,j).premultiply(b),h.equals(g.fromArray(q,16*y))||(h.toArray(q,16*y),m.current.instanceMatrix.needsUpdate=!0),p.color.equals(M.fromArray(P,3*y))||(p.color.toArray(P,3*y),m.current.instanceColor.needsUpdate=!0);_++}}));const C=f.useMemo((()=>{const e={};for(y=0;y<E.length;y++){var t;Object.assign(e,null==(t=E[y].current)?void 0:t.__r3f.handlers)}return Object.keys(e).reduce(((e,t)=>({...e,[t]:e=>{var r,n,a;const c=null==(r=E[e.instanceId])?void 0:r.current;return null==c||null==(n=c.__r3f)||null==(a=n.handlers)?void 0:a[t]({...e,object:c})}})),{})}),[e,E]),R=f.useMemo((()=>({subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",i.default({matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0]},C,c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:q.length/16,array:q,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:R},e(s)):f.createElement(x.Provider,{value:R},e))}));exports.Instance=A,exports.Instances=E,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(E,i.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]})),{}))))};
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 s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=o(e),l=s(t),f=s(r),d=o(a),m=o(c);let y,p;const x=f.createContext(null),b=new l.Matrix4,h=new l.Matrix4,g=new l.Matrix4,M=new l.Color,v=new l.Vector3,w=new l.Quaternion,j=new l.Vector3,A=f.forwardRef((({context:e,children:t,...r},a)=>{f.useMemo((()=>n.extend({Position:u.Position})),[]);const c=f.useRef(),{subscribe:o}=f.useContext(e||x);return f.useLayoutEffect((()=>o(c)),[]),f.createElement("position",i.default({ref:d.default([a,c])},r),t)})),E=f.forwardRef((({children:e,range:t,limit:r=1e3,frames:a=1/0,...c},u)=>{const[{context:o,instance:s}]=f.useState((()=>{const e=f.createContext(null);return{context:e,instance:f.forwardRef(((t,r)=>f.createElement(A,i.default({context:e},t,{ref:r}))))}})),m=f.useRef(null),[E,O]=f.useState([]),[[q,P]]=f.useState((()=>{const e=new Float32Array(16*r);for(y=0;y<r;y++)g.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,E.length)}),[E,t]),f.useEffect((()=>{m.current.instanceMatrix.needsUpdate=!0}));let _=0;n.useFrame((()=>{if(a===1/0||_<a){for(m.current.updateMatrix(),m.current.updateMatrixWorld(),b.copy(m.current.matrixWorld).invert(),y=0;y<E.length;y++)p=E[y].current,p.matrixWorld.decompose(v,w,j),h.compose(v,w,j).premultiply(b),h.equals(g.fromArray(q,16*y))||(h.toArray(q,16*y),m.current.instanceMatrix.needsUpdate=!0),p.color.equals(M.fromArray(P,3*y))||(p.color.toArray(P,3*y),m.current.instanceColor.needsUpdate=!0);_++}}));const C=f.useMemo((()=>{const e={};for(y=0;y<E.length;y++){var t;Object.assign(e,null==(t=E[y].current)?void 0:t.__r3f.handlers)}return Object.keys(e).reduce(((e,t)=>({...e,[t]:e=>{var r,n,a;const c=null==(r=E[e.instanceId])?void 0:r.current;return null==c||null==(n=c.__r3f)||null==(a=n.handlers)?void 0:a[t]({...e,object:c})}})),{})}),[e,E]),R=f.useMemo((()=>({subscribe:e=>(O((t=>[...t,e])),()=>O((t=>t.filter((t=>t.current!==e.current)))))})),[]);return f.createElement("instancedMesh",i.default({matrixAutoUpdate:!1,ref:d.default([u,m]),args:[null,null,0]},C,c),f.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:q.length/16,array:q,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:R},e(s)):f.createElement(x.Provider,{value:R},e))}));exports.Instance=A,exports.Instances=E,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(E,i.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 CHANGED
@@ -70,7 +70,7 @@ const Instances = /*#__PURE__*/React.forwardRef(({
70
70
  parentRef.current.instanceMatrix.needsUpdate = true;
71
71
  });
72
72
  let count = 0;
73
- useFrame(state => {
73
+ useFrame(() => {
74
74
  if (frames === Infinity || count < frames) {
75
75
  parentRef.current.updateMatrix();
76
76
  parentRef.current.updateMatrixWorld();
package/core/Line.d.ts CHANGED
@@ -6,4 +6,4 @@ export declare type LineProps = {
6
6
  points: Array<Vector3 | [number, number, number]>;
7
7
  vertexColors?: Array<Color | [number, number, number]>;
8
8
  } & LineMaterialParameters & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'resolution' | 'args'>;
9
- export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "attach" | "attachArray" | "attachObject" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "dashed" | "points" | "material" | "isLine2" | "computeLineDistances" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "lineWidth" | "dashScale" | "dashOffset" | "dashSize" | "resolution" | "derivatives" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "isShaderMaterial" | "setValues" | "isMaterial" | "needsUpdate" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "gapSize" | keyof import("three").ShaderMaterialParameters> & React.RefAttributes<Line2>>;
9
+ export declare const Line: React.ForwardRefExoticComponent<Pick<LineProps, "attach" | "attachArray" | "attachObject" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "dashed" | "points" | "material" | "isMaterial" | "needsUpdate" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "isLine2" | "computeLineDistances" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "lineWidth" | "dashScale" | "dashOffset" | "dashSize" | "resolution" | "derivatives" | "defaultAttributeValues" | "index0AttributeName" | "uniformsNeedUpdate" | "isShaderMaterial" | "gapSize" | keyof import("three").ShaderMaterialParameters> & React.RefAttributes<Line2>>;
@@ -9,4 +9,4 @@ export declare type MapControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber
9
9
  onStart?: (e?: THREE.Event) => void;
10
10
  onEnd?: (e?: THREE.Event) => void;
11
11
  }>;
12
- export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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" | "reset" | "enabled" | "connect" | "target" | "update" | "domElement" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "keys" | "mouseButtons" | "touches" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onStart" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;
12
+ export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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" | "reset" | "enabled" | "update" | "onStart" | "keys" | "target" | "touches" | "connect" | "domElement" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;
@@ -21,5 +21,5 @@ export declare const MeshDistortMaterial: React.ForwardRefExoticComponent<Pick<O
21
21
  } & {
22
22
  speed?: number | undefined;
23
23
  factor?: number | undefined;
24
- }, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "time" | "transparent" | "fog" | "opacity" | "alphaToCoverage" | "defines" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "setValues" | "alphaTest" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "precision" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "reflectivity" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "clearcoat" | "clearcoatMap" | "clearcoatRoughness" | "clearcoatRoughnessMap" | "clearcoatNormalScale" | "clearcoatNormalMap" | "ior" | "sheen" | "transmission" | "transmissionMap" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "speed" | "distort" | "radius" | "factor"> & React.RefAttributes<unknown>>;
24
+ }, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "time" | "transparent" | "fog" | "opacity" | "speed" | "precision" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "reflectivity" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "clearcoat" | "clearcoatMap" | "clearcoatRoughness" | "clearcoatRoughnessMap" | "clearcoatNormalScale" | "clearcoatNormalMap" | "ior" | "sheen" | "transmission" | "transmissionMap" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "radius" | "distort" | "factor"> & React.RefAttributes<unknown>>;
25
25
  export {};
@@ -0,0 +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({MeshReflectorMaterialImpl:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:i=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h,debug:f=0,distortion:x=1,distortionMap:M,...b},T)=>{const w=a.useThree((({gl:e})=>e)),g=a.useThree((({camera:e})=>e)),y=a.useThree((({scene:e})=>e)),S=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,R=d.useRef(null),[v]=d.useState((()=>new r.Plane)),[j]=d.useState((()=>new r.Vector3)),[B]=d.useState((()=>new r.Vector3)),[D]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[_]=d.useState((()=>new r.Vector3(0,0,-1))),[F]=d.useState((()=>new r.Vector4)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.PerspectiveCamera)),E=d.useCallback((()=>{var e;const t=R.current.parent||(null==(e=R.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),D.setFromMatrixPosition(g.matrixWorld),P.extractRotation(t.matrixWorld),j.set(0,0,1),j.applyMatrix4(P),V.subVectors(B,D),V.dot(j)>0)return;V.reflect(j).negate(),V.add(B),P.extractRotation(g.matrixWorld),_.set(0,0,-1),_.applyMatrix4(P),_.add(D),W.subVectors(B,_),W.reflect(j).negate(),W.add(B),U.position.copy(V),U.up.set(0,1,0),U.up.applyMatrix4(P),U.up.reflect(j),U.lookAt(W),U.far=g.far,U.updateMatrixWorld(),U.projectionMatrix.copy(g.projectionMatrix),q.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),q.multiply(U.projectionMatrix),q.multiply(U.matrixWorldInverse),q.multiply(t.matrixWorld),v.setFromNormalAndCoplanarPoint(j,B),v.applyMatrix4(U.matrixWorldInverse),F.set(v.normal.x,v.normal.y,v.normal.z,v.constant);const r=U.projectionMatrix;O.x=(Math.sign(F.x)+r.elements[8])/r.elements[0],O.y=(Math.sign(F.y)+r.elements[9])/r.elements[5],O.z=-1,O.w=(1+r.elements[10])/r.elements[14],F.multiplyScalar(2/F.dot(O)),r.elements[2]=F.x,r.elements[6]=F.y,r.elements[10]=F.z+1,r.elements[14]=F.w}),[]),[I,C,L,k]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:w.outputEncoding},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new o.BlurPass({gl:w,resolution:n,width:i[0],height:i[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:q,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:S,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:M,"defines-USE_BLUR":S?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,i,q,n,h,S,e,t,s,l,p,m,f,x,M]);return a.useFrame((()=>{var e;const t=R.current.parent||(null==(e=R.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;E(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(I),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(y,U),S&&L.render(w,I,C),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",ref:c.default([R,T])},k,b))}));exports.MeshReflectorMaterial=p;
@@ -0,0 +1,25 @@
1
+ import * as React from 'react';
2
+ import { Texture } from 'three';
3
+ import { MeshReflectorMaterialProps, MeshReflectorMaterial as MeshReflectorMaterialImpl } from '../materials/MeshReflectorMaterial';
4
+ export declare type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
5
+ resolution?: number;
6
+ mixBlur?: number;
7
+ mixStrength?: number;
8
+ blur?: [number, number] | number;
9
+ mirror: number;
10
+ minDepthThreshold?: number;
11
+ maxDepthThreshold?: number;
12
+ depthScale?: number;
13
+ depthToBlurRatioBias?: number;
14
+ debug?: number;
15
+ distortionMap?: Texture;
16
+ distortion?: number;
17
+ };
18
+ declare global {
19
+ namespace JSX {
20
+ interface IntrinsicElements {
21
+ meshReflectorMaterialImpl: MeshReflectorMaterialProps;
22
+ }
23
+ }
24
+ }
25
+ export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "transparent" | "fog" | "blur" | "opacity" | "precision" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "resolution" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "distortionMap"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
@@ -0,0 +1,180 @@
1
+ import _extends from '@babel/runtime/helpers/esm/extends';
2
+ import * as React from 'react';
3
+ import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, RGBFormat, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
4
+ import { extend, useThree, useFrame } from '@react-three/fiber';
5
+ import mergeRefs from 'react-merge-refs';
6
+ import { BlurPass } from '../materials/BlurPass.js';
7
+ import { MeshReflectorMaterial as MeshReflectorMaterial$1 } from '../materials/MeshReflectorMaterial.js';
8
+
9
+ extend({
10
+ MeshReflectorMaterialImpl: MeshReflectorMaterial$1
11
+ });
12
+ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
13
+ mixBlur = 0.0,
14
+ mixStrength = 0.5,
15
+ resolution = 256,
16
+ blur = [0, 0],
17
+ minDepthThreshold = 0.9,
18
+ maxDepthThreshold = 1,
19
+ depthScale = 0,
20
+ depthToBlurRatioBias = 0.25,
21
+ mirror,
22
+ debug = 0,
23
+ distortion = 1,
24
+ distortionMap,
25
+ ...props
26
+ }, ref) => {
27
+ const gl = useThree(({
28
+ gl
29
+ }) => gl);
30
+ const camera = useThree(({
31
+ camera
32
+ }) => camera);
33
+ const scene = useThree(({
34
+ scene
35
+ }) => scene);
36
+ blur = Array.isArray(blur) ? blur : [blur, blur];
37
+ const hasBlur = blur[0] + blur[1] > 0;
38
+ const materialRef = React.useRef(null);
39
+ const [reflectorPlane] = React.useState(() => new Plane());
40
+ const [normal] = React.useState(() => new Vector3());
41
+ const [reflectorWorldPosition] = React.useState(() => new Vector3());
42
+ const [cameraWorldPosition] = React.useState(() => new Vector3());
43
+ const [rotationMatrix] = React.useState(() => new Matrix4());
44
+ const [lookAtPosition] = React.useState(() => new Vector3(0, 0, -1));
45
+ const [clipPlane] = React.useState(() => new Vector4());
46
+ const [view] = React.useState(() => new Vector3());
47
+ const [target] = React.useState(() => new Vector3());
48
+ const [q] = React.useState(() => new Vector4());
49
+ const [textureMatrix] = React.useState(() => new Matrix4());
50
+ const [virtualCamera] = React.useState(() => new PerspectiveCamera());
51
+ const beforeRender = React.useCallback(() => {
52
+ var _materialRef$current;
53
+
54
+ // TODO: As of R3f 7-8 this should be __r3f.parent
55
+ const parent = materialRef.current.parent || ((_materialRef$current = materialRef.current) == null ? void 0 : _materialRef$current.__r3f.parent);
56
+ if (!parent) return;
57
+ reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
58
+ cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
59
+ rotationMatrix.extractRotation(parent.matrixWorld);
60
+ normal.set(0, 0, 1);
61
+ normal.applyMatrix4(rotationMatrix);
62
+ view.subVectors(reflectorWorldPosition, cameraWorldPosition); // Avoid rendering when reflector is facing away
63
+
64
+ if (view.dot(normal) > 0) return;
65
+ view.reflect(normal).negate();
66
+ view.add(reflectorWorldPosition);
67
+ rotationMatrix.extractRotation(camera.matrixWorld);
68
+ lookAtPosition.set(0, 0, -1);
69
+ lookAtPosition.applyMatrix4(rotationMatrix);
70
+ lookAtPosition.add(cameraWorldPosition);
71
+ target.subVectors(reflectorWorldPosition, lookAtPosition);
72
+ target.reflect(normal).negate();
73
+ target.add(reflectorWorldPosition);
74
+ virtualCamera.position.copy(view);
75
+ virtualCamera.up.set(0, 1, 0);
76
+ virtualCamera.up.applyMatrix4(rotationMatrix);
77
+ virtualCamera.up.reflect(normal);
78
+ virtualCamera.lookAt(target);
79
+ virtualCamera.far = camera.far; // Used in WebGLBackground
80
+
81
+ virtualCamera.updateMatrixWorld();
82
+ virtualCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
83
+
84
+ textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
85
+ textureMatrix.multiply(virtualCamera.projectionMatrix);
86
+ textureMatrix.multiply(virtualCamera.matrixWorldInverse);
87
+ textureMatrix.multiply(parent.matrixWorld); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
88
+ // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
89
+
90
+ reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
91
+ reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
92
+ clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
93
+ const projectionMatrix = virtualCamera.projectionMatrix;
94
+ q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
95
+ q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
96
+ q.z = -1.0;
97
+ q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
98
+
99
+ clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
100
+
101
+ projectionMatrix.elements[2] = clipPlane.x;
102
+ projectionMatrix.elements[6] = clipPlane.y;
103
+ projectionMatrix.elements[10] = clipPlane.z + 1.0;
104
+ projectionMatrix.elements[14] = clipPlane.w; // eslint-disable-next-line react-hooks/exhaustive-deps
105
+ }, []);
106
+ const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
107
+ const parameters = {
108
+ minFilter: LinearFilter,
109
+ magFilter: LinearFilter,
110
+ format: RGBFormat,
111
+ encoding: gl.outputEncoding
112
+ };
113
+ const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
114
+ fbo1.depthBuffer = true;
115
+ fbo1.depthTexture = new DepthTexture(resolution, resolution);
116
+ fbo1.depthTexture.format = DepthFormat;
117
+ fbo1.depthTexture.type = UnsignedShortType;
118
+ const fbo2 = new WebGLRenderTarget(resolution, resolution, parameters);
119
+ const blurpass = new BlurPass({
120
+ gl,
121
+ resolution,
122
+ width: blur[0],
123
+ height: blur[1],
124
+ minDepthThreshold,
125
+ maxDepthThreshold,
126
+ depthScale,
127
+ depthToBlurRatioBias
128
+ });
129
+ const reflectorProps = {
130
+ mirror,
131
+ textureMatrix,
132
+ mixBlur,
133
+ tDiffuse: fbo1.texture,
134
+ tDepth: fbo1.depthTexture,
135
+ tDiffuseBlur: fbo2.texture,
136
+ hasBlur,
137
+ mixStrength,
138
+ minDepthThreshold,
139
+ maxDepthThreshold,
140
+ depthScale,
141
+ depthToBlurRatioBias,
142
+ transparent: true,
143
+ debug,
144
+ distortion,
145
+ distortionMap,
146
+ 'defines-USE_BLUR': hasBlur ? '' : undefined,
147
+ 'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
148
+ 'defines-USE_DISTORTION': distortionMap ? '' : undefined
149
+ };
150
+ return [fbo1, fbo2, blurpass, reflectorProps];
151
+ }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap]);
152
+ useFrame(() => {
153
+ var _materialRef$current2;
154
+
155
+ // TODO: As of R3f 7-8 this should be __r3f.parent
156
+ const parent = materialRef.current.parent || ((_materialRef$current2 = materialRef.current) == null ? void 0 : _materialRef$current2.__r3f.parent);
157
+ if (!parent) return;
158
+ parent.visible = false;
159
+ const currentXrEnabled = gl.xr.enabled;
160
+ const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
161
+ beforeRender();
162
+ gl.xr.enabled = false;
163
+ gl.shadowMap.autoUpdate = false;
164
+ gl.setRenderTarget(fbo1);
165
+ gl.state.buffers.depth.setMask(true);
166
+ if (!gl.autoClear) gl.clear();
167
+ gl.render(scene, virtualCamera);
168
+ if (hasBlur) blurpass.render(gl, fbo1, fbo2);
169
+ gl.xr.enabled = currentXrEnabled;
170
+ gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
171
+ parent.visible = true;
172
+ gl.setRenderTarget(null);
173
+ });
174
+ return /*#__PURE__*/React.createElement("meshReflectorMaterialImpl", _extends({
175
+ attach: "material",
176
+ ref: mergeRefs([materialRef, ref])
177
+ }, reflectorProps, props));
178
+ });
179
+
180
+ export { MeshReflectorMaterial };
@@ -21,5 +21,5 @@ export declare const MeshWobbleMaterial: React.ForwardRefExoticComponent<Pick<Om
21
21
  } & {
22
22
  speed?: number | undefined;
23
23
  factor?: number | undefined;
24
- }, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "time" | "transparent" | "fog" | "opacity" | "alphaToCoverage" | "defines" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "setValues" | "alphaTest" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "precision" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "speed" | "factor"> & React.RefAttributes<unknown>>;
24
+ }, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "map" | "time" | "transparent" | "fog" | "opacity" | "speed" | "precision" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blending" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "wireframe" | "wireframeLinewidth" | "skinning" | "morphTargets" | "morphNormals" | "emissive" | "emissiveIntensity" | "emissiveMap" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "alphaMap" | "envMap" | "refractionRatio" | "wireframeLinecap" | "wireframeLinejoin" | "roughness" | "metalness" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMapIntensity" | "vertexTangents" | "flatShading" | "isMeshStandardMaterial" | "factor"> & React.RefAttributes<unknown>>;
25
25
  export {};
@@ -13,4 +13,4 @@ export declare type OrbitControlsProps = ReactThreeFiber.Overwrite<ReactThreeFib
13
13
  onStart?: (e?: THREE.Event) => void;
14
14
  onEnd?: (e?: THREE.Event) => void;
15
15
  }>;
16
- export declare const OrbitControls: React.ForwardRefExoticComponent<Pick<OrbitControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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" | "reset" | "enabled" | "connect" | "target" | "makeDefault" | "update" | "domElement" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "keys" | "mouseButtons" | "touches" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onStart" | "onEnd" | "regress"> & React.RefAttributes<OrbitControlsImpl>>;
16
+ export declare const OrbitControls: React.ForwardRefExoticComponent<Pick<OrbitControlsProps, "object" | "attach" | "attachArray" | "attachObject" | "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" | "reset" | "enabled" | "update" | "onStart" | "keys" | "target" | "touches" | "connect" | "makeDefault" | "domElement" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd" | "regress"> & React.RefAttributes<OrbitControlsImpl>>;
@@ -22,4 +22,4 @@ export declare const PositionalAudio: React.ForwardRefExoticComponent<Pick<Omit<
22
22
  url: string;
23
23
  distance?: number | undefined;
24
24
  loop?: boolean | undefined;
25
- }, "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onEnded" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "source" | "stop" | "url" | "load" | "pause" | "play" | "distance" | "offset" | "panner" | "getOutput" | "setRefDistance" | "getRefDistance" | "setRolloffFactor" | "getRolloffFactor" | "setDistanceModel" | "getDistanceModel" | "setMaxDistance" | "getMaxDistance" | "setDirectionalCone" | "listener" | "context" | "gain" | "autoplay" | "buffer" | "detune" | "loop" | "loopStart" | "loopEnd" | "duration" | "playbackRate" | "isPlaying" | "hasPlaybackControl" | "sourceType" | "filters" | "setNodeSource" | "setMediaElementSource" | "setMediaStreamSource" | "setBuffer" | "connect" | "disconnect" | "setDetune" | "getDetune" | "getFilters" | "setFilters" | "getFilter" | "setFilter" | "setPlaybackRate" | "getPlaybackRate" | "getLoop" | "setLoop" | "setLoopStart" | "setLoopEnd" | "getVolume" | "setVolume"> & React.RefAttributes<unknown>>;
25
+ }, "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" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "onEnded" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "source" | "stop" | "url" | "load" | "pause" | "play" | "distance" | "offset" | "loop" | "duration" | "panner" | "getOutput" | "setRefDistance" | "getRefDistance" | "setRolloffFactor" | "getRolloffFactor" | "setDistanceModel" | "getDistanceModel" | "setMaxDistance" | "getMaxDistance" | "setDirectionalCone" | "listener" | "context" | "gain" | "autoplay" | "buffer" | "detune" | "loopStart" | "loopEnd" | "playbackRate" | "isPlaying" | "hasPlaybackControl" | "sourceType" | "filters" | "setNodeSource" | "setMediaElementSource" | "setMediaStreamSource" | "setBuffer" | "connect" | "disconnect" | "setDetune" | "getDetune" | "getFilters" | "setFilters" | "getFilter" | "setFilter" | "setPlaybackRate" | "getPlaybackRate" | "getLoop" | "setLoop" | "setLoopStart" | "setLoopEnd" | "getVolume" | "setVolume"> & React.RefAttributes<unknown>>;
@@ -17,9 +17,13 @@ const QuadraticBezierLine = /*#__PURE__*/React.forwardRef(function QuadraticBezi
17
17
  const getPoints = React.useCallback((start, end, mid, segments = 20) => {
18
18
  if (start instanceof Vector3) curve.v0.copy(start);else curve.v0.set(...start);
19
19
  if (end instanceof Vector3) curve.v2.copy(end);else curve.v2.set(...end);
20
- if (mid instanceof Vector3) curve.v1.copy(mid);else {
20
+
21
+ if (mid instanceof Vector3) {
22
+ curve.v1.copy(mid);
23
+ } else {
21
24
  curve.v1.copy(curve.v0.clone().add(curve.v2.clone().sub(curve.v0)).add(v.set(0, curve.v0.y - curve.v2.y, 0)));
22
25
  }
26
+
23
27
  return curve.getPoints(segments);
24
28
  }, []);
25
29
  React.useLayoutEffect(() => {
@@ -1 +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/MeshReflectorMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var 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 l=i(e),u=s(t),d=i(n);a.extend({MeshReflectorMaterial:o.MeshReflectorMaterial});const c=u.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,args:o=[1,1],minDepthThreshold:i=.9,maxDepthThreshold:s=1,depthScale:c=0,depthToBlurRatioBias:p=.25,mirror:m,children:h,debug:f=0,distortion:x=1,distortionMap:M,...g},b)=>{const w=a.useThree((({gl:e})=>e)),T=a.useThree((({camera:e})=>e)),y=a.useThree((({scene:e})=>e)),S=u.useRef(null),[R]=u.useState((()=>new r.Plane)),[F]=u.useState((()=>new r.Vector3)),[j]=u.useState((()=>new r.Vector3)),[v]=u.useState((()=>new r.Vector3)),[D]=u.useState((()=>new r.Matrix4)),[V]=u.useState((()=>new r.Vector3(0,0,-1))),[W]=u.useState((()=>new r.Vector4)),[_]=u.useState((()=>new r.Vector3)),[B]=u.useState((()=>new r.Vector3)),[E]=u.useState((()=>new r.Vector4)),[O]=u.useState((()=>new r.Matrix4)),[P]=u.useState((()=>new r.PerspectiveCamera)),[q]=u.useState((()=>{const e=[],t={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:w.outputEncoding};for(let a=0;a<8;a++){const o=Math.max(8,Math.round(n/Math.pow(2,a))),i=new r.WebGLRenderTarget(o,o,t);i.texture.generateMipmaps=!1,e.push(i)}return e})),L=u.useCallback((()=>{if(j.setFromMatrixPosition(S.current.matrixWorld),v.setFromMatrixPosition(T.matrixWorld),D.extractRotation(S.current.matrixWorld),F.set(0,0,1),F.applyMatrix4(D),_.subVectors(j,v),_.dot(F)>0)return;_.reflect(F).negate(),_.add(j),D.extractRotation(T.matrixWorld),V.set(0,0,-1),V.applyMatrix4(D),V.add(v),B.subVectors(j,V),B.reflect(F).negate(),B.add(j),P.position.copy(_),P.up.set(0,1,0),P.up.applyMatrix4(D),P.up.reflect(F),P.lookAt(B),P.far=T.far,P.updateMatrixWorld(),P.projectionMatrix.copy(T.projectionMatrix),O.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),O.multiply(P.projectionMatrix),O.multiply(P.matrixWorldInverse),O.multiply(S.current.matrixWorld),R.setFromNormalAndCoplanarPoint(F,j),R.applyMatrix4(P.matrixWorldInverse),W.set(R.normal.x,R.normal.y,R.normal.z,R.constant);const e=P.projectionMatrix;E.x=(Math.sign(W.x)+e.elements[8])/e.elements[0],E.y=(Math.sign(W.y)+e.elements[9])/e.elements[5],E.z=-1,E.w=(1+e.elements[10])/e.elements[14],W.multiplyScalar(2/W.dot(E)),e.elements[2]=W.x,e.elements[6]=W.y,e.elements[10]=W.z+1,e.elements[14]=W.w}),[T.far,T.matrixWorld,T.projectionMatrix,v,W,V,F,E,R,j,D,B,O,_,P]),[U,k]=u.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:w.outputEncoding},o=new r.WebGLRenderTarget(n,n,a);c>0&&(o.depthBuffer=!0,o.depthTexture=new r.DepthTexture(n,n),o.depthTexture.format=r.DepthFormat,o.depthTexture.type=r.UnsignedShortType);const l=q.reduce(((e,t,a)=>(e[`u_mipmap_${a}`]=t.texture,e[`u_mipmap_res_${a}`]=new r.Vector2(t.width,t.height),e)),{});return[o,{mirror:m,textureMatrix:O,mixBlur:e,tDiffuse:o.texture,tDepth:o.depthTexture,mixStrength:t,minDepthThreshold:i,maxDepthThreshold:s,depthScale:c,depthToBlurRatioBias:p,debug:f,distortion:x,distortionMap:M,"defines-USE_DEPTH":c>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0,...l}]}),[w,O,n,m,e,t,i,s,c,p,f,x,M,q]);return a.useFrame((()=>{if(null==S||!S.current)return;S.current.visible=!1;const t=w.xr.enabled,r=w.shadowMap.autoUpdate;L(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(U),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(y,P),0!==e&&q.forEach((e=>{w.setRenderTarget(e),w.state.buffers.depth.setMask(!0),w.render(y,P)})),w.xr.enabled=t,w.shadowMap.autoUpdate=r,S.current.visible=!0,w.setRenderTarget(null)})),u.createElement("mesh",l.default({ref:d.default([S,b])},g),u.createElement("planeBufferGeometry",{args:o}),h?h("meshReflectorMaterial",k):u.createElement("meshReflectorMaterial",k))}));exports.Reflector=c;
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,children:x,debug:M=0,distortion:b=1,distortionMap:w,...g},T)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const y=a.useThree((({gl:e})=>e)),R=a.useThree((({camera:e})=>e)),S=a.useThree((({scene:e})=>e)),j=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,B=d.useRef(null),[v]=d.useState((()=>new r.Plane)),[D]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Matrix4)),[V]=d.useState((()=>new r.Vector3(0,0,-1))),[W]=d.useState((()=>new r.Vector4)),[O]=d.useState((()=>new r.Vector3)),[q]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Matrix4)),[C]=d.useState((()=>new r.PerspectiveCamera)),L=d.useCallback((()=>{if(P.setFromMatrixPosition(B.current.matrixWorld),E.setFromMatrixPosition(R.matrixWorld),F.extractRotation(B.current.matrixWorld),D.set(0,0,1),D.applyMatrix4(F),O.subVectors(P,E),O.dot(D)>0)return;O.reflect(D).negate(),O.add(P),F.extractRotation(R.matrixWorld),V.set(0,0,-1),V.applyMatrix4(F),V.add(E),q.subVectors(P,V),q.reflect(D).negate(),q.add(P),C.position.copy(O),C.up.set(0,1,0),C.up.applyMatrix4(F),C.up.reflect(D),C.lookAt(q),C.far=R.far,C.updateMatrixWorld(),C.projectionMatrix.copy(R.projectionMatrix),_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(C.projectionMatrix),_.multiply(C.matrixWorldInverse),_.multiply(B.current.matrixWorld),v.setFromNormalAndCoplanarPoint(D,P),v.applyMatrix4(C.matrixWorldInverse),W.set(v.normal.x,v.normal.y,v.normal.z,v.constant);const e=C.projectionMatrix;U.x=(Math.sign(W.x)+e.elements[8])/e.elements[0],U.y=(Math.sign(W.y)+e.elements[9])/e.elements[5],U.z=-1,U.w=(1+e.elements[10])/e.elements[14],W.multiplyScalar(2/W.dot(U)),e.elements[2]=W.x,e.elements[6]=W.y,e.elements[10]=W.z+1,e.elements[14]=W.w}),[]),[k,z,A,G]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,format:r.RGBFormat,encoding:y.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:y,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:j,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:w,"defines-USE_BLUR":j?"":void 0,"defines-USE_DEPTH":m>0?"":void 0,"defines-USE_DISTORTION":w?"":void 0}]}),[y,i,_,n,f,j,e,t,l,p,m,h,M,b,w]);return a.useFrame((()=>{if(null==B||!B.current)return;B.current.visible=!1;const e=y.xr.enabled,t=y.shadowMap.autoUpdate;L(),y.xr.enabled=!1,y.shadowMap.autoUpdate=!1,y.setRenderTarget(k),y.state.buffers.depth.setMask(!0),y.autoClear||y.clear(),y.render(S,C),j&&A.render(y,k,z),y.xr.enabled=e,y.shadowMap.autoUpdate=t,B.current.visible=!0,y.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([B,T])},g),d.createElement("planeBufferGeometry",{args:s}),x?x("meshReflectorMaterial",G):d.createElement("meshReflectorMaterial",G))}));exports.Reflector=p;
@@ -1,7 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { Mesh, Texture } from 'three';
3
- import { MeshReflectorMaterialImpl } from '../materials/MeshReflectorMaterial';
4
- export declare type ReflectorChildProps = MeshReflectorMaterialImpl;
3
+ import { MeshReflectorMaterialProps } from '../materials/MeshReflectorMaterial';
5
4
  export declare type ReflectorProps = Omit<JSX.IntrinsicElements['mesh'], 'args' | 'children'> & Pick<JSX.IntrinsicElements['planeBufferGeometry'], 'args'> & {
6
5
  resolution?: number;
7
6
  mixBlur?: number;
@@ -16,14 +15,14 @@ export declare type ReflectorProps = Omit<JSX.IntrinsicElements['mesh'], 'args'
16
15
  distortionMap?: Texture;
17
16
  distortion?: number;
18
17
  children?: {
19
- (Component: React.ElementType<JSX.IntrinsicElements['meshReflectorMaterial']>, ComponentProps: ReflectorChildProps): JSX.Element | null;
18
+ (Component: React.ElementType<JSX.IntrinsicElements['meshReflectorMaterial']>, ComponentProps: MeshReflectorMaterialProps): JSX.Element | null;
20
19
  };
21
20
  };
22
21
  declare global {
23
22
  namespace JSX {
24
23
  interface IntrinsicElements {
25
- meshReflectorMaterial: MeshReflectorMaterialImpl;
24
+ meshReflectorMaterial: MeshReflectorMaterialProps;
26
25
  }
27
26
  }
28
27
  }
29
- export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "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" | "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" | "mixBlur" | "mixStrength" | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mirror" | "debug" | "distortion" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;
28
+ export declare const Reflector: React.ForwardRefExoticComponent<Pick<ReflectorProps, "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" | "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" | "distortionMap"> & React.RefAttributes<Mesh<import("three").BufferGeometry, import("three").Material | import("three").Material[]>>>;