@react-three/drei 9.83.9 → 9.84.1

package/core/MeshTransmissionMaterial.js

@@ -58,19 +58,20 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
         value: null
       }
     };
-
     this.onBeforeCompile = shader => {
-      shader.uniforms = { ...shader.uniforms,
+      shader.uniforms = {
+        ...shader.uniforms,
         ...this.uniforms
-      }; // If the transmission sampler is active inject a flag
+      };
 
-      if (transmissionSampler) shader.defines.USE_SAMPLER = ''; // Otherwise we do use use .transmission and must therefore force USE_TRANSMISSION
+      // If the transmission sampler is active inject a flag
+      if (transmissionSampler) shader.defines.USE_SAMPLER = '';
+      // Otherwise we do use use .transmission and must therefore force USE_TRANSMISSION
       // because threejs won't inject it for us
-      else shader.defines.USE_TRANSMISSION = ''; // Head
+      else shader.defines.USE_TRANSMISSION = '';
 
-      shader.fragmentShader =
-      /*glsl*/
-      `
+      // Head
+      shader.fragmentShader = /*glsl*/`
       uniform float chromaticAberration;         
       uniform float anisotropicBlur;      
       uniform float time;
@@ -161,11 +162,10 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
               +0.2666667* snoise(2.0*m)
               +0.1333333* snoise(4.0*m)
               +0.0666667* snoise(8.0*m);
-      }\n` + shader.fragmentShader; // Remove transmission
+      }\n` + shader.fragmentShader;
 
-      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_pars_fragment>',
-      /*glsl*/
-      `
+      // Remove transmission
+      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_pars_fragment>', /*glsl*/`
         #ifdef USE_TRANSMISSION
           // Transmission code is based on glTF-Sampler-Viewer
           // https://github.com/KhronosGroup/glTF-Sample-Viewer
@@ -241,11 +241,10 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
             vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );
             return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );
           }
-        #endif\n`); // Add refraction
+        #endif\n`);
 
-      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_fragment>',
-      /*glsl*/
-      `  
+      // Add refraction
+      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_fragment>', /*glsl*/`  
         // Improve the refraction to use the world pos
         material.transmission = _transmission;
         material.transmissionAlpha = 1.0;
@@ -295,15 +294,12 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
         transmission /= ${samples}.0;
         totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`);
     };
-
     Object.keys(this.uniforms).forEach(name => Object.defineProperty(this, name, {
       get: () => this.uniforms[name].value,
       set: v => this.uniforms[name].value = v
     }));
   }
-
 }
-
 const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
   buffer,
   transmissionSampler = false,
@@ -331,57 +327,60 @@ const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
   let oldTone;
   let parent;
   useFrame(state => {
-    ref.current.time = state.clock.getElapsedTime(); // Render only if the buffer matches the built-in and no transmission sampler is set
-
+    ref.current.time = state.clock.getElapsedTime();
+    // Render only if the buffer matches the built-in and no transmission sampler is set
     if (ref.current.buffer === fboMain.texture && !transmissionSampler) {
       parent = ref.current.__r3f.parent;
-
       if (parent) {
         // Save defaults
         oldTone = state.gl.toneMapping;
-        oldBg = state.scene.background; // Switch off tonemapping lest it double tone maps
+        oldBg = state.scene.background;
+
+        // Switch off tonemapping lest it double tone maps
         // Save the current background and set the HDR as the new BG
         // Use discardmaterial, the parent will be invisible, but it's shadows will still be cast
-
         state.gl.toneMapping = THREE.NoToneMapping;
         if (background) state.scene.background = background;
         parent.material = discardMaterial;
-
         if (backside) {
           // Render into the backside buffer
           state.gl.setRenderTarget(fboBack);
-          state.gl.render(state.scene, state.camera); // And now prepare the material for the main render using the backside buffer
-
+          state.gl.render(state.scene, state.camera);
+          // And now prepare the material for the main render using the backside buffer
           parent.material = ref.current;
           parent.material.buffer = fboBack.texture;
           parent.material.thickness = backsideThickness;
           parent.material.side = THREE.BackSide;
-        } // Render into the main buffer
-
+        }
 
+        // Render into the main buffer
         state.gl.setRenderTarget(fboMain);
         state.gl.render(state.scene, state.camera);
         parent.material = ref.current;
         parent.material.thickness = thickness;
         parent.material.side = side;
-        parent.material.buffer = fboMain.texture; // Set old state back
+        parent.material.buffer = fboMain.texture;
 
+        // Set old state back
         state.scene.background = oldBg;
         state.gl.setRenderTarget(null);
         state.gl.toneMapping = oldTone;
       }
     }
-  }); // Forward ref
+  });
 
+  // Forward ref
   React.useImperativeHandle(fref, () => ref.current, []);
   return /*#__PURE__*/React.createElement("meshTransmissionMaterial", _extends({
     // Samples must re-compile the shader so we memoize it
     args: [samples, transmissionSampler],
     ref: ref
   }, props, {
-    buffer: buffer || fboMain.texture // @ts-ignore
+    buffer: buffer || fboMain.texture
+    // @ts-ignore
     ,
-    _transmission: transmission // In order for this to not incur extra cost "transmission" must be set to 0 and treated as a reserved prop.
+    _transmission: transmission
+    // In order for this to not incur extra cost "transmission" must be set to 0 and treated as a reserved prop.
     // This is because THREE.WebGLRenderer will check for transmission > 0 and execute extra renders.
     // The exception is when transmissionSampler is set, in which case we are using three's built in sampler.
     ,

package/core/MeshWobbleMaterial.d.ts

@@ -1,11 +1,11 @@
 import { MeshStandardMaterial, MeshStandardMaterialParameters, Shader } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
+type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
     time?: number;
     factor?: number;
     speed?: number;
 };
-declare type Props = WobbleMaterialType & {
+type Props = WobbleMaterialType & {
     speed?: number;
     factor?: number;
 };

package/core/MeshWobbleMaterial.js

@@ -14,7 +14,6 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
       value: 1
     };
   }
-
   onBeforeCompile(shader) {
     shader.uniforms.time = this._time;
     shader.uniforms.factor = this._factor;
@@ -30,25 +29,19 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
         vec3 transformed = vec3( position ) * m;
         vNormal = vNormal * m;`);
   }
-
   get time() {
     return this._time.value;
   }
-
   set time(v) {
     this._time.value = v;
   }
-
   get factor() {
     return this._factor.value;
   }
-
   set factor(v) {
     this._factor.value = v;
   }
-
 }
-
 const MeshWobbleMaterial = /*#__PURE__*/React.forwardRef(({
   speed = 1,
   ...props

package/core/MotionPathControls.cjs.js

@@ -0,0 +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"),o=require("maath");function u(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=u(e),a=c(t),i=c(r);const f=i.createContext(null);function l(){return i.useContext(f)}function p({points:e=50}){const{path:t}=l(),[r,n]=i.useState([]),[o]=i.useState((()=>new a.MeshBasicMaterial({color:"black"}))),[u]=i.useState((()=>new a.SphereGeometry(.025,16,16))),c=i.useRef([]);return i.useEffect((()=>{t.curves!==c.current&&(n(t.getPoints(e)),c.current=t.curves)})),i.createElement(i.Fragment,null,r.map(((e,t)=>i.createElement("mesh",{key:t,material:o,geometry:u,position:[e.x,e.y,e.z]}))))}const m=i.forwardRef((({children:e,curves:t=[],object:r,debug:u=!1,smooth:c=!1,focus:l,offset:m,eps:d=1e-5,damping:g=.1,focusDamping:v=.1,maxSpeed:b=1/0,...h},j)=>{const{camera:y}=n.useThree(),P=i.useRef(),[w]=i.useState((()=>new a.CurvePath)),x=i.useRef(null!=m?m:0),O=i.useMemo((()=>({focus:l,object:(null==r?void 0:r.current)instanceof a.Object3D?r:{current:y},path:w,current:x.current,offset:x.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,r]);i.useLayoutEffect((()=>{var e;w.curves=[];const r=t.length>0?t:null==(e=P.current)?void 0:e.__r3f.objects;for(var n=0;n<r.length;n++)w.add(r[n]);if(c){const e=w.getPoints("number"==typeof c?c:1),t=new a.CatmullRomCurve3(e);w.curves=[t]}w.updateArcLengths()})),i.useImperativeHandle(j,(()=>P.current),[]),i.useLayoutEffect((()=>{x.current=o.misc.repeat(x.current,1)}),[m]);let E=0;const[C]=i.useState((()=>new a.Vector3));return n.useFrame(((e,t)=>{if(E=O.offset,o.easing.damp(x,"current",void 0!==m?m:O.current,g,t,b,void 0,d),O.offset=o.misc.repeat(x.current,1),w.getCurveLengths().length>0){w.getPointAt(O.offset,O.point),w.getTangentAt(O.offset,O.tangent).normalize(),w.getPointAt(o.misc.repeat(x.current-(E-O.offset),1),O.next);const e=(null==r?void 0:r.current)instanceof a.Object3D?r.current:y;e.position.copy(O.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(C):l,v,t,b,void 0,d)}})),i.createElement("group",s.default({ref:P},h),i.createElement(f.Provider,{value:O},e,u&&i.createElement(p,null)))}));exports.MotionPathControls=m,exports.useMotion=l;

package/core/MotionPathControls.d.ts

@@ -0,0 +1,15 @@
+import * as THREE from 'three';
+import * as React from 'react';
+type MotionState = {
+    current: number;
+    path: THREE.CurvePath<THREE.Vector3>;
+    focus: React.MutableRefObject<THREE.Object3D<THREE.Event>> | [x: number, y: number, z: number] | undefined;
+    object: React.MutableRefObject<THREE.Object3D<THREE.Event>>;
+    offset: number;
+    point: THREE.Vector3;
+    tangent: THREE.Vector3;
+    next: THREE.Vector3;
+};
+export declare function useMotion(): MotionState;
+export declare const MotionPathControls: React.ForwardRefExoticComponent<React.RefAttributes<THREE.Group>>;
+export {};

package/core/MotionPathControls.js

@@ -0,0 +1,113 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { misc, easing } from 'maath';
+
+const isObject3DRef = ref => (ref == null ? void 0 : ref.current) instanceof THREE.Object3D;
+const context = /*#__PURE__*/React.createContext(null);
+function useMotion() {
+  return React.useContext(context);
+}
+function Debug({
+  points = 50
+}) {
+  const {
+    path
+  } = useMotion();
+  const [dots, setDots] = React.useState([]);
+  const [material] = React.useState(() => new THREE.MeshBasicMaterial({
+    color: 'black'
+  }));
+  const [geometry] = React.useState(() => new THREE.SphereGeometry(0.025, 16, 16));
+  const last = React.useRef([]);
+  React.useEffect(() => {
+    if (path.curves !== last.current) {
+      setDots(path.getPoints(points));
+      last.current = path.curves;
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, dots.map((item, index) => /*#__PURE__*/React.createElement("mesh", {
+    key: index,
+    material: material,
+    geometry: geometry,
+    position: [item.x, item.y, item.z]
+  })));
+}
+const MotionPathControls = /*#__PURE__*/React.forwardRef(({
+  children,
+  curves = [],
+  object,
+  debug = false,
+  smooth = false,
+  focus,
+  offset = undefined,
+  eps = 0.00001,
+  damping = 0.1,
+  focusDamping = 0.1,
+  maxSpeed = Infinity,
+  ...props
+}, fref) => {
+  const {
+    camera
+  } = useThree();
+  const ref = React.useRef();
+  const [path] = React.useState(() => new THREE.CurvePath());
+  const pos = React.useRef(offset !== null && offset !== void 0 ? offset : 0);
+  const state = React.useMemo(() => ({
+    focus,
+    object: (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object : {
+      current: camera
+    },
+    path,
+    current: pos.current,
+    offset: pos.current,
+    point: new THREE.Vector3(),
+    tangent: new THREE.Vector3(),
+    next: new THREE.Vector3()
+  }), [focus, object]);
+  React.useLayoutEffect(() => {
+    var _ref$current;
+    path.curves = [];
+    const _curves = curves.length > 0 ? curves : (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.objects;
+    for (var i = 0; i < _curves.length; i++) path.add(_curves[i]);
+
+    //Smoothen curve
+    if (smooth) {
+      const points = path.getPoints(typeof smooth === 'number' ? smooth : 1);
+      const catmull = new THREE.CatmullRomCurve3(points);
+      path.curves = [catmull];
+    }
+    path.updateArcLengths();
+  });
+  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useLayoutEffect(() => {
+    // When offset changes, normalise pos to avoid overshoot spinning
+    pos.current = misc.repeat(pos.current, 1);
+  }, [offset]);
+  let last = 0;
+  const [vec] = React.useState(() => new THREE.Vector3());
+  useFrame((_state, delta) => {
+    last = state.offset;
+    easing.damp(pos, 'current', offset !== undefined ? offset : state.current, damping, delta, maxSpeed, undefined, eps);
+    state.offset = misc.repeat(pos.current, 1);
+    if (path.getCurveLengths().length > 0) {
+      path.getPointAt(state.offset, state.point);
+      path.getTangentAt(state.offset, state.tangent).normalize();
+      path.getPointAt(misc.repeat(pos.current - (last - state.offset), 1), state.next);
+      const target = (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object.current : camera;
+      target.position.copy(state.point);
+      //@ts-ignore
+      if (focus) {
+        easing.dampLookAt(target, isObject3DRef(focus) ? focus.current.getWorldPosition(vec) : focus, focusDamping, delta, maxSpeed, undefined, eps);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+    value: state
+  }, children, debug && /*#__PURE__*/React.createElement(Debug, null)));
+});
+
+export { MotionPathControls, useMotion };

package/core/OrbitControls.d.ts

@@ -2,12 +2,12 @@ import { ReactThreeFiber } from '@react-three/fiber';
 import type { Camera, Event } from 'three';
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type OrbitControlsChangeEvent = Event & {
+export type OrbitControlsChangeEvent = Event & {
     target: EventTarget & {
         object: Camera;
     };
 };
-export declare type OrbitControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>, {
+export type OrbitControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>, {
     camera?: Camera;
     domElement?: HTMLElement;
     enableDamping?: boolean;

package/core/OrbitControls.js

@@ -33,7 +33,6 @@ const OrbitControls = /*#__PURE__*/React.forwardRef(({
     if (keyEvents) {
       controls.connect(keyEvents === true ? explDomElement : keyEvents);
     }
-
     controls.connect(explDomElement);
     return () => void controls.dispose();
   }, [keyEvents, explDomElement, regress, controls, invalidate]);
@@ -43,15 +42,12 @@ const OrbitControls = /*#__PURE__*/React.forwardRef(({
       if (regress) performance.regress();
       if (onChange) onChange(e);
     };
-
     const onStartCb = e => {
       if (onStart) onStart(e);
     };
-
     const onEndCb = e => {
       if (onEnd) onEnd(e);
     };
-
     controls.addEventListener('change', callback);
     controls.addEventListener('start', onStartCb);
     controls.addEventListener('end', onEndCb);

package/core/OrthographicCamera.d.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { OrthographicCamera as OrthographicCameraImpl } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = Omit<JSX.IntrinsicElements['orthographicCamera'], 'children'> & {
+type Props = Omit<JSX.IntrinsicElements['orthographicCamera'], 'children'> & {
     makeDefault?: boolean;
     manual?: boolean;
     children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);

package/core/OrthographicCamera.js

@@ -5,7 +5,6 @@ import mergeRefs from 'react-merge-refs';
 import { useFBO } from './useFBO.js';
 
 const isFunction = node => typeof node === 'function';
-
 const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
   envMap,
   resolution = 256,
@@ -43,9 +42,9 @@ const OrthographicCamera = /*#__PURE__*/React.forwardRef(({
       return () => set(() => ({
         camera: oldCam
       }));
-    } // The camera should not be part of the dependency list because this components camera is a stable reference
+    }
+    // The camera should not be part of the dependency list because this components camera is a stable reference
     // that must exchange the default, and clean up after itself on unmount.
-
   }, [cameraRef, makeDefault, set]);
   let count = 0;
   let oldEnvMap = null;

package/core/Outlines.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var s=a(e),l=c(n),u=c(t);const d=r.shaderMaterial({screenspace:!1,color:new l.Color("black"),opacity:1,thickness:.05,size:new l.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(l.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:a=!0,polygonOffset:c=!1,polygonOffsetFactor:f=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){var x,y;const _=u.useRef(null),[M]=u.useState((()=>new d({side:l.BackSide}))),{gl:h}=i.useThree(),b=h.getDrawingBufferSize(new l.Vector2);return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=_.current,n=e.parent;if(n&&n.geometry){let t;return n.skeleton?(t=new l.SkinnedMesh,t.material=M,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new l.InstancedMesh(n.geometry,M,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new l.Mesh,t.material=M,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry,()=>{g&&t.geometry.dispose(),e.remove(t)}}}),[g,null==(x=_.current)||null==(y=x.parent)?void 0:y.geometry]),u.useLayoutEffect((()=>{const o=_.current.children[0];o&&(o.renderOrder=p,i.applyProps(o.material,{transparent:t,thickness:m,color:e,opacity:n,size:b,screenspace:r,toneMapped:a,polygonOffset:c,polygonOffsetFactor:f}))}),[g,t,m,e,n,r,a,c,f,b,p]),u.createElement("group",s.default({ref:_},v))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var s=a(e),l=c(n),u=c(t);const d=r.shaderMaterial({screenspace:!1,color:new l.Color("black"),opacity:1,thickness:.05,size:new l.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(l.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:a=!0,polygonOffset:c=!1,polygonOffsetFactor:f=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){var x;const y=u.useRef(null),[_]=u.useState((()=>new d({side:l.BackSide}))),{gl:M}=i.useThree(),h=M.getDrawingBufferSize(new l.Vector2);return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=y.current,n=e.parent;if(n&&n.geometry){let t;return n.skeleton?(t=new l.SkinnedMesh,t.material=_,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new l.InstancedMesh(n.geometry,_,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new l.Mesh,t.material=_,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry,()=>{g&&t.geometry.dispose(),e.remove(t)}}}),[g,null==(x=y.current)||null==(x=x.parent)?void 0:x.geometry]),u.useLayoutEffect((()=>{const o=y.current.children[0];o&&(o.renderOrder=p,i.applyProps(o.material,{transparent:t,thickness:m,color:e,opacity:n,size:h,screenspace:r,toneMapped:a,polygonOffset:c,polygonOffsetFactor:f}))}),[g,t,m,e,n,r,a,c,f,h,p]),u.createElement("group",s.default({ref:y},v))};

package/core/Outlines.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
-declare type OutlinesProps = JSX.IntrinsicElements['group'] & {
+type OutlinesProps = JSX.IntrinsicElements['group'] & {
     color: ReactThreeFiber.Color;
     screenspace: boolean;
     opacity: number;
@@ -12,5 +12,5 @@ declare type OutlinesProps = JSX.IntrinsicElements['group'] & {
     polygonOffsetFactor?: number;
     renderOrder?: number;
 };
-export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, renderOrder, thickness, angle, ...props }: OutlinesProps): JSX.Element;
+export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, renderOrder, thickness, angle, ...props }: OutlinesProps): React.JSX.Element;
 export {};

package/core/Outlines.js

@@ -65,8 +65,7 @@ function Outlines({
   angle = Math.PI,
   ...props
 }) {
-  var _ref$current, _ref$current$parent;
-
+  var _ref$current;
   const ref = React.useRef(null);
   const [material] = React.useState(() => new OutlinesMaterial({
     side: THREE.BackSide
@@ -81,10 +80,8 @@ function Outlines({
   React.useLayoutEffect(() => {
     const group = ref.current;
     const parent = group.parent;
-
     if (parent && parent.geometry) {
       let mesh;
-
       if (parent.skeleton) {
         mesh = new THREE.SkinnedMesh();
         mesh.material = material;
@@ -99,18 +96,16 @@ function Outlines({
         mesh.material = material;
         group.add(mesh);
       }
-
       mesh.geometry = angle ? toCreasedNormals(parent.geometry, angle) : parent.geometry;
       return () => {
         if (angle) mesh.geometry.dispose();
         group.remove(mesh);
       };
     }
-  }, [angle, (_ref$current = ref.current) == null ? void 0 : (_ref$current$parent = _ref$current.parent) == null ? void 0 : _ref$current$parent.geometry]);
+  }, [angle, (_ref$current = ref.current) == null || (_ref$current = _ref$current.parent) == null ? void 0 : _ref$current.geometry]);
   React.useLayoutEffect(() => {
     const group = ref.current;
     const mesh = group.children[0];
-
     if (mesh) {
       mesh.renderOrder = renderOrder;
       applyProps(mesh.material, {

package/core/PerformanceMonitor.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-declare type PerformanceMonitorHookApi = {
+type PerformanceMonitorHookApi = {
     onIncline: (api: PerformanceMonitorApi) => void;
     onDecline: (api: PerformanceMonitorApi) => void;
     onChange: (api: PerformanceMonitorApi) => void;
     onFallback: (api: PerformanceMonitorApi) => void;
 };
-export declare type PerformanceMonitorApi = {
+export type PerformanceMonitorApi = {
     fps: number;
     factor: number;
     refreshrate: number;
@@ -17,7 +17,7 @@ export declare type PerformanceMonitorApi = {
     subscriptions: Map<Symbol, Partial<PerformanceMonitorHookApi>>;
     subscribe: (ref: React.MutableRefObject<Partial<PerformanceMonitorHookApi>>) => () => void;
 };
-declare type PerformanceMonitorProps = {
+type PerformanceMonitorProps = {
     ms?: number;
     iterations?: number;
     threshold?: number;
@@ -31,6 +31,6 @@ declare type PerformanceMonitorProps = {
     onFallback?: (api: PerformanceMonitorApi) => void;
     children?: React.ReactNode;
 };
-export declare function PerformanceMonitor({ iterations, ms, threshold, step, factor: _factor, flipflops, bounds, onIncline, onDecline, onChange, onFallback, children, }: PerformanceMonitorProps): JSX.Element;
+export declare function PerformanceMonitor({ iterations, ms, threshold, step, factor: _factor, flipflops, bounds, onIncline, onDecline, onChange, onFallback, children, }: PerformanceMonitorProps): React.JSX.Element;
 export declare function usePerformanceMonitor({ onIncline, onDecline, onChange, onFallback, }: Partial<PerformanceMonitorHookApi>): void;
 export {};

package/core/PerformanceMonitor.js

@@ -39,52 +39,48 @@ function PerformanceMonitor({
     const {
       frames,
       averages
-    } = api; // If the fallback has been reached do not continue running samples
+    } = api;
 
+    // If the fallback has been reached do not continue running samples
     if (api.fallback) return;
-
     if (averages.length < iterations) {
       frames.push(performance.now());
       const msPassed = frames[frames.length - 1] - frames[0];
-
       if (msPassed >= ms) {
         api.fps = Math.round(frames.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
         api.refreshrate = Math.max(api.refreshrate, api.fps);
         averages[api.index++ % iterations] = api.fps;
-
         if (averages.length === iterations) {
           const [lower, upper] = bounds(api.refreshrate);
           const upperBounds = averages.filter(value => value >= upper);
-          const lowerBounds = averages.filter(value => value < lower); // Trigger incline when more than -threshold- avgs exceed the upper bound
-
+          const lowerBounds = averages.filter(value => value < lower);
+          // Trigger incline when more than -threshold- avgs exceed the upper bound
           if (upperBounds.length > iterations * threshold) {
             api.factor = Math.min(1, api.factor + step);
             api.flipped++;
             if (onIncline) onIncline(api);
             api.subscriptions.forEach(value => value.onIncline && value.onIncline(api));
-          } // Trigger decline when more than -threshold- avgs are below the lower bound
-
-
+          }
+          // Trigger decline when more than -threshold- avgs are below the lower bound
           if (lowerBounds.length > iterations * threshold) {
             api.factor = Math.max(0, api.factor - step);
             api.flipped++;
             if (onDecline) onDecline(api);
             api.subscriptions.forEach(value => value.onDecline && value.onDecline(api));
           }
-
           if (lastFactor !== api.factor) {
             lastFactor = api.factor;
             if (onChange) onChange(api);
             api.subscriptions.forEach(value => value.onChange && value.onChange(api));
           }
-
           if (api.flipped > flipflops && !api.fallback) {
             api.fallback = true;
             if (onFallback) onFallback(api);
             api.subscriptions.forEach(value => value.onFallback && value.onFallback(api));
           }
+          api.averages = [];
 
-          api.averages = []; // Resetting the refreshrate creates more problems than it solves atm
+          // Resetting the refreshrate creates more problems than it solves atm
           // api.refreshrate = 0
         }
 

package/core/PerspectiveCamera.d.ts

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { PerspectiveCamera as PerspectiveCameraImpl } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
+type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
     makeDefault?: boolean;
     manual?: boolean;
     children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);

package/core/PerspectiveCamera.js

@@ -5,7 +5,6 @@ import mergeRefs from 'react-merge-refs';
 import { useFBO } from './useFBO.js';
 
 const isFunction = node => typeof node === 'function';
-
 const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
   envMap,
   resolution = 256,
@@ -59,9 +58,9 @@ const PerspectiveCamera = /*#__PURE__*/React.forwardRef(({
       return () => set(() => ({
         camera: oldCam
       }));
-    } // The camera should not be part of the dependency list because this components camera is a stable reference
+    }
+    // The camera should not be part of the dependency list because this components camera is a stable reference
     // that must exchange the default, and clean up after itself on unmount.
-
   }, [cameraRef, makeDefault, set]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("perspectiveCamera", _extends({
     ref: mergeRefs([cameraRef, ref])

package/core/PointMaterial.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { PrimitiveProps } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type PointMaterialType = JSX.IntrinsicElements['pointsMaterial'];
+type PointMaterialType = JSX.IntrinsicElements['pointsMaterial'];
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/core/PointMaterial.js

@@ -6,7 +6,6 @@ const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'o
 class PointMaterialImpl extends THREE.PointsMaterial {
   constructor(props) {
     super(props);
-
     this.onBeforeCompile = (shader, renderer) => {
       const {
         isWebGL2
@@ -23,7 +22,6 @@ class PointMaterialImpl extends THREE.PointsMaterial {
       `);
     };
   }
-
 }
 const PointMaterial = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [material] = React.useState(() => new PointMaterialImpl(null));

package/core/PointerLockControls.d.ts

@@ -2,7 +2,7 @@ import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type PointerLockControlsProps = ReactThreeFiber.Object3DNode<PointerLockControlsImpl, typeof PointerLockControlsImpl> & {
+export type PointerLockControlsProps = ReactThreeFiber.Object3DNode<PointerLockControlsImpl, typeof PointerLockControlsImpl> & {
     domElement?: HTMLElement;
     selector?: string;
     enabled?: boolean;