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

package/core/Points.js

@@ -62,8 +62,8 @@ const context = /* @__PURE__ */React.createContext(null);
 const parentMatrix = /* @__PURE__ */new THREE.Matrix4();
 const position = /* @__PURE__ */new THREE.Vector3();
 
-/**
- * Instance implementation, relies on react + context to update the attributes based on the children of this component
+/**
+ * Instance implementation, relies on react + context to update the attributes based on the children of this component
  */
 const PointsInstances = /* @__PURE__ */React.forwardRef(({
   children,
@@ -116,21 +116,15 @@ const PointsInstances = /* @__PURE__ */React.forwardRef(({
     raycast: () => null
   }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-position",
-    count: positions.length / 3,
-    array: positions,
-    itemSize: 3,
+    args: [positions, 3],
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-color",
-    count: colors.length / 3,
-    array: colors,
-    itemSize: 3,
+    args: [colors, 3],
     usage: THREE.DynamicDrawUsage
   }), /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-size",
-    count: sizes.length,
-    array: sizes,
-    itemSize: 1,
+    args: [sizes, 1],
     usage: THREE.DynamicDrawUsage
   })), /*#__PURE__*/React.createElement(context.Provider, {
     value: api
@@ -157,8 +151,8 @@ const Point = /* @__PURE__ */React.forwardRef(({
   }, props), children);
 });
 
-/**
- * Buffer implementation, relies on complete buffers of the correct number, leaves it to the user to update them
+/**
+ * Buffer implementation, relies on complete buffers of the correct number, leaves it to the user to update them
  */
 
 const PointsBuffer = /* @__PURE__ */React.forwardRef(({
@@ -181,21 +175,17 @@ const PointsBuffer = /* @__PURE__ */React.forwardRef(({
     ref: pointsRef
   }, props), /*#__PURE__*/React.createElement("bufferGeometry", null, /*#__PURE__*/React.createElement("bufferAttribute", {
     attach: "attributes-position",
-    count: positions.length / stride,
-    array: positions,
-    itemSize: stride,
+    args: [positions, 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';
-type Props = JSX.IntrinsicElements['positionalAudio'] & {
+export type PositionalAudioProps = Omit<ThreeElements['positionalAudio'], 'ref' | 'args'> & {
     url: string;
     distance?: number;
     loop?: boolean;
 };
-export declare const PositionalAudio: ForwardRefComponent<Props, PositionalAudioImpl>;
-export {};
+export declare const PositionalAudio: ForwardRefComponent<PositionalAudioProps, PositionalAudioImpl>;

package/core/Preload.d.ts

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

package/core/QuadraticBezierLine.d.ts

@@ -1,16 +1,14 @@
 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';
-type Props = Omit<LineProps, 'points' | 'ref'> & {
+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'> & {
     start: Vector3 | [number, number, number];
     end: Vector3 | [number, number, number];
     mid?: Vector3 | [number, number, number];
     segments?: number;
 };
-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 {};
+export declare const QuadraticBezierLine: ForwardRefComponent<QuadraticBezierLineProps, QuadraticBezierLineRef>;

package/core/RenderCubeTexture.d.ts

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

package/core/RenderTexture.d.ts

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

package/core/RenderTexture.js

@@ -34,9 +34,10 @@ 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 ? void 0 : _fbo$texture.__r3f.parent;
+    let parent = (_fbo$texture = fbo.texture) == null || (_fbo$texture = _fbo$texture.__r3f.parent) == null ? void 0 : _fbo$texture.object;
     while (parent && !(parent instanceof THREE.Object3D)) {
-      parent = parent.__r3f.parent;
+      var _parent$__r3f$parent;
+      parent = (_parent$__r3f$parent = parent.__r3f.parent) == null ? void 0 : _parent$__r3f$parent.object;
     }
     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,10 +1,17 @@
 import * as THREE from 'three';
 import * as React from 'react';
-export type ResizeProps = JSX.IntrinsicElements['group'] & {
+import { ThreeElements } from '@react-three/fiber';
+export type ResizeProps = Omit<ThreeElements['group'], 'ref'> & {
     width?: boolean;
     height?: boolean;
     depth?: boolean;
     box3?: THREE.Box3;
     precise?: boolean;
 };
-export declare const Resize: React.ForwardRefExoticComponent<Omit<ResizeProps, "ref"> & React.RefAttributes<THREE.Group>>;
+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>>>;

package/core/RoundedBox.d.ts

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

package/core/Sampler.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Color, InstancedBufferAttribute, InstancedMesh, Mesh, Object3D, Vector3 } from 'three';
-import { GroupProps } from '@react-three/fiber';
+import { ThreeElements } from '@react-three/fiber';
 type SamplePayload = {
     position: Vector3;
     normal: Vector3;
@@ -11,7 +11,7 @@ type TransformPayload = SamplePayload & {
     dummy: Object3D;
     sampledMesh: Mesh;
 };
-type Props = {
+export type SamplerProps = Omit<ThreeElements['group'], 'ref'> & {
     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.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 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 {};

package/core/ScreenQuad.d.ts

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

package/core/ScreenSizer.d.ts

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

package/core/ScreenSizer.js

@@ -6,18 +6,18 @@ import { Vector3 } from 'three';
 import { calculateScaleFactor } from './calculateScaleFactor.js';
 
 const worldPos = /* @__PURE__ */new Vector3();
-/**
- * Wraps children in an `Object3D` and attempts to scale from
- * world units to screen units * scale factor.
- *
- * For example, this will render a box of roughly 1x1 pixel size,
- * independently of how far the camera is.
- *
- * ```jsx
- * <ScreenSizer>
- *   <Box />
- * </ScreenSizer>
- * ```
+/**
+ * Wraps children in an `Object3D` and attempts to scale from
+ * world units to screen units * scale factor.
+ *
+ * For example, this will render a box of roughly 1x1 pixel size,
+ * independently of how far the camera is.
+ *
+ * ```jsx
+ * <ScreenSizer>
+ *   <Box />
+ * </ScreenSizer>
+ * ```
  */
 const ScreenSizer = /* @__PURE__ */forwardRef(({
   scale = 1,

package/core/ScreenSpace.d.ts

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

package/core/Segments.d.ts

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

package/core/Shadow.d.ts

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

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),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"}))};
+"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"}))};

package/core/ShadowAlpha.d.ts

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

package/core/ShadowAlpha.js

@@ -2,14 +2,14 @@ import { useFrame } from '@react-three/fiber';
 import * as React from 'react';
 import * as THREE from 'three';
 
-/**
- * Integration and compilation: Faraz Shaikh (https://twitter.com/CantBeFaraz)
- *
- * Based on:
- *  - https://gkjohnson.github.io/threejs-sandbox/screendoor-transparency/ by Garrett Johnson (https://github.com/gkjohnson)
- *
- * Note:
- *  - Must depreciate in favor of https://github.com/mrdoob/three.js/issues/10600 when it's ready.
+/**
+ * Integration and compilation: Faraz Shaikh (https://twitter.com/CantBeFaraz)
+ *
+ * Based on:
+ *  - https://gkjohnson.github.io/threejs-sandbox/screendoor-transparency/ by Garrett Johnson (https://github.com/gkjohnson)
+ *
+ * Note:
+ *  - Must depreciate in favor of https://github.com/mrdoob/three.js/issues/10600 when it's ready.
  */
 function ShadowAlpha({
   opacity,
@@ -80,7 +80,7 @@ function ShadowAlpha({
   }, []);
   useFrame(() => {
     var _r3f;
-    const parent = (_r3f = depthMaterialRef.current.__r3f) == null ? void 0 : _r3f.parent;
+    const parent = (_r3f = depthMaterialRef.current.__r3f) == null || (_r3f = _r3f.parent) == null ? void 0 : _r3f.object;
     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';
-type Props = {
+export type SkyProps = {
     distance?: number;
     sunPosition?: ReactThreeFiber.Vector3;
     inclination?: number;
@@ -13,5 +13,4 @@ type Props = {
     turbidity?: number;
 };
 export declare function calcPosFromAngles(inclination: number, azimuth: number, vector?: Vector3): Vector3;
-export declare const Sky: ForwardRefComponent<Props, SkyImpl>;
-export {};
+export declare const Sky: ForwardRefComponent<SkyProps, SkyImpl>;

package/core/Sparkles.d.ts

@@ -1,15 +1,6 @@
 import * as THREE from 'three';
-import { PointsProps, MaterialNode } from '@react-three/fiber';
+import { ThreeElement, ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-interface Props {
-    count?: number;
-    speed?: number | Float32Array;
-    opacity?: number | Float32Array;
-    color?: THREE.ColorRepresentation | Float32Array;
-    size?: number | Float32Array;
-    scale?: number | [number, number, number] | THREE.Vector3;
-    noise?: number | [number, number, number] | THREE.Vector3 | Float32Array;
-}
 declare class SparklesImplMaterial extends THREE.ShaderMaterial {
     constructor();
     get time(): number;
@@ -17,12 +8,19 @@ declare class SparklesImplMaterial extends THREE.ShaderMaterial {
     get pixelRatio(): number;
     set pixelRatio(value: number);
 }
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            sparklesImplMaterial: MaterialNode<SparklesImplMaterial, typeof SparklesImplMaterial>;
-        }
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        sparklesImplMaterial: ThreeElement<typeof SparklesImplMaterial>;
     }
 }
-export declare const Sparkles: ForwardRefComponent<Props & PointsProps, THREE.Points>;
+export type SparklesProps = Omit<ThreeElements['points'], 'ref'> & {
+    count?: number;
+    speed?: number | Float32Array;
+    opacity?: number | Float32Array;
+    color?: THREE.ColorRepresentation | Float32Array;
+    size?: number | Float32Array;
+    scale?: number | [number, number, number] | THREE.Vector3;
+    noise?: number | [number, number, number] | THREE.Vector3 | Float32Array;
+};
+export declare const Sparkles: ForwardRefComponent<SparklesProps, THREE.Points>;
 export {};

package/core/Splat.d.ts

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
 export type SplatMaterialType = {
     alphaTest?: number;
     alphaHash?: boolean;
@@ -40,19 +41,16 @@ export type SharedState = {
     update(target: TargetMesh, camera: THREE.Camera, hashed: boolean): void;
     onProgress?: (event: ProgressEvent) => void;
 };
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            splatMaterial: SplatMaterialType & JSX.IntrinsicElements['shaderMaterial'];
-        }
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        splatMaterial: SplatMaterialType & ThreeElements['shaderMaterial'];
     }
 }
-type SplatProps = {
+export type SplatProps = {
     src: string;
     toneMapped?: boolean;
     alphaTest?: number;
     alphaHash?: boolean;
     chunkSize?: number;
-} & JSX.IntrinsicElements['mesh'];
+} & Omit<ThreeElements['mesh'], 'ref'>;
 export declare function Splat({ src, toneMapped, alphaTest, alphaHash, chunkSize, ...props }: SplatProps): React.JSX.Element;
-export {};

package/core/SpotLight.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { DepthTexture, SpotLight as SpotLightImpl, Texture } from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type SpotLightProps = JSX.IntrinsicElements['spotLight'] & {
+export type SpotLightProps = Omit<ThreeElements['spotLight'], 'ref'> & {
     depthBuffer?: DepthTexture;
     attenuation?: number;
     anglePower?: number;

package/core/SpriteAnimator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three"),u=require("./Instances.cjs.js"),a=require("./Billboard.cjs.js"),c=require("./useSpriteLoader.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}require("react-composer"),require("../helpers/deprecated.cjs.js");var o=l(e),i=s(r),m=s(n);const f=i.createContext(null);const p=new m.PlaneGeometry(1,1),d=i.forwardRef((({startFrame:e=0,endFrame:r,fps:n=30,frameName:l="",textureDataURL:s,textureImageURL:d,loop:h=!1,numberOfFrames:v=1,autoPlay:y=!0,animationNames:w,onStart:E,onEnd:F,onLoopEnd:b,onFrame:g,play:x,pause:S=!1,flipX:j=!1,alphaTest:R=0,children:A,asSprite:M=!1,offset:N,playBackwards:O=!1,resetOnEnd:q=!1,maxItems:z=1,instanceItems:D=[[0,0,0]],spriteDataset:L,canvasRenderingContext2DSettings:P,roundFramePosition:T=!1,meshProps:I={},...k},B)=>{const C=i.useRef(new m.Group),V=i.useRef(null),_=i.useRef(null),U=i.useRef(null),G=i.useRef(window.performance.now()),H=i.useRef(e),J=i.useRef(l),W=n>0?1e3/n:0,[X,K]=i.useState(new m.Texture),Q=i.useRef(0),[Y,Z]=i.useState(new m.Vector3(1,1,1)),$=j?-1:1,ee=i.useRef(S),re=i.useRef(N),te=i.useRef(!1),{spriteObj:ne,loadJsonAndTexture:ue}=c.useSpriteLoader(null,null,w,v,void 0,P),ae=i.useRef(l),ce=i.useCallback(((e,r)=>{if(null===r)v&&(Q.current=v,O&&(H.current=v-1),V.current=r);else{var t,n;V.current=r,V.current&&Array.isArray(V.current.frames)?Q.current=V.current.frames.length:V.current&&"object"==typeof V.current&&ae.current?Q.current=V.current.frames[ae.current].length:Q.current=0,O&&(H.current=Q.current-1);const{w:u,h:a}=c.getFirstFrame(null!==(t=null==(n=V.current)?void 0:n.frames)&&void 0!==t?t:[],ae.current).sourceSize,l=oe(u,a);Z(l),_.current&&(_.current.map=e)}K(e)}),[v,O]),le=i.useCallback((()=>{if(!V.current)return;const{meta:{size:e},frames:r}=V.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:l&&r[l]?r[l][0].sourceSize:{w:0,h:0};_.current&&_.current.map&&(_.current.map.wrapS=_.current.map.wrapT=m.RepeatWrapping,_.current.map.center.set(0,0),_.current.map.repeat.set(1*$/(e.w/t),1/(e.h/n)));const u=1/((e.h-1)/n);_.current&&_.current.map&&(_.current.map.offset.x=0,_.current.map.offset.y=1-u),E&&E({currentFrameName:null!=l?l:"",currentFrame:H.current})}),[$,l,E]),se=i.useMemo((()=>({current:re.current,offset:re.current,imageUrl:d,hasEnded:!1,ref:B})),[d,B]);i.useImperativeHandle(B,(()=>C.current),[]),i.useLayoutEffect((()=>{re.current=N}),[N]);const oe=(e,r)=>{var t;const n=new m.Vector3,u=r/e;return n.set(1,u,1),null==(t=U.current)||t.scale.copy(n),n};i.useEffect((()=>{var e;L?ce(null==L||null==(e=L.spriteTexture)?void 0:e.clone(),L.spriteData):d&&s&&ue(d,s)}),[ue,L,s,d,ce]),i.useEffect((()=>{var e;ne&&ce(null==ne||null==(e=ne.spriteTexture)?void 0:e.clone(),null==ne?void 0:ne.spriteData)}),[ne,ce]),i.useEffect((()=>{var e;(se.hasEnded=!1,V.current&&!0===O)?H.current=(null!==(e=V.current.frames.length)&&void 0!==e?e:0)-1:H.current=0}),[O,se]),i.useLayoutEffect((()=>{le()}),[X,j,le]),i.useEffect((()=>{y&&(ee.current=!1)}),[y]),i.useLayoutEffect((()=>{if(J.current!==l&&l&&(H.current=0,J.current=l,se.hasEnded=!1,W<=0&&(H.current=r||e||0),V.current)){const{w:e,h:r}=c.getFirstFrame(V.current.frames,l).sourceSize,t=oe(e,r);Z(t)}}),[l,W,se,r,e]);const ie=(e,r,t,n)=>{var u=void 0===N?se.current:N;const a=H.current;let c=0,l=0;oe(e,r);const s=T?Math.round((t.w-1)/e):(t.w-1)/e,o=T?Math.round((t.h-1)/r):(t.h-1)/r;if(!n[a])return;const{frame:{x:i,y:m},sourceSize:{w:f,h:p}}=n[a],d=1/s,h=1/o;if(_.current&&_.current.map&&(c=$>0?d*(i/f):d*(i/f)-_.current.map.repeat.x,l=Math.abs(1-h)-h*(m/p),_.current.map.offset.x=c,_.current.map.offset.y=l),null!=u){let e=Math.floor(u*n.length);e=Math.max(0,Math.min(e,n.length-1)),isNaN(e)&&(e=0),H.current=e}else O?H.current-=1:H.current+=1};return t.useFrame(((t,n)=>{var u,a;null!=(u=V.current)&&u.frames&&null!=(a=_.current)&&a.map&&(ee.current||se.hasEnded||!y&&!x||((()=>{if(null===(t=V.current)||!("meta"in t)||!("frames"in t))return;var t;const{meta:{size:n},frames:u}=V.current,{w:a,h:s}=c.getFirstFrame(u,l).sourceSize,o=Array.isArray(u)?u:l?u[l]:[],i=r||o.length-1;var m=void 0===N?se.current:N;if(W<=0)return H.current=r||e||0,void ie(a,s,n,o);const f=window.performance.now(),p=f-G.current;if(!(p<=W)){var d=O?H.current<0:H.current>i,v=O?H.current===i:0===H.current,y=O?H.current<0:H.current>=i;if(d){if(H.current=h&&null!=e?e:0,O&&(H.current=i),h?null==b||b({currentFrameName:null!=l?l:"",currentFrame:H.current}):(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),se.hasEnded=!q,q&&(ee.current=!0)),!h)return}else v&&(null==E||E({currentFrameName:null!=l?l:"",currentFrame:H.current}));void 0!==m&&y?!1===te.current&&(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),te.current=!0):te.current=!1,p<=W||(G.current=f-p%W,ie(a,s,n,o))}})(),null==g||g({currentFrameName:J.current,currentFrame:H.current})))})),i.createElement("group",o.default({},k,{ref:C,scale:function(e=new m.Vector3(1,1,1),r=1){return"number"==typeof r?e.multiplyScalar(r):Array.isArray(r)?e.multiply(new m.Vector3(...r)):r instanceof m.Vector3?e.multiply(r):void 0}(Y,k.scale)}),i.createElement(f.Provider,{value:se},M&&i.createElement(a.Billboard,null,i.createElement("mesh",o.default({ref:U,scale:1,geometry:p},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}))),!M&&i.createElement(u.Instances,o.default({geometry:p,limit:null!=z?z:1},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}),(null!=D?D:[0]).map(((e,r)=>i.createElement(u.Instance,o.default({key:r,ref:1===(null==D?void 0:D.length)?U:null,position:e,scale:1},I))))),A))}));exports.SpriteAnimator=d,exports.useSpriteAnimator=function(){return i.useContext(f)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),n=require("three"),u=require("./Instances.cjs.js"),a=require("./Billboard.cjs.js"),c=require("./useSpriteLoader.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}require("../helpers/deprecated.cjs.js");var o=l(e),i=s(r),m=s(n);const f=i.createContext(null);const p=new m.PlaneGeometry(1,1),d=i.forwardRef((({startFrame:e=0,endFrame:r,fps:n=30,frameName:l="",textureDataURL:s,textureImageURL:d,loop:h=!1,numberOfFrames:v=1,autoPlay:y=!0,animationNames:w,onStart:E,onEnd:F,onLoopEnd:b,onFrame:g,play:x,pause:S=!1,flipX:j=!1,alphaTest:R=0,children:A,asSprite:M=!1,offset:N,playBackwards:O=!1,resetOnEnd:z=!1,maxItems:q=1,instanceItems:D=[[0,0,0]],spriteDataset:L,canvasRenderingContext2DSettings:P,roundFramePosition:T=!1,meshProps:I={},...k},B)=>{const C=i.useRef(new m.Group),V=i.useRef(null),_=i.useRef(null),U=i.useRef(null),G=i.useRef(window.performance.now()),H=i.useRef(e),J=i.useRef(l),W=n>0?1e3/n:0,[X,K]=i.useState(new m.Texture),Q=i.useRef(0),[Y,Z]=i.useState(new m.Vector3(1,1,1)),$=j?-1:1,ee=i.useRef(S),re=i.useRef(N),te=i.useRef(!1),{spriteObj:ne,loadJsonAndTexture:ue}=c.useSpriteLoader(null,null,w,v,void 0,P),ae=i.useRef(l),ce=i.useCallback(((e,r)=>{if(null===r)v&&(Q.current=v,O&&(H.current=v-1),V.current=r);else{var t,n;V.current=r,V.current&&Array.isArray(V.current.frames)?Q.current=V.current.frames.length:V.current&&"object"==typeof V.current&&ae.current?Q.current=V.current.frames[ae.current].length:Q.current=0,O&&(H.current=Q.current-1);const{w:u,h:a}=c.getFirstFrame(null!==(t=null==(n=V.current)?void 0:n.frames)&&void 0!==t?t:[],ae.current).sourceSize,l=oe(u,a);Z(l),_.current&&(_.current.map=e)}K(e)}),[v,O]),le=i.useCallback((()=>{if(!V.current)return;const{meta:{size:e},frames:r}=V.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:l&&r[l]?r[l][0].sourceSize:{w:0,h:0};_.current&&_.current.map&&(_.current.map.wrapS=_.current.map.wrapT=m.RepeatWrapping,_.current.map.center.set(0,0),_.current.map.repeat.set(1*$/(e.w/t),1/(e.h/n)));const u=1/((e.h-1)/n);_.current&&_.current.map&&(_.current.map.offset.x=0,_.current.map.offset.y=1-u),E&&E({currentFrameName:null!=l?l:"",currentFrame:H.current})}),[$,l,E]),se=i.useMemo((()=>({current:re.current,offset:re.current,imageUrl:d,hasEnded:!1,ref:B})),[d,B]);i.useImperativeHandle(B,(()=>C.current),[]),i.useLayoutEffect((()=>{re.current=N}),[N]);const oe=(e,r)=>{var t;const n=new m.Vector3,u=r/e;return n.set(1,u,1),null==(t=U.current)||t.scale.copy(n),n};i.useEffect((()=>{var e;L?ce(null==L||null==(e=L.spriteTexture)?void 0:e.clone(),L.spriteData):d&&s&&ue(d,s)}),[ue,L,s,d,ce]),i.useEffect((()=>{var e;ne&&ce(null==ne||null==(e=ne.spriteTexture)?void 0:e.clone(),null==ne?void 0:ne.spriteData)}),[ne,ce]),i.useEffect((()=>{var e;(se.hasEnded=!1,V.current&&!0===O)?H.current=(null!==(e=V.current.frames.length)&&void 0!==e?e:0)-1:H.current=0}),[O,se]),i.useLayoutEffect((()=>{le()}),[X,j,le]),i.useEffect((()=>{y&&(ee.current=!1)}),[y]),i.useLayoutEffect((()=>{if(J.current!==l&&l&&(H.current=0,J.current=l,se.hasEnded=!1,W<=0&&(H.current=r||e||0),V.current)){const{w:e,h:r}=c.getFirstFrame(V.current.frames,l).sourceSize,t=oe(e,r);Z(t)}}),[l,W,se,r,e]);const ie=(e,r,t,n)=>{var u=void 0===N?se.current:N;const a=H.current;let c=0,l=0;oe(e,r);const s=T?Math.round((t.w-1)/e):(t.w-1)/e,o=T?Math.round((t.h-1)/r):(t.h-1)/r;if(!n[a])return;const{frame:{x:i,y:m},sourceSize:{w:f,h:p}}=n[a],d=1/s,h=1/o;if(_.current&&_.current.map&&(c=$>0?d*(i/f):d*(i/f)-_.current.map.repeat.x,l=Math.abs(1-h)-h*(m/p),_.current.map.offset.x=c,_.current.map.offset.y=l),null!=u){let e=Math.floor(u*n.length);e=Math.max(0,Math.min(e,n.length-1)),isNaN(e)&&(e=0),H.current=e}else O?H.current-=1:H.current+=1};return t.useFrame(((t,n)=>{var u,a;null!=(u=V.current)&&u.frames&&null!=(a=_.current)&&a.map&&(ee.current||se.hasEnded||!y&&!x||((()=>{if(null===(t=V.current)||!("meta"in t)||!("frames"in t))return;var t;const{meta:{size:n},frames:u}=V.current,{w:a,h:s}=c.getFirstFrame(u,l).sourceSize,o=Array.isArray(u)?u:l?u[l]:[],i=r||o.length-1;var m=void 0===N?se.current:N;if(W<=0)return H.current=r||e||0,void ie(a,s,n,o);const f=window.performance.now(),p=f-G.current;if(!(p<=W)){var d=O?H.current<0:H.current>i,v=O?H.current===i:0===H.current,y=O?H.current<0:H.current>=i;if(d){if(H.current=h&&null!=e?e:0,O&&(H.current=i),h?null==b||b({currentFrameName:null!=l?l:"",currentFrame:H.current}):(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),se.hasEnded=!z,z&&(ee.current=!0)),!h)return}else v&&(null==E||E({currentFrameName:null!=l?l:"",currentFrame:H.current}));void 0!==m&&y?!1===te.current&&(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),te.current=!0):te.current=!1,p<=W||(G.current=f-p%W,ie(a,s,n,o))}})(),null==g||g({currentFrameName:J.current,currentFrame:H.current})))})),i.createElement("group",o.default({},k,{ref:C,scale:function(e=new m.Vector3(1,1,1),r=1){return"number"==typeof r?e.multiplyScalar(r):Array.isArray(r)?e.multiply(new m.Vector3(...r)):r instanceof m.Vector3?e.multiply(r):void 0}(Y,k.scale)}),i.createElement(f.Provider,{value:se},M&&i.createElement(a.Billboard,null,i.createElement("mesh",o.default({ref:U,scale:1,geometry:p},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}))),!M&&i.createElement(u.Instances,o.default({geometry:p,limit:null!=q?q:1},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}),(null!=D?D:[0]).map(((e,r)=>i.createElement(u.Instance,o.default({key:r,ref:1===(null==D?void 0:D.length)?U:null,position:e,scale:1},I))))),A))}));exports.SpriteAnimator=d,exports.useSpriteAnimator=function(){return i.useContext(f)};

package/core/SpriteAnimator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Vector3 } from '@react-three/fiber';
+import { ThreeElements, Vector3 } from '@react-three/fiber';
 import * as THREE from 'three';
 import { Instances, Instance } from './Instances';
 import { SpriteData } from './useSpriteLoader';
@@ -42,7 +42,7 @@ export type SpriteAnimatorProps = {
     canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings;
     roundFramePosition?: boolean;
     meshProps?: CommonMeshProps;
-} & JSX.IntrinsicElements['group'];
+} & Omit<ThreeElements['group'], 'ref'>;
 type SpriteAnimatorState = {
     current?: number;
     offset?: number;
@@ -51,5 +51,38 @@ type SpriteAnimatorState = {
     ref: React.Ref<THREE.Group>;
 };
 export declare function useSpriteAnimator(): SpriteAnimatorState | null;
-export declare const SpriteAnimator: React.ForwardRefExoticComponent<Omit<SpriteAnimatorProps, "ref"> & React.RefAttributes<THREE.Group>>;
+export declare const SpriteAnimator: React.ForwardRefExoticComponent<{
+    startFrame?: number;
+    endFrame?: number;
+    fps?: number;
+    frameName?: string;
+    textureDataURL?: string;
+    textureImageURL?: string;
+    loop?: boolean;
+    numberOfFrames?: number;
+    autoPlay?: boolean;
+    animationNames?: Array<string>;
+    onStart?: (data: AnimationEventData) => void;
+    onEnd?: (data: AnimationEventData) => void;
+    onLoopEnd?: (data: AnimationEventData) => void;
+    onFrame?: (data: AnimationEventData) => void;
+    play?: boolean;
+    pause?: boolean;
+    flipX?: boolean;
+    alphaTest?: number;
+    asSprite?: boolean;
+    offset?: number;
+    playBackwards?: boolean;
+    resetOnEnd?: boolean;
+    instanceItems?: Vector3[];
+    maxItems?: number;
+    spriteDataset?: {
+        spriteTexture: THREE.Texture;
+        spriteData: SpriteData | null;
+        aspect: Vector3;
+    } | null;
+    canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings;
+    roundFramePosition?: boolean;
+    meshProps?: CommonMeshProps;
+} & 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"> & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
 export {};