@react-three/drei 10.2.0 → 10.4.0

package/core/CameraControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("camera-controls");function a(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 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),u=l(r),c=a(o);const i=r.forwardRef(((e,o)=>{r.useMemo((()=>{const e={Box3:t.Box3,MathUtils:{clamp:t.MathUtils.clamp},Matrix4:t.Matrix4,Quaternion:t.Quaternion,Raycaster:t.Raycaster,Sphere:t.Sphere,Spherical:t.Spherical,Vector2:t.Vector2,Vector3:t.Vector3,Vector4:t.Vector4};c.default.install({THREE:e}),n.extend({CameraControlsImpl:c.default})}),[]);const{camera:a,domElement:l,makeDefault:i,onControlStart:d,onControl:f,onControlEnd:v,onTransitionStart:m,onUpdate:E,onWake:p,onRest:h,onSleep:L,onStart:b,onEnd:C,onChange:T,regress:g,...j}=e,x=n.useThree((e=>e.camera)),y=n.useThree((e=>e.gl)),M=n.useThree((e=>e.invalidate)),O=n.useThree((e=>e.events)),S=n.useThree((e=>e.setEvents)),V=n.useThree((e=>e.set)),k=n.useThree((e=>e.get)),q=n.useThree((e=>e.performance)),w=a||x,R=l||O.connected||y.domElement,P=r.useMemo((()=>new c.default(w)),[w]);return n.useFrame(((e,t)=>{P.update(t)}),-1),r.useEffect((()=>(P.connect(R),()=>{P.disconnect()})),[R,P]),r.useEffect((()=>{function e(){M(),g&&q.regress()}const t=t=>{e(),null==d||d(t),null==b||b(t)},r=t=>{e(),null==f||f(t),null==T||T(t)},n=e=>{null==v||v(e),null==C||C(e)},o=t=>{e(),null==m||m(t),null==T||T(t)},a=t=>{e(),null==E||E(t),null==T||T(t)},l=t=>{e(),null==p||p(t),null==T||T(t)},s=e=>{null==h||h(e)},u=e=>{null==L||L(e)};return P.addEventListener("controlstart",t),P.addEventListener("control",r),P.addEventListener("controlend",n),P.addEventListener("transitionstart",o),P.addEventListener("update",a),P.addEventListener("wake",l),P.addEventListener("rest",s),P.addEventListener("sleep",u),()=>{P.removeEventListener("controlstart",t),P.removeEventListener("control",r),P.removeEventListener("controlend",n),P.removeEventListener("transitionstart",o),P.removeEventListener("update",a),P.removeEventListener("wake",l),P.removeEventListener("rest",s),P.removeEventListener("sleep",u)}}),[P,M,S,g,q,d,f,v,m,E,p,h,L,T,b,C]),r.useEffect((()=>{if(i){const e=k().controls;return V({controls:P}),()=>V({controls:e})}}),[i,P]),u.createElement("primitive",s.default({ref:o,object:P},j))}));Object.defineProperty(exports,"CameraControlsImpl",{enumerable:!0,get:function(){return c.default}}),exports.CameraControls=i;
+"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("camera-controls");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=l(e),u=a(r),c=l(o);const i=r.forwardRef(((e,o)=>{const{impl:l,camera:a,domElement:i,makeDefault:d,onControlStart:f,onControl:m,onControlEnd:v,onTransitionStart:p,onUpdate:E,onWake:h,onRest:L,onSleep:b,onStart:C,onEnd:T,onChange:g,regress:j,...x}=e,y=null!=l?l:c.default;r.useMemo((()=>{const e={Box3:t.Box3,MathUtils:{clamp:t.MathUtils.clamp},Matrix4:t.Matrix4,Quaternion:t.Quaternion,Raycaster:t.Raycaster,Sphere:t.Sphere,Spherical:t.Spherical,Vector2:t.Vector2,Vector3:t.Vector3,Vector4:t.Vector4};y.install({THREE:e}),n.extend({CameraControlsImpl:y})}),[y]);const M=n.useThree((e=>e.camera)),O=n.useThree((e=>e.gl)),S=n.useThree((e=>e.invalidate)),V=n.useThree((e=>e.events)),k=n.useThree((e=>e.setEvents)),q=n.useThree((e=>e.set)),w=n.useThree((e=>e.get)),R=n.useThree((e=>e.performance)),P=a||M,_=i||V.connected||O.domElement,U=r.useMemo((()=>new y(P)),[y,P]);return n.useFrame(((e,t)=>{U.update(t)}),-1),r.useEffect((()=>(U.connect(_),()=>{U.disconnect()})),[_,U]),r.useEffect((()=>{function e(){S(),j&&R.regress()}const t=t=>{e(),null==f||f(t),null==C||C(t)},r=t=>{e(),null==m||m(t),null==g||g(t)},n=e=>{null==v||v(e),null==T||T(e)},o=t=>{e(),null==p||p(t),null==g||g(t)},l=t=>{e(),null==E||E(t),null==g||g(t)},a=t=>{e(),null==h||h(t),null==g||g(t)},s=e=>{null==L||L(e)},u=e=>{null==b||b(e)};return U.addEventListener("controlstart",t),U.addEventListener("control",r),U.addEventListener("controlend",n),U.addEventListener("transitionstart",o),U.addEventListener("update",l),U.addEventListener("wake",a),U.addEventListener("rest",s),U.addEventListener("sleep",u),()=>{U.removeEventListener("controlstart",t),U.removeEventListener("control",r),U.removeEventListener("controlend",n),U.removeEventListener("transitionstart",o),U.removeEventListener("update",l),U.removeEventListener("wake",a),U.removeEventListener("rest",s),U.removeEventListener("sleep",u)}}),[U,S,k,j,R,f,m,v,p,E,h,L,b,g,C,T]),r.useEffect((()=>{if(d){const e=w().controls;return q({controls:U}),()=>q({controls:e})}}),[d,U]),u.createElement("primitive",s.default({ref:o,object:U},x))}));Object.defineProperty(exports,"CameraControlsImpl",{enumerable:!0,get:function(){return c.default}}),exports.CameraControls=i;

package/core/CameraControls.d.ts

@@ -3,6 +3,7 @@ import { ThreeElement } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';
 import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
 export type CameraControlsProps = Omit<Overwrite<ThreeElement<typeof CameraControlsImpl>, {
+    impl?: typeof CameraControlsImpl;
     camera?: PerspectiveCamera | OrthographicCamera;
     domElement?: HTMLElement;
     makeDefault?: boolean;

package/core/CameraControls.js

@@ -7,6 +7,27 @@ import CameraControlsImpl from 'camera-controls';
 export { default as CameraControlsImpl } from 'camera-controls';
 
 const CameraControls = /* @__PURE__ */forwardRef((props, ref) => {
+  const {
+    impl: SubclassImpl,
+    camera,
+    domElement,
+    makeDefault,
+    onControlStart,
+    onControl,
+    onControlEnd,
+    onTransitionStart,
+    onUpdate,
+    onWake,
+    onRest,
+    onSleep,
+    onStart,
+    onEnd,
+    onChange,
+    regress,
+    ...restProps
+  } = props;
+  const Impl = SubclassImpl !== null && SubclassImpl !== void 0 ? SubclassImpl : CameraControlsImpl;
+
   // useMemo is used here instead of useEffect, otherwise the useMemo below runs first and throws
   useMemo(() => {
     // to allow for tree shaking, we only import the subset of THREE that is used by camera-controls
@@ -25,31 +46,13 @@ const CameraControls = /* @__PURE__ */forwardRef((props, ref) => {
       Vector3,
       Vector4
     };
-    CameraControlsImpl.install({
+    Impl.install({
       THREE: subsetOfTHREE
     });
     extend({
-      CameraControlsImpl
+      CameraControlsImpl: Impl
     });
-  }, []);
-  const {
-    camera,
-    domElement,
-    makeDefault,
-    onControlStart,
-    onControl,
-    onControlEnd,
-    onTransitionStart,
-    onUpdate,
-    onWake,
-    onRest,
-    onSleep,
-    onStart,
-    onEnd,
-    onChange,
-    regress,
-    ...restProps
-  } = props;
+  }, [Impl]);
   const defaultCamera = useThree(state => state.camera);
   const gl = useThree(state => state.gl);
   const invalidate = useThree(state => state.invalidate);
@@ -60,7 +63,7 @@ const CameraControls = /* @__PURE__ */forwardRef((props, ref) => {
   const performance = useThree(state => state.performance);
   const explCamera = camera || defaultCamera;
   const explDomElement = domElement || events.connected || gl.domElement;
-  const controls = useMemo(() => new CameraControlsImpl(explCamera), [explCamera]);
+  const controls = useMemo(() => new Impl(explCamera), [Impl, explCamera]);
   useFrame((state, delta) => {
     controls.update(delta);
   }, -1);

package/core/Fbo.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=n(e),i=n(t);function o(e,t,n){const o=r.useThree((e=>e.size)),s=r.useThree((e=>e.viewport)),a="number"==typeof e?e:o.width*s.dpr,l="number"==typeof t?t:o.height*s.dpr,c=("number"==typeof e?n:e)||{},{samples:p=0,depth:f,...d}=c,h=u.useMemo((()=>{const e=new i.WebGLRenderTarget(a,l,{minFilter:i.LinearFilter,magFilter:i.LinearFilter,type:i.HalfFloatType,...d});return f&&(e.depthTexture=new i.DepthTexture(a,l,i.FloatType)),e.samples=p,e}),[]);return u.useLayoutEffect((()=>{h.setSize(a,l),p&&(h.samples=p)}),[p,h,a,l]),u.useEffect((()=>()=>h.dispose()),[]),h}exports.Fbo=({children:e,width:t,height:r,...n})=>{const i=o(t,r,n);return u.createElement(u.Fragment,null,null==e?void 0:e(i))},exports.useFBO=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=n(e),i=n(t);function o(e,t,n){const o=r.useThree((e=>e.size)),s=r.useThree((e=>e.viewport)),a="number"==typeof e?e:o.width*s.dpr,l="number"==typeof t?t:o.height*s.dpr,f=("number"==typeof e?n:e)||{},{samples:c=0,depth:p,...d}=f,h=null!=p?p:f.depthBuffer,b=u.useMemo((()=>{const e=new i.WebGLRenderTarget(a,l,{minFilter:i.LinearFilter,magFilter:i.LinearFilter,type:i.HalfFloatType,...d});return h&&(e.depthTexture=new i.DepthTexture(a,l,i.FloatType)),e.samples=c,e}),[]);return u.useLayoutEffect((()=>{b.setSize(a,l),c&&(b.samples=c)}),[c,b,a,l]),u.useEffect((()=>()=>b.dispose()),[]),b}const s=e.forwardRef((({children:e,width:t,height:r,...n},i)=>{const s=o(t,r,n);return u.createElement(u.Fragment,null,null==e?void 0:e(s))}));exports.Fbo=s,exports.useFBO=o;

package/core/Fbo.d.ts

@@ -1,25 +1,23 @@
 import * as React from 'react';
 import * as THREE from 'three';
+type WebGLRenderTargetCtorParams = ConstructorParameters<typeof THREE.WebGLRenderTarget>;
+type WebGLRenderTargetOptions = WebGLRenderTargetCtorParams[2];
 type FBOSettings = {
-    samples?: number;
     depth?: boolean;
-    wrapS?: THREE.Wrapping | undefined;
-    wrapT?: THREE.Wrapping | undefined;
-    magFilter?: THREE.MagnificationTextureFilter | undefined;
-    minFilter?: THREE.MinificationTextureFilter | undefined;
-    format?: number | undefined;
-    type?: THREE.TextureDataType | undefined;
-    anisotropy?: number | undefined;
-    depthBuffer?: boolean | undefined;
-    stencilBuffer?: boolean | undefined;
-    generateMipmaps?: boolean | undefined;
-    depthTexture?: THREE.DepthTexture | undefined;
-    colorSpace?: THREE.ColorSpace | undefined;
-};
+} & WebGLRenderTargetOptions;
 export declare function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings): THREE.WebGLRenderTarget;
-export declare const Fbo: ({ children, width, height, ...settings }: {
-    children?: (target: ReturnType<typeof useFBO>) => React.ReactNode;
-    width: Parameters<typeof useFBO>[0];
-    height: Parameters<typeof useFBO>[1];
-} & FBOSettings) => React.JSX.Element;
+type UseFBOParams = Parameters<typeof useFBO>;
+type Fbo = ReturnType<typeof useFBO>;
+export type FboProps = {
+    children?: (target: Fbo) => React.ReactNode;
+    width: UseFBOParams[0];
+    height: UseFBOParams[1];
+} & FBOSettings;
+export declare const Fbo: React.ForwardRefExoticComponent<{
+    children?: (target: Fbo) => React.ReactNode;
+    width: UseFBOParams[0];
+    height: UseFBOParams[1];
+} & {
+    depth?: boolean;
+} & THREE.WebGLRenderTargetOptions & React.RefAttributes<THREE.WebGLRenderTarget<THREE.Texture>>>;
 export {};

package/core/Fbo.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { forwardRef } from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 
@@ -18,6 +19,8 @@ settings) {
     depth,
     ...targetSettings
   } = _settings;
+  const depthBuffer = depth !== null && depth !== void 0 ? depth : _settings.depthBuffer; // backwards compatibility for deprecated `depth` prop
+
   const target = React.useMemo(() => {
     const target = new THREE.WebGLRenderTarget(_width, _height, {
       minFilter: THREE.LinearFilter,
@@ -25,7 +28,7 @@ settings) {
       type: THREE.HalfFloatType,
       ...targetSettings
     });
-    if (depth) {
+    if (depthBuffer) {
       target.depthTexture = new THREE.DepthTexture(_width, _height, THREE.FloatType);
     }
     target.samples = samples;
@@ -40,14 +43,19 @@ settings) {
   }, []);
   return target;
 }
-const Fbo = ({
+
+//
+// Fbo component
+//
+
+const Fbo = /* @__PURE__ */forwardRef(({
   children,
   width,
   height,
   ...settings
-}) => {
+}, fref) => {
   const target = useFBO(width, height, settings);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(target));
-};
+});
 
 export { Fbo, useFBO };