@react-three/drei 9.121.3 → 10.0.0-rc.0

package/core/AccumulativeShadows.d.ts

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type AccumulativeShadowsProps = {
+export type AccumulativeShadowsProps = Omit<ThreeElements['group'], 'ref'> & {
     frames?: number;
     blend?: number;
     limit?: number;
@@ -34,16 +34,14 @@ type SoftShadowMaterialProps = {
     alphaTest?: number;
     blend?: number;
 };
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            softShadowMaterial: JSX.IntrinsicElements['shaderMaterial'] & SoftShadowMaterialProps;
-        }
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        softShadowMaterial: ThreeElements['shaderMaterial'] & SoftShadowMaterialProps;
     }
 }
 export declare const accumulativeContext: React.Context<AccumulativeContext>;
-export declare const AccumulativeShadows: ForwardRefComponent<JSX.IntrinsicElements['group'] & AccumulativeShadowsProps, AccumulativeContext>;
-export type RandomizedLightProps = {
+export declare const AccumulativeShadows: ForwardRefComponent<AccumulativeShadowsProps, AccumulativeContext>;
+export type RandomizedLightProps = Omit<ThreeElements['group'], 'ref'> & {
     frames?: number;
     position?: [x: number, y: number, z: number];
     radius?: number;
@@ -57,5 +55,5 @@ export type RandomizedLightProps = {
     near?: number;
     far?: number;
 };
-export declare const RandomizedLight: ForwardRefComponent<JSX.IntrinsicElements['group'] & RandomizedLightProps, AccumulativeLightContext>;
+export declare const RandomizedLight: ForwardRefComponent<RandomizedLightProps, AccumulativeLightContext>;
 export {};

package/core/ArcballControls.d.ts

@@ -1,8 +1,8 @@
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ReactThreeFiber, ThreeElement } from '@react-three/fiber';
 import { ArcballControls as ArcballControlsImpl } from 'three-stdlib';
 import type { Event, OrthographicCamera, PerspectiveCamera } from 'three';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ArcballControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<ArcballControlsImpl, typeof ArcballControlsImpl>, {
+import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
+export type ArcballControlsProps = Omit<Overwrite<ThreeElement<typeof ArcballControlsImpl>, {
     target?: ReactThreeFiber.Vector3;
     camera?: OrthographicCamera | PerspectiveCamera;
     domElement?: HTMLElement;

package/core/AsciiRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-type AsciiRendererProps = {
+export type AsciiRendererProps = {
     renderIndex?: number;
     bgColor?: string;
     fgColor?: string;
@@ -9,4 +9,3 @@ type AsciiRendererProps = {
     resolution?: number;
 };
 export declare function AsciiRenderer({ renderIndex, bgColor, fgColor, characters, invert, color, resolution, }: AsciiRendererProps): React.JSX.Element;
-export {};

package/core/BBAnchor.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as THREE from 'three';
-import { GroupProps } from '@react-three/fiber';
-export interface BBAnchorProps extends GroupProps {
+import { ThreeElements } from '@react-three/fiber';
+export type BBAnchorProps = ThreeElements['group'] & {
     anchor: THREE.Vector3 | [number, number, number];
-}
+};
 export declare const BBAnchor: ({ anchor, ...props }: BBAnchorProps) => React.JSX.Element;

package/core/Backdrop.d.ts

@@ -1,5 +1,6 @@
+import { ThreeElements } from '@react-three/fiber';
 import * as React from 'react';
-export type BackdropProps = JSX.IntrinsicElements['group'] & {
+export type BackdropProps = ThreeElements['group'] & {
     floor?: number;
     segments?: number;
     receiveShadow?: boolean;

package/core/Billboard.d.ts

@@ -1,9 +1,10 @@
 import { Group } from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type BillboardProps = {
+export type BillboardProps = Omit<ThreeElements['group'], 'ref'> & {
     follow?: boolean;
     lockX?: boolean;
     lockY?: boolean;
     lockZ?: boolean;
-} & JSX.IntrinsicElements['group'];
+};
 export declare const Billboard: ForwardRefComponent<BillboardProps, Group>;

package/core/Billboard.js

@@ -3,14 +3,14 @@ import * as React from 'react';
 import { Quaternion } from 'three';
 import { useFrame } from '@react-three/fiber';
 
-/**
- * Wraps children in a billboarded group. Sample usage:
- *
- * ```js
- * <Billboard>
- *   <Text>hi</Text>
- * </Billboard>
- * ```
+/**
+ * Wraps children in a billboarded group. Sample usage:
+ *
+ * ```js
+ * <Billboard>
+ *   <Text>hi</Text>
+ * </Billboard>
+ * ```
  */
 const Billboard = /* @__PURE__ */React.forwardRef(function Billboard({
   children,

package/core/Bounds.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as THREE from 'three';
+import { ThreeElements } from '@react-three/fiber';
 export type SizeProps = {
     box: THREE.Box3;
     size: THREE.Vector3;
@@ -22,7 +23,7 @@ export type BoundsApi = {
     fit(): BoundsApi;
     clip(): BoundsApi;
 };
-export type BoundsProps = JSX.IntrinsicElements['group'] & {
+export type BoundsProps = Omit<ThreeElements['group'], 'ref'> & {
     maxDuration?: number;
     margin?: number;
     observe?: boolean;

package/core/Bounds.js

@@ -124,8 +124,8 @@ function Bounds({
         t.current = 0;
         return this;
       },
-      /**
-       * @deprecated Use moveTo and lookAt instead
+      /**
+       * @deprecated Use moveTo and lookAt instead
        */
       to({
         position,

package/core/Bvh.d.ts

@@ -1,3 +1,4 @@
+import { ThreeElements } from '@react-three/fiber';
 import * as React from 'react';
 import { Mesh, Group } from 'three';
 import { SplitStrategy } from 'three-mesh-bvh';
@@ -10,9 +11,9 @@ export interface BVHOptions {
     maxLeafTris?: number;
     indirect?: boolean;
 }
-export type BvhProps = BVHOptions & JSX.IntrinsicElements['group'] & {
+export type BvhProps = BVHOptions & ThreeElements['group'] & {
     enabled?: boolean;
     firstHitOnly?: boolean;
 };
-export declare function useBVH(mesh: React.MutableRefObject<Mesh | undefined>, options?: BVHOptions): void;
+export declare function useBVH(mesh: React.RefObject<Mesh | undefined>, options?: BVHOptions): void;
 export declare const Bvh: ForwardRefComponent<BvhProps, Group>;

package/core/Bvh.js

@@ -6,8 +6,8 @@ import { SAH, acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 't
 
 const isMesh = child => child.isMesh;
 
-/**
- * @deprecated Use the Bvh component instead
+/**
+ * @deprecated Use the Bvh component instead
  */
 function useBVH(mesh, options) {
   options = {

package/core/CameraControls.d.ts

@@ -1,8 +1,8 @@
 import { EventDispatcher, OrthographicCamera, PerspectiveCamera } from 'three';
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ThreeElement } from '@react-three/fiber';
 import CameraControlsImpl from 'camera-controls';
-import { ForwardRefComponent } from '../helpers/ts-utils';
-export type CameraControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Node<CameraControlsImpl, typeof CameraControlsImpl>, {
+import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
+export type CameraControlsProps = Omit<Overwrite<ThreeElement<typeof CameraControlsImpl>, {
     camera?: PerspectiveCamera | OrthographicCamera;
     domElement?: HTMLElement;
     makeDefault?: boolean;
@@ -17,6 +17,6 @@ export type CameraControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber
     }) => void;
     events?: boolean;
     regress?: boolean;
-}>, 'ref' | keyof EventDispatcher>;
+}>, 'ref' | 'args' | keyof EventDispatcher>;
 export declare const CameraControls: ForwardRefComponent<CameraControlsProps, CameraControlsImpl>;
 export type CameraControls = CameraControlsImpl;

package/core/CatmullRomLine.d.ts

@@ -1,11 +1,10 @@
 import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type Props = Omit<LineProps, 'ref'> & {
+export type CatmullRomLineProps = Omit<LineProps, 'ref'> & {
     closed?: boolean;
     curveType?: 'centripetal' | 'chordal' | 'catmullrom';
     tension?: number;
     segments?: number;
 };
-export declare const CatmullRomLine: ForwardRefComponent<Props, Line2>;
-export {};
+export declare const CatmullRomLine: ForwardRefComponent<CatmullRomLineProps, Line2>;

package/core/Caustics.d.ts

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type CausticsProps = JSX.IntrinsicElements['group'] & {
+export type CausticsProps = Omit<ThreeElements['group'], 'ref'> & {
     frames?: number;
     debug?: boolean;
     causticsOnly: boolean;
@@ -13,23 +13,20 @@ type CausticsProps = JSX.IntrinsicElements['group'] & {
     intensity?: number;
     color?: ReactThreeFiber.Color;
     resolution?: number;
-    lightSource?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>;
+    lightSource?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>;
 };
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            causticsProjectionMaterial: ReactThreeFiber.MeshNormalMaterialProps & {
-                viewMatrix?: {
-                    value: THREE.Matrix4;
-                };
-                color?: ReactThreeFiber.Color;
-                causticsTexture?: THREE.Texture;
-                causticsTextureB?: THREE.Texture;
-                lightProjMatrix?: THREE.Matrix4;
-                lightViewMatrix?: THREE.Matrix4;
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        causticsProjectionMaterial: ThreeElements['meshNormalMaterial'] & {
+            viewMatrix?: {
+                value: THREE.Matrix4;
             };
-        }
+            color?: ReactThreeFiber.Color;
+            causticsTexture?: THREE.Texture;
+            causticsTextureB?: THREE.Texture;
+            lightProjMatrix?: THREE.Matrix4;
+            lightViewMatrix?: THREE.Matrix4;
+        };
     }
 }
 export declare const Caustics: ForwardRefComponent<CausticsProps, THREE.Group>;
-export {};

package/core/Center.d.ts

@@ -1,4 +1,5 @@
 import { Box3, Vector3, Sphere, Group, Object3D } from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type OnCenterCallbackProps = {
     parent: Object3D;
@@ -13,7 +14,7 @@ export type OnCenterCallbackProps = {
     horizontalAlignment: number;
     depthAlignment: number;
 };
-export type CenterProps = {
+export type CenterProps = Omit<ThreeElements['group'], 'ref'> & {
     top?: boolean;
     right?: boolean;
     bottom?: boolean;
@@ -28,4 +29,4 @@ export type CenterProps = {
     onCentered?: (props: OnCenterCallbackProps) => void;
     cacheKey?: any;
 };
-export declare const Center: ForwardRefComponent<JSX.IntrinsicElements['group'] & CenterProps, Group>;
+export declare const Center: ForwardRefComponent<CenterProps, Group>;

package/core/Clone.d.ts

@@ -1,15 +1,15 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { MeshProps } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type CloneProps = {
+import { ThreeElements } from '@react-three/fiber';
+export type CloneProps = Omit<ThreeElements['group'], 'ref' | 'children'> & {
     object: THREE.Object3D | THREE.Object3D[];
     children?: React.ReactNode;
     deep?: boolean | 'materialsOnly' | 'geometriesOnly';
     keys?: string[];
-    inject?: MeshProps | React.ReactNode | ((object: THREE.Object3D) => React.ReactNode);
+    inject?: ThreeElements['mesh'] | React.ReactNode | ((object: THREE.Object3D) => React.ReactNode);
     castShadow?: boolean;
     receiveShadow?: boolean;
     isChild?: boolean;
 };
-export declare const Clone: ForwardRefComponent<Omit<JSX.IntrinsicElements['group'], 'children'> & CloneProps, THREE.Group>;
+export declare const Clone: ForwardRefComponent<CloneProps, THREE.Group>;

package/core/Cloud.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"),n=require("@react-three/fiber"),a=require("./Texture.cjs.js"),o=require("../helpers/deprecated.cjs.js");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 l=u(e),i=c(t);const s=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,m=new r.Vector3,p=new r.Quaternion,g=new r.Vector3,h=i.createContext(null),y=i.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:u="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:c,limit:y=200,frustumCulled:x,...v},b)=>{var M,w;const C=i.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float cloudOpacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = cloudOpacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=i.useRef(null),O=i.useRef([]),A=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>1)))),[y]),j=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>[1,1,1])).flat())),[y]),R=a.useTexture(u);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),I=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),s.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(m,p,g),_=0;_<O.current.length;_++)U=O.current[_],U.ref.current.matrixWorld.decompose(d,f,g),d.add(I.copy(U.position).applyQuaternion(f).multiply(g)),f.copy(p).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),g.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(d,f,g).premultiply(s),U.dist=d.distanceTo(m);for(O.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<O.current.length;_++)U=O.current[_],A[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.cloudOpacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),i.useLayoutEffect((()=>{const e=Math.min(y,void 0!==c?c:y,O.current.length);E.current.count=e,o.setUpdateRange(E.current.instanceMatrix,{offset:0,count:16*e}),E.current.instanceColor&&o.setUpdateRange(E.current.instanceColor,{offset:0,count:3*e}),o.setUpdateRange(E.current.geometry.attributes.cloudOpacity,{offset:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1];const P=Math.max(D[0],D[1]);return D=[D[0]/P,D[1]/P],i.createElement("group",l.default({ref:b},v),i.createElement(h.Provider,{value:O},e,i.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,y],frustumCulled:x},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),i.createElement("planeGeometry",{args:[...D]},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-cloudOpacity",args:[A,1]})),i.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),x=i.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:o=20,color:u="#ffffff",fade:c=10,volume:s=6,smallestVolume:d=.25,distribute:f=null,growth:m=4,concentrate:p="inside",seed:g=Math.random(),...y},x)=>{function v(){const e=1e4*Math.sin(g++);return e-Math.floor(e)}const b=i.useContext(h),M=i.useRef(null),w=i.useId(),C=i.useMemo((()=>[...new Array(o)].map(((e,t)=>({segments:o,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:w,index:t,ref:M,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/o)})))),[o,w]);return i.useLayoutEffect((()=>{C.forEach(((r,l)=>{n.applyProps(r,{volume:s,color:u,speed:t,growth:m,opacity:e,fade:c,bounds:a,density:Math.max(.5,v()),rotationFactor:Math.max(.2,.5*v())*t});const i=null==f?void 0:f(r,l);var g;(i||o>1)&&r.position.copy(r.bounds).multiply(null!==(g=null==i?void 0:i.point)&&void 0!==g?g:{x:2*v()-1,y:2*v()-1,z:2*v()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),b=Math.max(h,y,x);r.length=1,h===b&&(r.length-=h/r.bounds.x),y===b&&(r.length-=y/r.bounds.y),x===b&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==i?void 0:i.volume)?i.volume:Math.max(Math.max(0,d),"random"===p?v():"inside"===p?r.length:1-r.length))*s}))}),[p,a,c,u,e,m,s,g,o,t]),i.useLayoutEffect((()=>{const e=C;return b.current=[...b.current,...e],()=>{b.current=b.current.filter((e=>e.uuid!==w))}}),[C]),i.useImperativeHandle(x,(()=>M.current),[]),i.createElement("group",l.default({ref:M},y))})),v=i.forwardRef(((e,t)=>i.useContext(h)?i.createElement(x,l.default({ref:t},e)):i.createElement(y,null,i.createElement(x,l.default({ref:t},e)))));exports.Cloud=v,exports.CloudInstance=x,exports.Clouds=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),a=require("./Texture.cjs.js"),o=require("../helpers/deprecated.cjs.js");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 l=u(e),i=c(t);const s=new r.Matrix4,d=new r.Vector3,f=new r.Quaternion,m=new r.Vector3,p=new r.Quaternion,g=new r.Vector3,h=i.createContext(null),y=i.forwardRef((({children:e,material:t=r.MeshLambertMaterial,texture:u="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",range:c,limit:y=200,frustumCulled:x,...v},b)=>{var M,w;const C=i.useMemo((()=>class extends t{constructor(){super();const e=parseInt(r.REVISION.replace(/\D+/g,""))>=154?"opaque_fragment":"output_fragment";this.onBeforeCompile=t=>{t.vertexShader="attribute float cloudOpacity;\n               varying float vOpacity;\n              "+t.vertexShader.replace("#include <fog_vertex>","#include <fog_vertex>\n                 vOpacity = cloudOpacity;\n                "),t.fragmentShader="varying float vOpacity;\n              "+t.fragmentShader.replace(`#include <${e}>`,`#include <${e}>\n                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);\n                `)}}}),[t]);n.extend({CloudMaterial:C});const E=i.useRef(null),O=i.useRef([]),A=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>1)))),[y]),j=i.useMemo((()=>new Float32Array(Array.from({length:y},(()=>[1,1,1])).flat())),[y]),R=a.useTexture(u);let U,V=0,_=0;const q=new r.Quaternion,F=new r.Vector3(0,0,1),I=new r.Vector3;n.useFrame(((e,t)=>{for(V=e.clock.getElapsedTime(),s.copy(E.current.matrixWorld).invert(),e.camera.matrixWorld.decompose(m,p,g),_=0;_<O.current.length;_++)U=O.current[_],U.ref.current.matrixWorld.decompose(d,f,g),d.add(I.copy(U.position).applyQuaternion(f).multiply(g)),f.copy(p).multiply(q.setFromAxisAngle(F,U.rotation+=t*U.rotationFactor)),g.multiplyScalar(U.volume+(1+Math.sin(V*U.density*U.speed))/2*U.growth),U.matrix.compose(d,f,g).premultiply(s),U.dist=d.distanceTo(m);for(O.current.sort(((e,t)=>t.dist-e.dist)),_=0;_<O.current.length;_++)U=O.current[_],A[_]=U.opacity*(U.dist<U.fade-1?U.dist/U.fade:1),E.current.setMatrixAt(_,U.matrix),E.current.setColorAt(_,U.color);E.current.geometry.attributes.cloudOpacity.needsUpdate=!0,E.current.instanceMatrix.needsUpdate=!0,E.current.instanceColor&&(E.current.instanceColor.needsUpdate=!0)})),i.useLayoutEffect((()=>{const e=Math.min(y,void 0!==c?c:y,O.current.length);E.current.count=e,o.setUpdateRange(E.current.instanceMatrix,{start:0,count:16*e}),E.current.instanceColor&&o.setUpdateRange(E.current.instanceColor,{start:0,count:3*e}),o.setUpdateRange(E.current.geometry.attributes.cloudOpacity,{start:0,count:e})}));let D=[null!==(M=R.image.width)&&void 0!==M?M:1,null!==(w=R.image.height)&&void 0!==w?w:1];const P=Math.max(D[0],D[1]);return D=[D[0]/P,D[1]/P],i.createElement("group",l.default({ref:b},v),i.createElement(h.Provider,{value:O},e,i.createElement("instancedMesh",{matrixAutoUpdate:!1,ref:E,args:[null,null,y],frustumCulled:x},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"instanceColor",args:[j,3]}),i.createElement("planeGeometry",{args:[...D]},i.createElement("instancedBufferAttribute",{usage:r.DynamicDrawUsage,attach:"attributes-cloudOpacity",args:[A,1]})),i.createElement("cloudMaterial",{key:t.name,map:R,transparent:!0,depthWrite:!1}))))})),x=i.forwardRef((({opacity:e=1,speed:t=0,bounds:a=[5,1,1],segments:o=20,color:u="#ffffff",fade:c=10,volume:s=6,smallestVolume:d=.25,distribute:f=null,growth:m=4,concentrate:p="inside",seed:g=Math.random(),...y},x)=>{function v(){const e=1e4*Math.sin(g++);return e-Math.floor(e)}const b=i.useContext(h),M=i.useRef(null),w=i.useId(),C=i.useMemo((()=>[...new Array(o)].map(((e,t)=>({segments:o,bounds:new r.Vector3(1,1,1),position:new r.Vector3,uuid:w,index:t,ref:M,dist:0,matrix:new r.Matrix4,color:new r.Color,rotation:t*(Math.PI/o)})))),[o,w]);return i.useLayoutEffect((()=>{C.forEach(((r,l)=>{n.applyProps(r,{volume:s,color:u,speed:t,growth:m,opacity:e,fade:c,bounds:a,density:Math.max(.5,v()),rotationFactor:Math.max(.2,.5*v())*t});const i=null==f?void 0:f(r,l);var g;(i||o>1)&&r.position.copy(r.bounds).multiply(null!==(g=null==i?void 0:i.point)&&void 0!==g?g:{x:2*v()-1,y:2*v()-1,z:2*v()-1});const h=Math.abs(r.position.x),y=Math.abs(r.position.y),x=Math.abs(r.position.z),b=Math.max(h,y,x);r.length=1,h===b&&(r.length-=h/r.bounds.x),y===b&&(r.length-=y/r.bounds.y),x===b&&(r.length-=x/r.bounds.z),r.volume=(void 0!==(null==i?void 0:i.volume)?i.volume:Math.max(Math.max(0,d),"random"===p?v():"inside"===p?r.length:1-r.length))*s}))}),[p,a,c,u,e,m,s,g,o,t]),i.useLayoutEffect((()=>{const e=C;return b.current=[...b.current,...e],()=>{b.current=b.current.filter((e=>e.uuid!==w))}}),[C]),i.useImperativeHandle(x,(()=>M.current),[]),i.createElement("group",l.default({ref:M},y))})),v=i.forwardRef(((e,t)=>i.useContext(h)?i.createElement(x,l.default({ref:t},e)):i.createElement(y,null,i.createElement(x,l.default({ref:t},e)))));exports.Cloud=v,exports.CloudInstance=x,exports.Clouds=y;

package/core/Cloud.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { Color, Group, Vector3, Material, MeshLambertMaterial, Matrix4 } from 'three';
-import { MaterialNode, ReactThreeFiber } from '@react-three/fiber';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            cloudMaterial: MaterialNode<MeshLambertMaterial, typeof MeshLambertMaterial>;
-        }
+import { ReactThreeFiber, ThreeElement, ThreeElements } from '@react-three/fiber';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        cloudMaterial: ThreeElement<typeof MeshLambertMaterial>;
     }
 }
 type CloudState = {
@@ -18,7 +16,7 @@ type CloudState = {
     position: Vector3;
     volume: number;
     length: number;
-    ref: React.MutableRefObject<Group>;
+    ref: React.RefObject<Group>;
     speed: number;
     growth: number;
     opacity: number;
@@ -28,14 +26,14 @@ type CloudState = {
     rotationFactor: number;
     color: Color;
 };
-type CloudsProps = JSX.IntrinsicElements['group'] & {
+export type CloudsProps = Omit<ThreeElements['group'], 'ref'> & {
     texture?: string;
     limit?: number;
     range?: number;
     material?: typeof Material;
     frustumCulled?: boolean;
 };
-type CloudProps = JSX.IntrinsicElements['group'] & {
+export type CloudProps = Omit<ThreeElements['group'], 'ref'> & {
     seed?: number;
     segments?: number;
     bounds?: ReactThreeFiber.Vector3;
@@ -53,7 +51,47 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
     opacity?: number;
     color?: ReactThreeFiber.Color;
 };
-export declare const Clouds: React.ForwardRefExoticComponent<Omit<CloudsProps, "ref"> & React.RefAttributes<Group>>;
-export declare const CloudInstance: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;
-export declare const Cloud: React.ForwardRefExoticComponent<Omit<CloudProps, "ref"> & React.RefAttributes<Group>>;
+export declare const Clouds: 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<Group<import("three").Object3DEventMap>, ReactThreeFiber.MathProps<Group<import("three").Object3DEventMap>> & ReactThreeFiber.ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & {
+    texture?: string;
+    limit?: number;
+    range?: number;
+    material?: typeof Material;
+    frustumCulled?: boolean;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+export declare const CloudInstance: 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<Group<import("three").Object3DEventMap>, ReactThreeFiber.MathProps<Group<import("three").Object3DEventMap>> & ReactThreeFiber.ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & {
+    seed?: number;
+    segments?: number;
+    bounds?: ReactThreeFiber.Vector3;
+    concentrate?: "random" | "inside" | "outside";
+    scale?: ReactThreeFiber.Vector3;
+    volume?: number;
+    smallestVolume?: number;
+    distribute?: (cloud: CloudState, index: number) => {
+        point: Vector3;
+        volume?: number;
+    };
+    growth?: number;
+    speed?: number;
+    fade?: number;
+    opacity?: number;
+    color?: ReactThreeFiber.Color;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
+export declare const Cloud: 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<Group<import("three").Object3DEventMap>, ReactThreeFiber.MathProps<Group<import("three").Object3DEventMap>> & ReactThreeFiber.ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & {
+    seed?: number;
+    segments?: number;
+    bounds?: ReactThreeFiber.Vector3;
+    concentrate?: "random" | "inside" | "outside";
+    scale?: ReactThreeFiber.Vector3;
+    volume?: number;
+    smallestVolume?: number;
+    distribute?: (cloud: CloudState, index: number) => {
+        point: Vector3;
+        volume?: number;
+    };
+    growth?: number;
+    speed?: number;
+    fade?: number;
+    opacity?: number;
+    color?: ReactThreeFiber.Color;
+} & React.RefAttributes<Group<import("three").Object3DEventMap>>>;
 export {};

package/core/Cloud.js

@@ -92,17 +92,17 @@ const Clouds = /* @__PURE__ */React.forwardRef(({
     const count = Math.min(limit, range !== undefined ? range : limit, clouds.current.length);
     instance.current.count = count;
     setUpdateRange(instance.current.instanceMatrix, {
-      offset: 0,
+      start: 0,
       count: count * 16
     });
     if (instance.current.instanceColor) {
       setUpdateRange(instance.current.instanceColor, {
-        offset: 0,
+        start: 0,
         count: count * 3
       });
     }
     setUpdateRange(instance.current.geometry.attributes.cloudOpacity, {
-      offset: 0,
+      start: 0,
       count: count
     });
   });

package/core/ComputedAttribute.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");function u(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 u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),a=n(t);exports.ComputedAttribute=({compute:e,name:t,...u})=>{const[n]=a.useState((()=>new r.BufferAttribute(new Float32Array(0),1))),f=a.useRef(null);return a.useLayoutEffect((()=>{if(f.current){var t;const r=null!==(t=f.current.parent)&&void 0!==t?t:f.current.__r3f.parent,u=e(r);f.current.copy(u)}}),[e]),a.createElement("primitive",c.default({ref:f,object:n,attach:`attributes-${t}`},u))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three");function u(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 u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=u(e),a=n(t);exports.ComputedAttribute=({compute:e,name:t,...u})=>{const[n]=a.useState((()=>new r.BufferAttribute(new Float32Array(0),1))),o=a.useRef(null);return a.useLayoutEffect((()=>{if(o.current){var t;const r=null!==(t=o.current.parent)&&void 0!==t?t:o.current.__r3f.parent.object,u=e(r);o.current.copy(u)}}),[e]),a.createElement("primitive",c.default({ref:o,object:n,attach:`attributes-${t}`},u))};

package/core/ComputedAttribute.d.ts

@@ -1,9 +1,8 @@
-import { BufferAttributeProps } from '@react-three/fiber';
+import { ThreeElements } from '@react-three/fiber';
 import * as React from 'react';
 import { BufferAttribute, BufferGeometry } from 'three';
-type Props = {
+export type ComputedAttributeProps = Omit<ThreeElements['bufferAttribute'], 'args'> & {
     compute: (geometry: BufferGeometry) => BufferAttribute;
     name: string;
 };
-export declare const ComputedAttribute: ({ compute, name, ...props }: React.PropsWithChildren<Props & BufferAttributeProps>) => React.JSX.Element;
-export {};
+export declare const ComputedAttribute: ({ compute, name, ...props }: ComputedAttributeProps) => React.JSX.Element;

package/core/ComputedAttribute.js

@@ -2,10 +2,10 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { BufferAttribute } from 'three';
 
-/**
- * Used exclusively as a child of a BufferGeometry.
- * Computes the BufferAttribute by calling the `compute` function
- * and attaches the attribute to the geometry.
+/**
+ * Used exclusively as a child of a BufferGeometry.
+ * Computes the BufferAttribute by calling the `compute` function
+ * and attaches the attribute to the geometry.
  */
 const ComputedAttribute = ({
   compute,
@@ -18,7 +18,7 @@ const ComputedAttribute = ({
     if (primitive.current) {
       var _ref;
       // @ts-expect-error brittle
-      const parent = (_ref = primitive.current.parent) !== null && _ref !== void 0 ? _ref : primitive.current.__r3f.parent;
+      const parent = (_ref = primitive.current.parent) !== null && _ref !== void 0 ? _ref : primitive.current.__r3f.parent.object;
       const attr = compute(parent);
       primitive.current.copy(attr);
     }

package/core/ContactShadows.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ContactShadowsProps = {
+export type ContactShadowsProps = Omit<ThreeElements['group'], 'ref' | 'scale'> & {
     opacity?: number;
     width?: number;
     height?: number;
@@ -14,4 +15,4 @@ export type ContactShadowsProps = {
     color?: THREE.ColorRepresentation;
     depthWrite?: boolean;
 };
-export declare const ContactShadows: ForwardRefComponent<Omit<JSX.IntrinsicElements['group'], 'scale'> & ContactShadowsProps, THREE.Group>;
+export declare const ContactShadows: ForwardRefComponent<ContactShadowsProps, THREE.Group>;

package/core/CubeCamera.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { Fog, FogExp2, Texture } from 'three';
 import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
 export type CubeCameraOptions = {
     resolution?: number;
     near?: number;
@@ -13,9 +14,8 @@ export declare function useCubeCamera({ resolution, near, far, envMap, fog }?: C
     camera: THREE.CubeCamera;
     update: () => void;
 };
-type Props = Omit<JSX.IntrinsicElements['group'], 'children'> & {
+export type CubeCameraProps = Omit<ThreeElements['group'], 'children'> & {
     children?: (tex: Texture) => React.ReactNode;
     frames?: number;
 } & CubeCameraOptions;
-export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: Props): React.JSX.Element;
-export {};
+export declare function CubeCamera({ children, frames, resolution, near, far, envMap, fog, ...props }: CubeCameraProps): React.JSX.Element;

package/core/CubeTexture.d.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { CubeTexture as _CubeTexture, Texture } from 'three';
-type Options = {
+export type CubeTextureOptions = {
     path: string;
 };
-export declare function useCubeTexture(files: string[], { path }: Options): _CubeTexture;
+export declare function useCubeTexture(files: string[], { path }: CubeTextureOptions): _CubeTexture;
 export declare namespace useCubeTexture {
-    var preload: (files: string[], { path }: Options) => undefined;
+    var preload: (files: string[], { path }: CubeTextureOptions) => void;
 }
-type CubeTextureProps = {
+export type CubeTextureProps = CubeTextureOptions & {
     children?: (tex: Texture) => React.ReactNode;
     files: Parameters<typeof useCubeTexture>[0];
-} & Options;
+};
 export declare function CubeTexture({ children, files, ...options }: CubeTextureProps): React.JSX.Element;
-export {};

package/core/CubeTexture.js

@@ -5,17 +5,12 @@ import { useLoader } from '@react-three/fiber';
 function useCubeTexture(files, {
   path
 }) {
-  // @ts-ignore
-  const [cubeTexture] = useLoader(
-  // @ts-ignore
-  CubeTextureLoader, [files], loader => loader.setPath(path));
+  const [cubeTexture] = useLoader(CubeTextureLoader, [files], loader => loader.setPath(path));
   return cubeTexture;
 }
 useCubeTexture.preload = (files, {
   path
-}) => useLoader.preload(
-// @ts-ignore
-CubeTextureLoader, [files], loader => loader.setPath(path));
+}) => useLoader.preload(CubeTextureLoader, [files], loader => loader.setPath(path));
 function CubeTexture({
   children,
   files,

package/core/CubicBezierLine.d.ts

@@ -2,12 +2,11 @@ import { Vector3 } from 'three';
 import { Line2 } from 'three-stdlib';
 import { LineProps } from './Line';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type Props = Omit<LineProps, 'points' | 'ref'> & {
+export type CubicBezierLineProps = Omit<LineProps, 'points' | 'ref'> & {
     start: Vector3 | [number, number, number];
     end: Vector3 | [number, number, number];
     midA: Vector3 | [number, number, number];
     midB: Vector3 | [number, number, number];
     segments?: number;
 };
-export declare const CubicBezierLine: ForwardRefComponent<Props, Line2>;
-export {};
+export declare const CubicBezierLine: ForwardRefComponent<CubicBezierLineProps, Line2>;

package/core/CurveModifier.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import * as THREE from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { Flow } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export interface CurveModifierProps {
-    children: React.ReactElement<JSX.IntrinsicElements['mesh']>;
+    children: React.ReactElement<ThreeElements['mesh']>;
     curve?: THREE.Curve<THREE.Vector3>;
 }
 export type CurveModifierRef = Flow;

package/core/Decal.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import * as THREE from 'three';
 import * as FIBER from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type DecalProps = Omit<JSX.IntrinsicElements['mesh'], 'children'> & {
+export type DecalProps = Omit<FIBER.ThreeElements['mesh'], 'ref' | 'children'> & {
     debug?: boolean;
-    mesh?: React.MutableRefObject<THREE.Mesh>;
+    mesh?: React.RefObject<THREE.Mesh>;
     position?: FIBER.Vector3;
     rotation?: FIBER.Euler | number;
     scale?: FIBER.Vector3;