@react-three/drei 9.0.0-beta.3 → 9.0.0

package/core/Lightformer.d.ts

@@ -0,0 +1,41 @@
+import { ReactThreeFiber } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+export declare type LightProps = JSX.IntrinsicElements['mesh'] & {
+    args?: any[];
+    map?: THREE.Texture;
+    toneMapped?: boolean;
+    color?: ReactThreeFiber.Color;
+    form?: 'circle' | 'ring' | 'rect' | any;
+    scale?: number | [number, number, number] | [number, number];
+    intensity?: number;
+    target?: [number, number, number] | THREE.Vector3;
+};
+export declare const Lightformer: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>, ReactThreeFiber.NodeProps<THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>, typeof THREE.Mesh>>>, ReactThreeFiber.NonFunctionKeys<{
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+}>> & {
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+    args?: any[] | undefined;
+    map?: THREE.Texture | undefined;
+    toneMapped?: boolean | undefined;
+    color?: ReactThreeFiber.Color | undefined;
+    form?: 'circle' | 'ring' | 'rect' | any;
+    scale?: number | [number, number] | [number, number, number] | undefined;
+    intensity?: number | undefined;
+    target?: THREE.Vector3 | [number, number, number] | undefined;
+}, "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" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "form" | "map" | "material" | "target" | "toneMapped" | "geometry" | "morphTargetInfluences" | "morphTargetDictionary" | "isMesh" | "updateMorphTargets" | "intensity"> & React.RefAttributes<unknown>>;

package/core/Lightformer.js

@@ -0,0 +1,51 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { applyProps } from '@react-three/fiber';
+import * as React from 'react';
+import * as THREE from 'three';
+import mergeRefs from 'react-merge-refs';
+
+const Lightformer = /*#__PURE__*/React.forwardRef(({
+  args,
+  map,
+  toneMapped = false,
+  color = 'white',
+  form: Form = 'rect',
+  intensity = 1,
+  scale = 1,
+  target,
+  children,
+  ...props
+}, forwardRef) => {
+  // Apply emissive power
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!children && !props.material) {
+      applyProps(ref.current.material, {
+        color
+      });
+      ref.current.material.color.multiplyScalar(intensity);
+    }
+  }, [color, intensity, children, props.material]); // Target light
+
+  React.useLayoutEffect(() => {
+    if (target) ref.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target);
+  }, [target]); // Fix 2-dimensional scale
+
+  scale = Array.isArray(scale) && scale.length === 2 ? [scale[0], scale[1], 1] : scale;
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: mergeRefs([ref, forwardRef]),
+    scale: scale
+  }, props), Form === 'circle' ? /*#__PURE__*/React.createElement("ringGeometry", {
+    args: [0, 1, 64]
+  }) : Form === 'ring' ? /*#__PURE__*/React.createElement("ringGeometry", {
+    args: [0.5, 1, 64]
+  }) : Form === 'rect' ? /*#__PURE__*/React.createElement("planeGeometry", null) : /*#__PURE__*/React.createElement(Form, {
+    args: args
+  }), children ? children : !props.material ? /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    toneMapped: toneMapped,
+    map: map,
+    side: THREE.DoubleSide
+  }) : null);
+});
+
+export { Lightformer };

package/core/MapControls.cjs.js

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

package/core/MapControls.d.ts

@@ -8,5 +8,6 @@ export declare type MapControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber
     onChange?: (e?: THREE.Event) => void;
     onStart?: (e?: THREE.Event) => void;
     onEnd?: (e?: THREE.Event) => void;
+    domElement?: HTMLElement;
 }>;
-export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "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" | "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" | "reverseOrbit" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;
+export declare const MapControls: React.ForwardRefExoticComponent<Pick<MapControlsProps, "object" | "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" | "reset" | "enabled" | "connect" | "update" | "onStart" | "keys" | "target" | "touches" | "domElement" | "minDistance" | "maxDistance" | "minZoom" | "maxZoom" | "minPolarAngle" | "maxPolarAngle" | "minAzimuthAngle" | "maxAzimuthAngle" | "enableDamping" | "dampingFactor" | "enableZoom" | "zoomSpeed" | "enableRotate" | "rotateSpeed" | "enablePan" | "panSpeed" | "screenSpacePanning" | "keyPanSpeed" | "autoRotate" | "autoRotateSpeed" | "reverseOrbit" | "mouseButtons" | "target0" | "position0" | "zoom0" | "_domElementKeyEvents" | "getPolarAngle" | "getAzimuthalAngle" | "setPolarAngle" | "setAzimuthalAngle" | "getDistance" | "listenToKeyEvents" | "saveState" | "onEnd"> & React.RefAttributes<MapControlsImpl>>;

package/core/MapControls.js

@@ -7,25 +7,22 @@ const MapControls = /*#__PURE__*/React.forwardRef((props = {
   enableDamping: true
 }, ref) => {
   const {
+    domElement,
     camera,
     onChange,
     onStart,
     onEnd,
     ...rest
   } = props;
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const domElement = useThree(({
-    gl
-  }) => gl.domElement);
+  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 explDomElement = domElement || events.connected || gl.domElement;
   const explCamera = camera || defaultCamera;
   const controls = React.useMemo(() => new MapControls$1(explCamera), [explCamera]);
   React.useEffect(() => {
-    controls.connect(domElement);
+    controls.connect(explDomElement);
 
     const callback = e => {
       invalidate();
@@ -41,7 +38,7 @@ const MapControls = /*#__PURE__*/React.forwardRef((props = {
       if (onStart) controls.removeEventListener('start', onStart);
       if (onEnd) controls.removeEventListener('end', onEnd);
     };
-  }, [onChange, onStart, onEnd, controls, invalidate, domElement]);
+  }, [onChange, onStart, onEnd, controls, invalidate, explDomElement]);
   useFrame(() => controls.update());
   return /*#__PURE__*/React.createElement("primitive", _extends({
     ref: ref,

package/core/MeshReflectorMaterial.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"),i=require("../materials/BlurPass.cjs.js"),o=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:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,debug:f=0,distortion:x=1,mixContrast:M=1,distortionMap:S,reflectorOffset:T=0,...b},y)=>{const w=a.useThree((({gl:e})=>e)),g=a.useThree((({camera:e})=>e)),R=a.useThree((({scene:e})=>e)),v=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,j=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Vector3)),[P]=d.useState((()=>new r.Matrix4)),[U]=d.useState((()=>new r.Vector3(0,0,-1))),[E]=d.useState((()=>new r.Vector4)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Matrix4)),[I]=d.useState((()=>new r.PerspectiveCamera)),C=d.useCallback((()=>{var e;const t=j.current.parent||(null==(e=j.current)?void 0:e.__r3f.parent);if(!t)return;if(_.setFromMatrixPosition(t.matrixWorld),O.setFromMatrixPosition(g.matrixWorld),P.extractRotation(t.matrixWorld),B.set(0,0,1),B.applyMatrix4(P),_.addScaledVector(B,T),V.subVectors(_,O),V.dot(B)>0)return;V.reflect(B).negate(),V.add(_),P.extractRotation(g.matrixWorld),U.set(0,0,-1),U.applyMatrix4(P),U.add(O),W.subVectors(_,U),W.reflect(B).negate(),W.add(_),I.position.copy(V),I.up.set(0,1,0),I.up.applyMatrix4(P),I.up.reflect(B),I.lookAt(W),I.far=g.far,I.updateMatrixWorld(),I.projectionMatrix.copy(g.projectionMatrix),q.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),q.multiply(I.projectionMatrix),q.multiply(I.matrixWorldInverse),q.multiply(t.matrixWorld),D.setFromNormalAndCoplanarPoint(B,_),D.applyMatrix4(I.matrixWorldInverse),E.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const r=I.projectionMatrix;F.x=(Math.sign(E.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(E.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],E.multiplyScalar(2/E.dot(F)),r.elements[2]=E.x,r.elements[6]=E.y,r.elements[10]=E.z+1,r.elements[14]=E.w}),[g,T]),[k,L,z,A]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,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 i.BlurPass({gl:w,resolution:n,width:o[0],height:o[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:v,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,debug:f,distortion:x,distortionMap:S,mixContrast:M,"defines-USE_BLUR":v?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":S?"":void 0}]}),[w,o,q,n,h,v,e,t,s,l,p,m,f,x,S,M]);return a.useFrame((()=>{var e;const t=j.current.parent||(null==(e=j.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;C(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(k),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(R,I),v&&z.render(w,k,L),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+A["defines-USE_BLUR"]+A["defines-USE_DEPTH"]+A["defines-USE_DISTORTION"],ref:c.default([j,y])},A,b))}));exports.MeshReflectorMaterial=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({MeshReflectorMaterialImpl:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:i=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:T=0,...S},y)=>{const w=a.useThree((({gl:e})=>e)),b=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[D]=d.useState((()=>new r.Vector3)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Matrix4)),[P]=d.useState((()=>new r.Vector3(0,0,-1))),[U]=d.useState((()=>new r.Vector4)),[E]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(b.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,T),E.subVectors(B,_),E.dot(D)>0)return;E.reflect(D).negate(),E.add(B),O.extractRotation(b.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),V.subVectors(B,P),V.reflect(D).negate(),V.add(B),q.position.copy(E),q.up.set(0,1,0),q.up.applyMatrix4(O),q.up.reflect(D),q.lookAt(V),q.far=b.far,q.updateMatrixWorld(),q.projectionMatrix.copy(b.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(D,B),j.applyMatrix4(q.matrixWorldInverse),U.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;F.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(F)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[b,T]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:w.outputEncoding,type:r.HalfFloatType},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:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,transparent:!0,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,i,W,n,h,R,e,t,s,l,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;I(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(g,q),R&&L.render(w,C,k),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,y])},z,S))}));exports.MeshReflectorMaterial=p;

package/core/MeshReflectorMaterial.d.ts

@@ -11,7 +11,6 @@ export declare type Props = JSX.IntrinsicElements['meshStandardMaterial'] & {
     maxDepthThreshold?: number;
     depthScale?: number;
     depthToBlurRatioBias?: number;
-    debug?: number;
     distortionMap?: Texture;
     distortion?: number;
     mixContrast?: number;
@@ -24,4 +23,4 @@ declare global {
         }
     }
 }
-export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "attach" | "args" | "children" | "key" | "onUpdate" | "blur" | "resolution" | keyof import("three").MeshStandardMaterial | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "debug" | "distortion" | "mixContrast" | "distortionMap" | "reflectorOffset"> & React.RefAttributes<MeshReflectorMaterialImpl>>;
+export declare const MeshReflectorMaterial: React.ForwardRefExoticComponent<Pick<Props, "attach" | "args" | "children" | "key" | "onUpdate" | "blur" | "resolution" | keyof import("three").MeshStandardMaterial | "minDepthThreshold" | "maxDepthThreshold" | "depthScale" | "depthToBlurRatioBias" | "mixBlur" | "mixStrength" | "mirror" | "distortion" | "mixContrast" | "distortionMap" | "reflectorOffset"> & React.RefAttributes<MeshReflectorMaterialImpl>>;

package/core/MeshReflectorMaterial.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, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, HalfFloatType, 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';
@@ -19,7 +19,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
   depthScale = 0,
   depthToBlurRatioBias = 0.25,
   mirror = 0,
-  debug = 0,
   distortion = 1,
   mixContrast = 1,
   distortionMap,
@@ -110,7 +109,8 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
     const parameters = {
       minFilter: LinearFilter,
       magFilter: LinearFilter,
-      encoding: gl.outputEncoding
+      encoding: gl.outputEncoding,
+      type: HalfFloatType
     };
     const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
     fbo1.depthBuffer = true;
@@ -142,7 +142,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
       depthScale,
       depthToBlurRatioBias,
       transparent: true,
-      debug,
       distortion,
       distortionMap,
       mixContrast,
@@ -151,7 +150,7 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
       'defines-USE_DISTORTION': distortionMap ? '' : undefined
     };
     return [fbo1, fbo2, blurpass, reflectorProps];
-  }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, debug, distortion, distortionMap, mixContrast]);
+  }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast]);
   useFrame(() => {
     var _materialRef$current2;
 

package/core/OrbitControls.cjs.js

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

package/core/OrbitControls.js

@@ -1,10 +1,9 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import { useThree, useFrame } from '@react-three/fiber';
 import * as React from 'react';
-import { forwardRef, useMemo, useEffect } from 'react';
 import { OrbitControls as OrbitControls$1 } from 'three-stdlib';
 
-const OrbitControls = /*#__PURE__*/forwardRef(({
+const OrbitControls = /*#__PURE__*/React.forwardRef(({
   makeDefault,
   camera,
   regress,
@@ -15,52 +14,40 @@ const OrbitControls = /*#__PURE__*/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 controls = useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
   useFrame(() => {
     if (controls.enabled) controls.update();
   });
-  useEffect(() => {
+  React.useEffect(() => {
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [explDomElement, regress, controls, invalidate]);
+  React.useEffect(() => {
     const callback = e => {
       invalidate();
       if (regress) performance.regress();
       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]);
-  useEffect(() => {
+  }, [onChange, onStart, onEnd]);
+  React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
       set({

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),i=c(r);const a=i.forwardRef((({domElement:e,selector:r,onChange:o,onLock:c,onUnlock:a,enabled:u=!0,...d},l)=>{const{camera:f,...h}=d,m=t.useThree((e=>e.get)),v=t.useThree((e=>e.setEvents)),E=t.useThree((e=>e.gl)),b=t.useThree((e=>e.camera)),p=t.useThree((e=>e.invalidate)),k=t.useThree((e=>e.events)),L=f||b,g=e||k.connected||E.domElement,[j]=i.useState((()=>new n.PointerLockControls(L)));return i.useEffect((()=>{if(u){j.connect(g);const e=m().events.compute;return v({compute(e,t){const r=t.size.width/2,n=t.size.height/2;t.pointer.set(r/t.size.width*2-1,-n/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{j.disconnect(),v({compute:e})}}}),[u,j]),i.useEffect((()=>{const e=e=>{p(),o&&o(e)};j.addEventListener("change",e),c&&j.addEventListener("lock",c),a&&j.addEventListener("unlock",a);const t=()=>j.lock(),n=r?Array.from(document.querySelectorAll(r)):[document];return n.forEach((e=>e&&e.addEventListener("click",t))),()=>{j.removeEventListener("change",e),c&&j.addEventListener("lock",c),a&&j.addEventListener("unlock",a),n.forEach((e=>e?e.removeEventListener("click",t):void 0))}}),[o,c,a,r]),i.createElement("primitive",s.default({ref:l,object:j},h))}));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,56 +4,74 @@ 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 {
     camera,
     ...rest
   } = props;
-  const gl = useThree(({
-    gl
-  }) => gl);
-  const defaultCamera = useThree(({
-    camera
-  }) => camera);
-  const invalidate = useThree(({
-    invalidate
-  }) => invalidate);
+  const get = useThree(state => state.get);
+  const setEvents = useThree(state => state.setEvents);
+  const gl = useThree(state => state.gl);
+  const defaultCamera = useThree(state => state.camera);
+  const invalidate = useThree(state => state.invalidate);
+  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 = get().events.compute;
+      setEvents({
+        compute(event, state) {
+          const offsetX = state.size.width / 2;
+          const offsetY = state.size.height / 2;
+          state.pointer.set(offsetX / state.size.width * 2 - 1, -(offsetY / state.size.height) * 2 + 1);
+          state.raycaster.setFromCamera(state.pointer, state.camera);
+        }
+
+      });
+      return () => {
+        controls.disconnect();
+        setEvents({
+          compute: 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;