@react-three/drei 9.121.6-rc.1 → 9.122.0

package/core/Points.d.ts

@@ -1,27 +1,29 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ThreeElement, ThreeElements } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        positionPoint: ThreeElement<typeof PositionPoint>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            positionPoint: ReactThreeFiber.Object3DNode<PositionPoint, typeof PositionPoint>;
+        }
     }
 }
-export type PointsInstancesProps = Omit<ThreeElements['points'], 'ref'> & {
+type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
     range?: number;
     limit?: number;
 };
 export declare class PositionPoint extends THREE.Group {
     size: number;
     color: THREE.Color;
-    instance: React.RefObject<THREE.Points | undefined>;
-    instanceKey: React.RefObject<PositionPoint | undefined>;
+    instance: React.MutableRefObject<THREE.Points | undefined>;
+    instanceKey: React.MutableRefObject<JSX.IntrinsicElements['positionPoint'] | undefined>;
     constructor();
-    get geometry(): THREE.BufferGeometry<THREE.NormalBufferAttributes> | undefined;
+    get geometry(): THREE.BufferGeometry | undefined;
     raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
 }
-export declare const Point: ForwardRefComponent<ThreeElements['positionPoint'], PositionPoint>;
-export type PointsBuffersProps = ThreeElements['points'] & {
+export declare const Point: ForwardRefComponent<JSX.IntrinsicElements['positionPoint'], PositionPoint>;
+type PointsBuffersProps = JSX.IntrinsicElements['points'] & {
     positions: Float32Array;
     colors?: Float32Array;
     sizes?: Float32Array;
@@ -29,3 +31,4 @@ export type PointsBuffersProps = ThreeElements['points'] & {
 };
 export declare const PointsBuffer: ForwardRefComponent<PointsBuffersProps, THREE.Points>;
 export declare const Points: ForwardRefComponent<PointsBuffersProps | PointsInstancesProps, THREE.Points>;
+export {};

package/core/Points.js

@@ -116,15 +116,21 @@ const PointsInstances = /* @__PURE__ */React.forwardRef(({
     raycast: () => null
   }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-position",
-    args: [positions, 3],
+    count: positions.length / 3,
+    array: positions,
+    itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-color",
-    args: [colors, 3],
+    count: colors.length / 3,
+    array: colors,
+    itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-size",
-    args: [sizes, 1],
+    count: sizes.length,
+    array: sizes,
+    itemSize: 1,
     usage: THREE.DynamicDrawUsage
   })), /*#__PURE__*/React.createElement(context.Provider, {
     value: api
@@ -175,17 +181,21 @@ const PointsBuffer = /* @__PURE__ */React.forwardRef(({
     ref: pointsRef
   }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-position",
-    args: [positions, stride],
+    count: positions.length / stride,
+    array: positions,
+    itemSize: stride,
     usage: THREE.DynamicDrawUsage
   }), colors && /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-color",
-    args: [colors, stride],
     count: colors.length / stride,
+    array: colors,
+    itemSize: 3,
     usage: THREE.DynamicDrawUsage
   }), sizes && /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-size",
-    args: [sizes, 1],
     count: sizes.length / stride,
+    array: sizes,
+    itemSize: 1,
     usage: THREE.DynamicDrawUsage
   })), children);
 });

package/core/PositionalAudio.d.ts

@@ -1,9 +1,9 @@
 import { PositionalAudio as PositionalAudioImpl } from 'three';
-import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type PositionalAudioProps = Omit<ThreeElements['positionalAudio'], 'ref' | 'args'> & {
+type Props = JSX.IntrinsicElements['positionalAudio'] & {
     url: string;
     distance?: number;
     loop?: boolean;
 };
-export declare const PositionalAudio: ForwardRefComponent<PositionalAudioProps, PositionalAudioImpl>;
+export declare const PositionalAudio: ForwardRefComponent<Props, PositionalAudioImpl>;
+export {};

package/core/Preload.d.ts

@@ -1,7 +1,8 @@
 import { Object3D, Camera } from 'three';
-export type PreloadProps = {
+type Props = {
     all?: boolean;
     scene?: Object3D;
     camera?: Camera;
 };
-export declare function Preload({ all, scene, camera }: PreloadProps): null;
+export declare function Preload({ all, scene, camera }: Props): null;
+export {};

package/core/QuadraticBezierLine.d.ts

@@ -1,14 +1,16 @@
 import { Vector3 } from 'three';
 import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
+import { Object3DNode } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type QuadraticBezierLineRef = Line2 & {
-    setPoints(start: Vector3 | [number, number, number], end: Vector3 | [number, number, number], mid: Vector3 | [number, number, number]): void;
-};
-export type QuadraticBezierLineProps = Omit<LineProps, 'points' | 'ref'> & {
+type Props = Omit<LineProps, 'points' | 'ref'> & {
     start: Vector3 | [number, number, number];
     end: Vector3 | [number, number, number];
     mid?: Vector3 | [number, number, number];
     segments?: number;
 };
-export declare const QuadraticBezierLine: ForwardRefComponent<QuadraticBezierLineProps, QuadraticBezierLineRef>;
+export type Line2Props = Object3DNode<Line2, typeof Line2> & {
+    setPoints: (start: Vector3 | [number, number, number], end: Vector3 | [number, number, number], mid: Vector3 | [number, number, number]) => void;
+};
+export declare const QuadraticBezierLine: ForwardRefComponent<Props, Line2Props>;
+export {};

package/core/Reflector.cjs.js

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

package/core/Reflector.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Mesh, Texture } from 'three';
+import { MeshReflectorMaterialProps } from '../materials/MeshReflectorMaterial';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type ReflectorProps = Omit<JSX.IntrinsicElements['mesh'], 'args' | 'children'> & Pick<JSX.IntrinsicElements['planeGeometry'], 'args'> & {
+    resolution?: number;
+    mixBlur?: number;
+    mixStrength?: number;
+    blur?: [number, number] | number;
+    mirror: number;
+    minDepthThreshold?: number;
+    maxDepthThreshold?: number;
+    depthScale?: number;
+    depthToBlurRatioBias?: number;
+    debug?: number;
+    distortionMap?: Texture;
+    distortion?: number;
+    mixContrast?: number;
+    children?: {
+        (Component: React.ElementType<JSX.IntrinsicElements['meshReflectorMaterial']>, ComponentProps: MeshReflectorMaterialProps): JSX.Element | null;
+    };
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            meshReflectorMaterial: MeshReflectorMaterialProps;
+        }
+    }
+}
+export declare const Reflector: ForwardRefComponent<ReflectorProps, Mesh>;

package/core/Reflector.js

@@ -0,0 +1,180 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, HalfFloatType, LinearFilter } from 'three';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import { BlurPass } from '../materials/BlurPass.js';
+import { MeshReflectorMaterial } from '../materials/MeshReflectorMaterial.js';
+
+/**
+ * @deprecated Use MeshReflectorMaterial instead
+ */
+const Reflector = /* @__PURE__ */React.forwardRef(({
+  mixBlur = 0,
+  mixStrength = 0.5,
+  resolution = 256,
+  blur = [0, 0],
+  args = [1, 1],
+  minDepthThreshold = 0.9,
+  maxDepthThreshold = 1,
+  depthScale = 0,
+  depthToBlurRatioBias = 0.25,
+  mirror = 0,
+  children,
+  debug = 0,
+  distortion = 1,
+  mixContrast = 1,
+  distortionMap,
+  ...props
+}, ref) => {
+  extend({
+    MeshReflectorMaterial
+  });
+  React.useEffect(() => {
+    console.warn('Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!');
+  }, []);
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  blur = Array.isArray(blur) ? blur : [blur, blur];
+  const hasBlur = blur[0] + blur[1] > 0;
+  const meshRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => meshRef.current, []);
+  const [reflectorPlane] = React.useState(() => new Plane());
+  const [normal] = React.useState(() => new Vector3());
+  const [reflectorWorldPosition] = React.useState(() => new Vector3());
+  const [cameraWorldPosition] = React.useState(() => new Vector3());
+  const [rotationMatrix] = React.useState(() => new Matrix4());
+  const [lookAtPosition] = React.useState(() => new Vector3(0, 0, -1));
+  const [clipPlane] = React.useState(() => new Vector4());
+  const [view] = React.useState(() => new Vector3());
+  const [target] = React.useState(() => new Vector3());
+  const [q] = React.useState(() => new Vector4());
+  const [textureMatrix] = React.useState(() => new Matrix4());
+  const [virtualCamera] = React.useState(() => new PerspectiveCamera());
+  const beforeRender = React.useCallback(() => {
+    reflectorWorldPosition.setFromMatrixPosition(meshRef.current.matrixWorld);
+    cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+    rotationMatrix.extractRotation(meshRef.current.matrixWorld);
+    normal.set(0, 0, 1);
+    normal.applyMatrix4(rotationMatrix);
+    view.subVectors(reflectorWorldPosition, cameraWorldPosition);
+    // Avoid rendering when reflector is facing away
+    if (view.dot(normal) > 0) return;
+    view.reflect(normal).negate();
+    view.add(reflectorWorldPosition);
+    rotationMatrix.extractRotation(camera.matrixWorld);
+    lookAtPosition.set(0, 0, -1);
+    lookAtPosition.applyMatrix4(rotationMatrix);
+    lookAtPosition.add(cameraWorldPosition);
+    target.subVectors(reflectorWorldPosition, lookAtPosition);
+    target.reflect(normal).negate();
+    target.add(reflectorWorldPosition);
+    virtualCamera.position.copy(view);
+    virtualCamera.up.set(0, 1, 0);
+    virtualCamera.up.applyMatrix4(rotationMatrix);
+    virtualCamera.up.reflect(normal);
+    virtualCamera.lookAt(target);
+    virtualCamera.far = camera.far; // Used in WebGLBackground
+    virtualCamera.updateMatrixWorld();
+    virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+    // Update the texture matrix
+    textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+    textureMatrix.multiply(virtualCamera.projectionMatrix);
+    textureMatrix.multiply(virtualCamera.matrixWorldInverse);
+    textureMatrix.multiply(meshRef.current.matrixWorld);
+    // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+    reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
+    reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
+    clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
+    const projectionMatrix = virtualCamera.projectionMatrix;
+    q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+    q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+    q.z = -1.0;
+    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+    // Calculate the scaled plane vector
+    clipPlane.multiplyScalar(2.0 / clipPlane.dot(q));
+    // Replacing the third row of the projection matrix
+    projectionMatrix.elements[2] = clipPlane.x;
+    projectionMatrix.elements[6] = clipPlane.y;
+    projectionMatrix.elements[10] = clipPlane.z + 1.0;
+    projectionMatrix.elements[14] = clipPlane.w;
+  }, []);
+  const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
+    const parameters = {
+      type: HalfFloatType,
+      minFilter: LinearFilter,
+      magFilter: LinearFilter
+    };
+    const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
+    fbo1.depthBuffer = true;
+    fbo1.depthTexture = new DepthTexture(resolution, resolution);
+    fbo1.depthTexture.format = DepthFormat;
+    fbo1.depthTexture.type = UnsignedShortType;
+    const fbo2 = new WebGLRenderTarget(resolution, resolution, parameters);
+    const blurpass = new BlurPass({
+      gl,
+      resolution,
+      width: blur[0],
+      height: blur[1],
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias
+    });
+    const reflectorProps = {
+      mirror,
+      textureMatrix,
+      mixBlur,
+      tDiffuse: fbo1.texture,
+      tDepth: fbo1.depthTexture,
+      tDiffuseBlur: fbo2.texture,
+      hasBlur,
+      mixStrength,
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias,
+      transparent: true,
+      debug,
+      distortion,
+      distortionMap,
+      mixContrast,
+      'defines-USE_BLUR': hasBlur ? '' : undefined,
+      'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
+      '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]);
+  useFrame(() => {
+    if (!(meshRef != null && meshRef.current)) return;
+    meshRef.current.visible = false;
+    const currentXrEnabled = gl.xr.enabled;
+    const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
+    beforeRender();
+    gl.xr.enabled = false;
+    gl.shadowMap.autoUpdate = false;
+    gl.setRenderTarget(fbo1);
+    gl.state.buffers.depth.setMask(true);
+    if (!gl.autoClear) gl.clear();
+    gl.render(scene, virtualCamera);
+    if (hasBlur) blurpass.render(gl, fbo1, fbo2);
+    gl.xr.enabled = currentXrEnabled;
+    gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
+    meshRef.current.visible = true;
+    gl.setRenderTarget(null);
+  });
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: meshRef
+  }, props), /*#__PURE__*/React.createElement("planeGeometry", {
+    args: args
+  }), children ? children('meshReflectorMaterial', reflectorProps) : /*#__PURE__*/React.createElement("meshReflectorMaterial", reflectorProps));
+});
+
+export { Reflector };

package/core/RenderCubeTexture.d.ts

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ComputeFunction, ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+import { ComputeFunction, ReactThreeFiber } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type RenderCubeTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args' | 'rotation'> & {
+export type RenderCubeTextureProps = Omit<JSX.IntrinsicElements['texture'], 'rotation'> & {
     stencilBuffer?: boolean;
     depthBuffer?: boolean;
     generateMipmaps?: boolean;

package/core/RenderTexture.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"),n=require("@react-three/fiber"),a=require("./Fbo.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(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 u=l(e),o=i(r),s=i(t);const c=s.forwardRef((({children:e,compute:r,width:t,height:l,samples:i=8,renderPriority:c=0,eventPriority:d=0,frames:g=1/0,stencilBuffer:p=!1,depthBuffer:m=!0,generateMipmaps:b=!1,...v},h)=>{const{size:j,viewport:x}=n.useThree(),y=a.useFBO((t||j.width)*x.dpr,(l||j.height)*x.dpr,{samples:i,stencilBuffer:p,depthBuffer:m,generateMipmaps:b}),[P]=s.useState((()=>new o.Scene)),O=s.useCallback(((e,r,t)=>{var n,a;let l=null==(n=y.texture)||null==(n=n.__r3f.parent)?void 0:n.object;for(;l&&!(l instanceof o.Object3D);){var i;l=null==(i=l.__r3f.parent)?void 0:i.object}if(!l)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[u]=t.raycaster.intersectObject(l);if(!u)return!1;const s=u.uv;if(!s)return!1;r.raycaster.setFromCamera(r.pointer.set(2*s.x-1,2*s.y-1),r.camera)}),[]);return s.useImperativeHandle(h,(()=>y.texture),[y]),s.createElement(s.Fragment,null,n.createPortal(s.createElement(f,{renderPriority:c,frames:g,fbo:y},e,s.createElement("group",{onPointerOver:()=>null})),P,{events:{compute:r||O,priority:d}}),s.createElement("primitive",u.default({object:y.texture},v)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let l,i,u,o,c=0;return n.useFrame((r=>{(e===1/0||c<e)&&(l=r.gl.autoClear,i=r.gl.xr.enabled,u=r.gl.getRenderTarget(),o=r.gl.xr.isPresenting,r.gl.autoClear=!0,r.gl.xr.enabled=!1,r.gl.xr.isPresenting=!1,r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(u),r.gl.autoClear=l,r.gl.xr.enabled=i,r.gl.xr.isPresenting=o,c++)}),r),s.createElement(s.Fragment,null,t)}exports.RenderTexture=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./Fbo.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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 u=i(e),s=l(r),c=l(t);const o=c.forwardRef((({children:e,compute:r,width:t,height:i,samples:l=8,renderPriority:o=0,eventPriority:d=0,frames:g=1/0,stencilBuffer:p=!1,depthBuffer:m=!0,generateMipmaps:b=!1,...v},h)=>{const{size:x,viewport:y}=n.useThree(),j=a.useFBO((t||x.width)*y.dpr,(i||x.height)*y.dpr,{samples:l,stencilBuffer:p,depthBuffer:m,generateMipmaps:b}),[P]=c.useState((()=>new s.Scene)),O=c.useCallback(((e,r,t)=>{var n,a;let i=null==(n=j.texture)?void 0:n.__r3f.parent;for(;i&&!(i instanceof s.Object3D);)i=i.__r3f.parent;if(!i)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[l]=t.raycaster.intersectObject(i);if(!l)return!1;const u=l.uv;if(!u)return!1;r.raycaster.setFromCamera(r.pointer.set(2*u.x-1,2*u.y-1),r.camera)}),[]);return c.useImperativeHandle(h,(()=>j.texture),[j]),c.createElement(c.Fragment,null,n.createPortal(c.createElement(f,{renderPriority:o,frames:g,fbo:j},e,c.createElement("group",{onPointerOver:()=>null})),P,{events:{compute:r||O,priority:d}}),c.createElement("primitive",u.default({object:j.texture},v)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let i,l,u,s,o=0;return n.useFrame((r=>{(e===1/0||o<e)&&(i=r.gl.autoClear,l=r.gl.xr.enabled,u=r.gl.getRenderTarget(),s=r.gl.xr.isPresenting,r.gl.autoClear=!0,r.gl.xr.enabled=!1,r.gl.xr.isPresenting=!1,r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(u),r.gl.autoClear=i,r.gl.xr.enabled=l,r.gl.xr.isPresenting=s,o++)}),r),c.createElement(c.Fragment,null,t)}exports.RenderTexture=o;

package/core/RenderTexture.d.ts

@@ -1,8 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type RenderTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args'> & {
+type Props = JSX.IntrinsicElements['texture'] & {
     width?: number;
     height?: number;
     samples?: number;
@@ -15,4 +14,5 @@ export type RenderTextureProps = Omit<ThreeElements['texture'], 'ref' | 'args'>
     compute?: (event: any, state: any, previous: any) => false | undefined;
     children: React.ReactNode;
 };
-export declare const RenderTexture: ForwardRefComponent<RenderTextureProps, THREE.Texture>;
+export declare const RenderTexture: ForwardRefComponent<Props, THREE.Texture>;
+export {};

package/core/RenderTexture.js

@@ -34,10 +34,9 @@ const RenderTexture = /* @__PURE__ */React.forwardRef(({
     // Since this is only a texture it does not have an easy way to obtain the parent, which we
     // need to transform event coordinates to local coordinates. We use r3f internals to find the
     // next Object3D.
-    let parent = (_fbo$texture = fbo.texture) == null || (_fbo$texture = _fbo$texture.__r3f.parent) == null ? void 0 : _fbo$texture.object;
+    let parent = (_fbo$texture = fbo.texture) == null ? void 0 : _fbo$texture.__r3f.parent;
     while (parent && !(parent instanceof THREE.Object3D)) {
-      var _parent$__r3f$parent;
-      parent = (_parent$__r3f$parent = parent.__r3f.parent) == null ? void 0 : _parent$__r3f$parent.object;
+      parent = parent.__r3f.parent;
     }
     if (!parent) return false;
     // First we call the previous state-onion-layers compute, this is what makes it possible to nest portals

package/core/Resize.d.ts

@@ -1,17 +1,10 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ThreeElements } from '@react-three/fiber';
-export type ResizeProps = Omit<ThreeElements['group'], 'ref'> & {
+export type ResizeProps = JSX.IntrinsicElements['group'] & {
     width?: boolean;
     height?: boolean;
     depth?: boolean;
     box3?: THREE.Box3;
     precise?: boolean;
 };
-export declare const Resize: React.ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<THREE.Group<THREE.Object3DEventMap>, import("@react-three/fiber").MathProps<THREE.Group<THREE.Object3DEventMap>> & import("@react-three/fiber").ReactProps<THREE.Group<THREE.Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.Group<THREE.Object3DEventMap>, typeof THREE.Group>, "object">>>, "ref"> & {
-    width?: boolean;
-    height?: boolean;
-    depth?: boolean;
-    box3?: THREE.Box3;
-    precise?: boolean;
-} & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
+export declare const Resize: React.ForwardRefExoticComponent<Omit<ResizeProps, "ref"> & React.RefAttributes<THREE.Group>>;

package/core/RoundedBox.d.ts

@@ -1,12 +1,12 @@
 import { Mesh } from 'three';
 import { ForwardRefComponent, NamedArrayTuple } from '../helpers/ts-utils';
-import { ThreeElements } from '@react-three/fiber';
-export type RoundedBoxProps = {
+type Props = {
     args?: NamedArrayTuple<(width?: number, height?: number, depth?: number) => void>;
     radius?: number;
     smoothness?: number;
     bevelSegments?: number;
     steps?: number;
     creaseAngle?: number;
-} & Omit<ThreeElements['mesh'], 'ref' | 'args'>;
-export declare const RoundedBox: ForwardRefComponent<RoundedBoxProps, Mesh>;
+} & Omit<JSX.IntrinsicElements['mesh'], 'args'>;
+export declare const RoundedBox: ForwardRefComponent<Props, Mesh>;
+export {};

package/core/Sampler.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Color, InstancedBufferAttribute, InstancedMesh, Mesh, Object3D, Vector3 } from 'three';
-import { ThreeElements } from '@react-three/fiber';
+import { GroupProps } from '@react-three/fiber';
 type SamplePayload = {
     position: Vector3;
     normal: Vector3;
@@ -11,7 +11,7 @@ type TransformPayload = SamplePayload & {
     dummy: Object3D;
     sampledMesh: Mesh;
 };
-export type SamplerProps = Omit<ThreeElements['group'], 'ref'> & {
+type Props = {
     mesh?: React.RefObject<Mesh>;
     instances?: React.RefObject<InstancedMesh>;
     weight?: string;
@@ -23,6 +23,6 @@ export interface useSurfaceSamplerProps {
     weight?: string;
     count?: number;
 }
-export declare function useSurfaceSampler(mesh: React.RefObject<Mesh>, count?: number, transform?: TransformFn, weight?: string, instanceMesh?: React.RefObject<InstancedMesh> | null): InstancedBufferAttribute;
-export declare function Sampler({ children, weight, transform, instances, mesh, count, ...props }: SamplerProps): React.JSX.Element;
+export declare function useSurfaceSampler(mesh: React.MutableRefObject<Mesh>, count?: number, transform?: TransformFn, weight?: string, instanceMesh?: React.MutableRefObject<InstancedMesh> | null): InstancedBufferAttribute;
+export declare function Sampler({ children, weight, transform, instances, mesh, count, ...props }: React.PropsWithChildren<Props & GroupProps>): React.JSX.Element;
 export {};

package/core/ScreenQuad.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-import { ThreeElements } from '@react-three/fiber';
-export type ScreenQuadProps = Omit<ThreeElements['mesh'], 'ref' | 'args'>;
-export declare const ScreenQuad: ForwardRefComponent<ScreenQuadProps, THREE.Mesh>;
+type Props = Omit<JSX.IntrinsicElements['mesh'], 'args'>;
+export declare const ScreenQuad: ForwardRefComponent<Props, THREE.Mesh>;
+export {};

package/core/ScreenSizer.d.ts

@@ -1,7 +1,7 @@
-import { ThreeElements } from '@react-three/fiber';
+import { Object3DProps } from '@react-three/fiber';
 import { Object3D } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ScreenSizerProps = Omit<ThreeElements['object3D'], 'ref'> & {
+export interface ScreenSizerProps extends Object3DProps {
     scale?: number;
-};
+}
 export declare const ScreenSizer: ForwardRefComponent<ScreenSizerProps, Object3D>;

package/core/ScreenSpace.d.ts

@@ -1,7 +1,6 @@
 import { Group } from 'three';
-import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ScreenSpaceProps = Omit<ThreeElements['group'], 'ref'> & {
+export type ScreenSpaceProps = {
     depth?: number;
-};
+} & JSX.IntrinsicElements['group'];
 export declare const ScreenSpace: ForwardRefComponent<ScreenSpaceProps, Group>;

package/core/Segments.d.ts

@@ -1,22 +1,24 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ReactThreeFiber, ThreeElements, ThreeElement } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { Line2, LineMaterialParameters } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type SegmentsProps = LineMaterialParameters & {
+type SegmentsProps = LineMaterialParameters & {
     limit?: number;
     lineWidth?: number;
     children: React.ReactNode;
 };
-export type SegmentProps = Omit<ThreeElements['segmentObject'], 'ref' | 'start' | 'end' | 'color'> & {
+type SegmentProps = Omit<JSX.IntrinsicElements['segmentObject'], 'start' | 'end' | 'color'> & {
     start: ReactThreeFiber.Vector3;
     end: ReactThreeFiber.Vector3;
     color?: ReactThreeFiber.Color;
 };
 declare const Segments: ForwardRefComponent<SegmentsProps, Line2>;
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        segmentObject: ThreeElement<typeof SegmentObject>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            segmentObject: ReactThreeFiber.Object3DNode<SegmentObject, typeof SegmentObject>;
+        }
     }
 }
 export declare class SegmentObject {

package/core/Shadow.d.ts

@@ -1,7 +1,6 @@
 import { Mesh, Color, type PlaneGeometry, type MeshBasicMaterial } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-import { ThreeElements } from '@react-three/fiber';
-export type ShadowProps = Omit<ThreeElements['mesh'], 'ref'> & {
+type Props = JSX.IntrinsicElements['mesh'] & {
     colorStop?: number;
     fog?: boolean;
     color?: Color | number | string;
@@ -9,4 +8,5 @@ export type ShadowProps = Omit<ThreeElements['mesh'], 'ref'> & {
     depthWrite?: boolean;
 };
 export type ShadowType = Mesh<PlaneGeometry, MeshBasicMaterial>;
-export declare const Shadow: ForwardRefComponent<ShadowProps, ShadowType>;
+export declare const Shadow: ForwardRefComponent<Props, ShadowType>;
+export {};

package/core/ShadowAlpha.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("react"),a=require("three");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,Object.freeze(r)}var n=t(r),u=t(a);exports.ShadowAlpha=function({opacity:r,alphaMap:a}){const t=n.useRef(null),l=n.useRef(null),o=n.useRef({value:1}),c=n.useRef({value:null}),i=n.useRef({value:!1});return n.useLayoutEffect((()=>{t.current.onBeforeCompile=l.current.onBeforeCompile=e=>{const r=e.fragmentShader.indexOf("void main");let a,t="",n=r;for(;"\n"!==a&&n<r+100;)a=e.fragmentShader.charAt(n),t+=a,n++;t=t.trim(),e.vertexShader=e.vertexShader.replace("void main() {","\n        varying vec2 custom_vUv;\n\n        void main() {\n          custom_vUv = uv;\n          \n        "),e.fragmentShader=e.fragmentShader.replace(t,"\n          uniform float uShadowOpacity;\n          uniform sampler2D uAlphaMap;\n          uniform bool uHasAlphaMap;\n\n          varying vec2 custom_vUv;\n  \n          float bayerDither2x2( vec2 v ) {\n            return mod( 3.0 * v.y + 2.0 * v.x, 4.0 );\n          }\n    \n          float bayerDither4x4( vec2 v ) {\n            vec2 P1 = mod( v, 2.0 );\n            vec2 P2 = mod( floor( 0.5  * v ), 2.0 );\n            return 4.0 * bayerDither2x2( P1 ) + bayerDither2x2( P2 );\n          }\n  \n          void main() {\n            float alpha = \n              uHasAlphaMap ? \n                uShadowOpacity * texture2D(uAlphaMap, custom_vUv).x\n              : uShadowOpacity;\n\n            if( ( bayerDither4x4( floor( mod( gl_FragCoord.xy, 4.0 ) ) ) ) / 16.0 >= alpha ) discard;\n            \n          "),e.uniforms.uShadowOpacity=o.current,e.uniforms.uAlphaMap=c.current,e.uniforms.uHasAlphaMap=i.current}}),[]),e.useFrame((()=>{var e;const n=null==(e=t.current.__r3f)||null==(e=e.parent)?void 0:e.object;if(n){const e=n.material;e&&(o.current.value=null!=r?r:e.opacity,!1===a?(c.current.value=null,i.current.value=!1):(c.current.value=a||e.alphaMap,i.current.value=!!c.current.value))}})),n.createElement(n.Fragment,null,n.createElement("meshDepthMaterial",{ref:t,attach:"customDepthMaterial",depthPacking:u.RGBADepthPacking}),n.createElement("meshDistanceMaterial",{ref:l,attach:"customDistanceMaterial"}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("react"),a=require("three");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,Object.freeze(r)}var n=t(r),u=t(a);exports.ShadowAlpha=function({opacity:r,alphaMap:a}){const t=n.useRef(null),o=n.useRef(null),c=n.useRef({value:1}),l=n.useRef({value:null}),i=n.useRef({value:!1});return n.useLayoutEffect((()=>{t.current.onBeforeCompile=o.current.onBeforeCompile=e=>{const r=e.fragmentShader.indexOf("void main");let a,t="",n=r;for(;"\n"!==a&&n<r+100;)a=e.fragmentShader.charAt(n),t+=a,n++;t=t.trim(),e.vertexShader=e.vertexShader.replace("void main() {","\n        varying vec2 custom_vUv;\n\n        void main() {\n          custom_vUv = uv;\n          \n        "),e.fragmentShader=e.fragmentShader.replace(t,"\n          uniform float uShadowOpacity;\n          uniform sampler2D uAlphaMap;\n          uniform bool uHasAlphaMap;\n\n          varying vec2 custom_vUv;\n  \n          float bayerDither2x2( vec2 v ) {\n            return mod( 3.0 * v.y + 2.0 * v.x, 4.0 );\n          }\n    \n          float bayerDither4x4( vec2 v ) {\n            vec2 P1 = mod( v, 2.0 );\n            vec2 P2 = mod( floor( 0.5  * v ), 2.0 );\n            return 4.0 * bayerDither2x2( P1 ) + bayerDither2x2( P2 );\n          }\n  \n          void main() {\n            float alpha = \n              uHasAlphaMap ? \n                uShadowOpacity * texture2D(uAlphaMap, custom_vUv).x\n              : uShadowOpacity;\n\n            if( ( bayerDither4x4( floor( mod( gl_FragCoord.xy, 4.0 ) ) ) ) / 16.0 >= alpha ) discard;\n            \n          "),e.uniforms.uShadowOpacity=c.current,e.uniforms.uAlphaMap=l.current,e.uniforms.uHasAlphaMap=i.current}}),[]),e.useFrame((()=>{var e;const n=null==(e=t.current.__r3f)?void 0:e.parent;if(n){const e=n.material;e&&(c.current.value=null!=r?r:e.opacity,!1===a?(l.current.value=null,i.current.value=!1):(l.current.value=a||e.alphaMap,i.current.value=!!l.current.value))}})),n.createElement(n.Fragment,null,n.createElement("meshDepthMaterial",{ref:t,attach:"customDepthMaterial",depthPacking:u.RGBADepthPacking}),n.createElement("meshDistanceMaterial",{ref:o,attach:"customDistanceMaterial"}))};

package/core/ShadowAlpha.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as THREE from 'three';
-export interface ShadowAlphaProps {
+interface ShadowAlphaProps {
     opacity?: number;
     alphaMap?: THREE.Texture | boolean;
 }
 export declare function ShadowAlpha({ opacity, alphaMap }: ShadowAlphaProps): React.JSX.Element;
+export {};

package/core/ShadowAlpha.js

@@ -80,7 +80,7 @@ function ShadowAlpha({
   }, []);
   useFrame(() => {
     var _r3f;
-    const parent = (_r3f = depthMaterialRef.current.__r3f) == null || (_r3f = _r3f.parent) == null ? void 0 : _r3f.object;
+    const parent = (_r3f = depthMaterialRef.current.__r3f) == null ? void 0 : _r3f.parent;
     if (parent) {
       const parentMainMaterial = parent.material;
       if (parentMainMaterial) {

package/core/Sky.d.ts

@@ -2,7 +2,7 @@ import { ReactThreeFiber } from '@react-three/fiber';
 import { Sky as SkyImpl } from 'three-stdlib';
 import { Vector3 } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type SkyProps = {
+type Props = {
     distance?: number;
     sunPosition?: ReactThreeFiber.Vector3;
     inclination?: number;
@@ -13,4 +13,5 @@ export type SkyProps = {
     turbidity?: number;
 };
 export declare function calcPosFromAngles(inclination: number, azimuth: number, vector?: Vector3): Vector3;
-export declare const Sky: ForwardRefComponent<SkyProps, SkyImpl>;
+export declare const Sky: ForwardRefComponent<Props, SkyImpl>;
+export {};