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

package/core/Edges.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("./Line.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}require("@react-three/fiber"),require("three-stdlib");var c=u(e),i=s(t),o=s(r);const a=i.forwardRef((({threshold:e=15,geometry:t,...r},u)=>{const s=i.useRef(null);i.useImperativeHandle(u,(()=>s.current),[]);const a=i.useMemo((()=>[0,0,0,1,0,0]),[]),l=i.useRef(null),f=i.useRef(null);return i.useLayoutEffect((()=>{const r=s.current.parent,n=null!=t?t:null==r?void 0:r.geometry;if(!n)return;if(l.current===n&&f.current===e)return;l.current=n,f.current=e;const u=new o.EdgesGeometry(n,e).attributes.position.array;s.current.geometry.setPositions(u),s.current.geometry.attributes.instanceStart.needsUpdate=!0,s.current.geometry.attributes.instanceEnd.needsUpdate=!0,s.current.computeLineDistances()})),i.createElement(n.Line,c.default({segments:!0,points:a,ref:s,raycast:()=>null},r))}));exports.Edges=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("./Line.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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)}require("@react-three/fiber"),require("three-stdlib");var c=u(e),i=s(t),o=s(r);const a=i.forwardRef((({threshold:e=15,geometry:t,...r},u)=>{const s=i.useRef(null);i.useImperativeHandle(u,(()=>s.current),[]);const a=i.useMemo((()=>[0,0,0,1,0,0]),[]),f=i.useRef(),l=i.useRef();return i.useLayoutEffect((()=>{const r=s.current.parent,n=null!=t?t:null==r?void 0:r.geometry;if(!n)return;if(f.current===n&&l.current===e)return;f.current=n,l.current=e;const u=new o.EdgesGeometry(n,e).attributes.position.array;s.current.geometry.setPositions(u),s.current.geometry.attributes.instanceStart.needsUpdate=!0,s.current.geometry.attributes.instanceEnd.needsUpdate=!0,s.current.computeLineDistances()})),i.createElement(n.Line,c.default({segments:!0,points:a,ref:s,raycast:()=>null},r))}));exports.Edges=a;

package/core/Edges.d.ts

@@ -1,12 +1,12 @@
 import * as THREE from 'three';
-import { ThreeElement, type ThreeElements } from '@react-three/fiber';
+import { ReactThreeFiber, type ThreeElements } from '@react-three/fiber';
 import { LineSegmentsGeometry, LineMaterial, LineMaterialParameters, Line2 } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type EdgesRef = THREE.Mesh<LineSegmentsGeometry, LineMaterial>;
 export type EdgesProps = Partial<ThreeElements['mesh']> & {
     threshold?: number;
     lineWidth?: number;
-} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ThreeElement<typeof Line2>, 'args' | 'geometry'> & Omit<ThreeElement<typeof LineMaterial>, 'color' | 'vertexColors' | 'args'> & {
+} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args' | 'geometry'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {
     geometry?: THREE.BufferGeometry;
     color?: THREE.ColorRepresentation;
 };

package/core/Edges.js

@@ -11,8 +11,8 @@ const Edges = /* @__PURE__ */React.forwardRef(({
   const ref = React.useRef(null);
   React.useImperativeHandle(fref, () => ref.current, []);
   const tmpPoints = React.useMemo(() => [0, 0, 0, 1, 0, 0], []);
-  const memoizedGeometry = React.useRef(null);
-  const memoizedThreshold = React.useRef(null);
+  const memoizedGeometry = React.useRef();
+  const memoizedThreshold = React.useRef();
   React.useLayoutEffect(() => {
     const parent = ref.current.parent;
     const geometry = explicitGeometry !== null && explicitGeometry !== void 0 ? explicitGeometry : parent == null ? void 0 : parent.geometry;

package/core/Effects.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=s(e),l=u(r);const o=l.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:u,disableGamma:o,disableRenderPass:i,depthBuffer:d=!0,stencilBuffer:f=!1,anisotropy:p=1,colorSpace:h,type:m,...b},g)=>{l.useMemo((()=>a.extend({EffectComposer:n.EffectComposer,RenderPass:n.RenderPass,ShaderPass:n.ShaderPass})),[]);const y=l.useRef(null);l.useImperativeHandle(g,(()=>y.current),[]);const{scene:v,camera:E,gl:P,size:x,viewport:R}=a.useThree(),[w]=l.useState((()=>{const e=new t.WebGLRenderTarget(x.width,x.height,{type:m||t.HalfFloatType,format:t.RGBAFormat,depthBuffer:d,stencilBuffer:f,anisotropy:p});return m===t.UnsignedByteType&&null!=h&&(e.texture.colorSpace=h),e.samples=r,e}));l.useEffect((()=>{var e,r;null==(e=y.current)||e.setSize(x.width,x.height),null==(r=y.current)||r.setPixelRatio(R.dpr)}),[P,x,R.dpr]),a.useFrame((()=>{var e;u||null==(e=y.current)||e.render()}),s);const j=[];return i||j.push(l.createElement("renderPass",{key:"renderpass",attach:`passes-${j.length}`,args:[v,E]})),o||j.push(l.createElement("shaderPass",{attach:`passes-${j.length}`,key:"gammapass",args:[n.GammaCorrectionShader]})),l.Children.forEach(e,(e=>{e&&j.push(l.cloneElement(e,{key:j.length,attach:`passes-${j.length}`}))})),l.createElement("effectComposer",c.default({ref:y,args:[P,w]},b),j)}));exports.Effects=o,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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=s(e),l=c(r);const o=l.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:c,disableGamma:o,disableRenderPass:i,depthBuffer:d=!0,stencilBuffer:f=!1,anisotropy:p=1,encoding:h,type:m,...g},b)=>{l.useMemo((()=>n.extend({EffectComposer:a.EffectComposer,RenderPass:a.RenderPass,ShaderPass:a.ShaderPass})),[]);const y=l.useRef(null);l.useImperativeHandle(b,(()=>y.current),[]);const{scene:v,camera:x,gl:E,size:P,viewport:R}=n.useThree(),[w]=l.useState((()=>{const e=new t.WebGLRenderTarget(P.width,P.height,{type:m||t.HalfFloatType,format:t.RGBAFormat,depthBuffer:d,stencilBuffer:f,anisotropy:p});return m===t.UnsignedByteType&&null!=h&&("colorSpace"in e?e.texture.colorSpace=h:e.texture.encoding=h),e.samples=r,e}));l.useEffect((()=>{var e,r;null==(e=y.current)||e.setSize(P.width,P.height),null==(r=y.current)||r.setPixelRatio(R.dpr)}),[E,P,R.dpr]),n.useFrame((()=>{var e;c||null==(e=y.current)||e.render()}),s);const j=[];return i||j.push(l.createElement("renderPass",{key:"renderpass",attach:`passes-${j.length}`,args:[v,x]})),o||j.push(l.createElement("shaderPass",{attach:`passes-${j.length}`,key:"gammapass",args:[a.GammaCorrectionShader]})),l.Children.forEach(e,(e=>{e&&j.push(l.cloneElement(e,{key:j.length,attach:`passes-${j.length}`}))})),l.createElement("effectComposer",u.default({ref:y,args:[E,w]},g),j)}));exports.Effects=o,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}};

package/core/Effects.d.ts

@@ -1,10 +1,11 @@
 import { TextureDataType } from 'three';
-import { ThreeElement, ThreeElements } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import { EffectComposer, RenderPass, ShaderPass } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type EffectsProps = Omit<ThreeElements['effectComposer'], 'ref' | 'args'> & {
+import { TextureEncoding } from '../helpers/deprecated';
+type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
     multisamping?: number;
-    colorSpace?: THREE.ColorSpace;
+    encoding?: TextureEncoding;
     type?: TextureDataType;
     renderIndex?: number;
     disableGamma?: boolean;
@@ -14,12 +15,15 @@ export type EffectsProps = Omit<ThreeElements['effectComposer'], 'ref' | 'args'>
     stencilBuffer?: boolean;
     anisotropy?: number;
 };
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        effectComposer: ThreeElement<typeof EffectComposer>;
-        renderPass: ThreeElement<typeof RenderPass>;
-        shaderPass: ThreeElement<typeof ShaderPass>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            effectComposer: ReactThreeFiber.Node<EffectComposer, typeof EffectComposer>;
+            renderPass: ReactThreeFiber.Node<RenderPass, typeof RenderPass>;
+            shaderPass: ReactThreeFiber.Node<ShaderPass, typeof ShaderPass>;
+        }
     }
 }
 export declare const isWebGL2Available: () => boolean;
-export declare const Effects: ForwardRefComponent<EffectsProps, EffectComposer>;
+export declare const Effects: ForwardRefComponent<Props, EffectComposer>;
+export {};

package/core/Effects.js

@@ -22,7 +22,7 @@ const Effects = /* @__PURE__ */React.forwardRef(({
   depthBuffer = true,
   stencilBuffer = false,
   anisotropy = 1,
-  colorSpace,
+  encoding,
   type,
   ...props
 }, ref) => {
@@ -50,8 +50,8 @@ const Effects = /* @__PURE__ */React.forwardRef(({
     });
 
     // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
-    if (type === UnsignedByteType && colorSpace != null) {
-      t.texture.colorSpace = colorSpace;
+    if (type === UnsignedByteType && encoding != null) {
+      if ('colorSpace' in t) t.texture.colorSpace = encoding;else t.texture.encoding = encoding;
     }
     t.samples = multisamping;
     return t;

package/core/Environment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),t=require("@react-three/fiber"),r=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js");var s=a(e),c=i(n);function l(e,n,r,o,u={}){var a,i,s,c;u={backgroundBlurriness:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const l=(e=>{return(n=e).current&&n.current.isScene?e.current:e;var n})(n||r),d=l.background,m=l.environment,g={backgroundBlurriness:l.backgroundBlurriness,backgroundIntensity:l.backgroundIntensity,backgroundRotation:null!==(a=null==(i=l.backgroundRotation)||null==i.clone?void 0:i.clone())&&void 0!==a?a:[0,0,0],environmentIntensity:l.environmentIntensity,environmentRotation:null!==(s=null==(c=l.environmentRotation)||null==c.clone?void 0:c.clone())&&void 0!==s?s:[0,0,0]};return"only"!==e&&(l.environment=o),e&&(l.background=o),t.applyProps(l,u),()=>{"only"!==e&&(l.environment=m),e&&(l.background=d),t.applyProps(l,g)}}function d({scene:e,background:n=!1,map:r,...o}){const u=t.useThree((e=>e.scene));return c.useLayoutEffect((()=>{if(r)return l(n,e,u,r,o)})),null}function m({background:e=!1,scene:n,blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:s,environmentRotation:d,...m}){const g=u.useEnvironment(m),b=t.useThree((e=>e.scene));return c.useLayoutEffect((()=>l(e,n,b,g,{backgroundBlurriness:null!=r?r:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:s,environmentRotation:d}))),c.useEffect((()=>()=>{g.dispose()}),[g]),null}function g({children:e,near:n=.1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:s=!1,blur:g,backgroundBlurriness:b,backgroundIntensity:f,backgroundRotation:v,environmentIntensity:p,environmentRotation:k,scene:E,files:y,path:h,preset:I,extensions:R}){const j=t.useThree((e=>e.gl)),x=t.useThree((e=>e.scene)),P=c.useRef(null),[C]=c.useState((()=>new r.Scene)),q=c.useMemo((()=>{const e=new r.WebGLCubeRenderTarget(u);return e.texture.type=r.HalfFloatType,e}),[u]);c.useEffect((()=>()=>{q.dispose()}),[q]),c.useLayoutEffect((()=>{if(1===a){const e=j.autoClear;j.autoClear=!0,P.current.update(j,C),j.autoClear=e}return l(s,E,x,q.texture,{backgroundBlurriness:null!=g?g:b,backgroundIntensity:f,backgroundRotation:v,environmentIntensity:p,environmentRotation:k})}),[e,C,q.texture,E,x,s,a,j]);let B=1;return t.useFrame((()=>{if(a===1/0||B<a){const e=j.autoClear;j.autoClear=!0,P.current.update(j,C),j.autoClear=e,B++}})),c.createElement(c.Fragment,null,t.createPortal(c.createElement(c.Fragment,null,e,c.createElement("cubeCamera",{ref:P,args:[n,o,q]}),y||I?c.createElement(m,{background:!0,files:y,preset:I,path:h,extensions:R}):i?c.createElement(d,{background:!0,map:i,extensions:R}):null),C))}function b(e){var n,r,a,i;const l=u.useEnvironment(e),m=e.map||l;c.useMemo((()=>t.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]),c.useEffect((()=>()=>{l.dispose()}),[l]);const g=c.useMemo((()=>[m]),[m]),b=null==(n=e.ground)?void 0:n.height,f=null==(r=e.ground)?void 0:r.radius,v=null!==(a=null==(i=e.ground)?void 0:i.scale)&&void 0!==a?a:1e3;return c.createElement(c.Fragment,null,c.createElement(d,s.default({},e,{map:m})),c.createElement("groundProjectedEnvImpl",{args:g,scale:v,height:b,radius:f}))}exports.Environment=function(e){return e.ground?c.createElement(b,e):e.map?c.createElement(d,e):e.children?c.createElement(g,e):c.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),t=require("@react-three/fiber"),r=require("three"),o=require("three-stdlib"),u=require("./useEnvironment.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}require("@monogrid/gainmap-js"),require("../helpers/environment-assets.cjs.js"),require("../helpers/deprecated.cjs.js");var s=a(e),c=i(n);function l(e,n,r,o,u={}){var a,i,s,c;u={backgroundBlurriness:0,backgroundIntensity:1,backgroundRotation:[0,0,0],environmentIntensity:1,environmentRotation:[0,0,0],...u};const l=(e=>{return(n=e).current&&n.current.isScene?e.current:e;var n})(n||r),d=l.background,m=l.environment,g={backgroundBlurriness:l.backgroundBlurriness,backgroundIntensity:l.backgroundIntensity,backgroundRotation:null!==(a=null==(i=l.backgroundRotation)||null==i.clone?void 0:i.clone())&&void 0!==a?a:[0,0,0],environmentIntensity:l.environmentIntensity,environmentRotation:null!==(s=null==(c=l.environmentRotation)||null==c.clone?void 0:c.clone())&&void 0!==s?s:[0,0,0]};return"only"!==e&&(l.environment=o),e&&(l.background=o),t.applyProps(l,u),()=>{"only"!==e&&(l.environment=m),e&&(l.background=d),t.applyProps(l,g)}}function d({scene:e,background:n=!1,map:r,...o}){const u=t.useThree((e=>e.scene));return c.useLayoutEffect((()=>{if(r)return l(n,e,u,r,o)})),null}function m({background:e=!1,scene:n,blur:r,backgroundBlurriness:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:s,environmentRotation:d,...m}){const g=u.useEnvironment(m),b=t.useThree((e=>e.scene));return c.useLayoutEffect((()=>l(e,n,b,g,{backgroundBlurriness:null!=r?r:o,backgroundIntensity:a,backgroundRotation:i,environmentIntensity:s,environmentRotation:d}))),c.useEffect((()=>()=>{g.dispose()}),[g]),null}function g({children:e,near:n=.1,far:o=1e3,resolution:u=256,frames:a=1,map:i,background:s=!1,blur:g,backgroundBlurriness:b,backgroundIntensity:f,backgroundRotation:v,environmentIntensity:p,environmentRotation:k,scene:E,files:y,path:h,preset:j,extensions:I}){const R=t.useThree((e=>e.gl)),x=t.useThree((e=>e.scene)),P=c.useRef(null),[q]=c.useState((()=>new r.Scene)),C=c.useMemo((()=>{const e=new r.WebGLCubeRenderTarget(u);return e.texture.type=r.HalfFloatType,e}),[u]);c.useEffect((()=>()=>{C.dispose()}),[C]),c.useLayoutEffect((()=>{if(1===a){const e=R.autoClear;R.autoClear=!0,P.current.update(R,q),R.autoClear=e}return l(s,E,x,C.texture,{backgroundBlurriness:null!=g?g:b,backgroundIntensity:f,backgroundRotation:v,environmentIntensity:p,environmentRotation:k})}),[e,q,C.texture,E,x,s,a,R]);let B=1;return t.useFrame((()=>{if(a===1/0||B<a){const e=R.autoClear;R.autoClear=!0,P.current.update(R,q),R.autoClear=e,B++}})),c.createElement(c.Fragment,null,t.createPortal(c.createElement(c.Fragment,null,e,c.createElement("cubeCamera",{ref:P,args:[n,o,C]}),y||j?c.createElement(m,{background:!0,files:y,preset:j,path:h,extensions:I}):i?c.createElement(d,{background:!0,map:i,extensions:I}):null),q))}function b(e){var n,r,a,i;const l=u.useEnvironment(e),m=e.map||l;c.useMemo((()=>t.extend({GroundProjectedEnvImpl:o.GroundProjectedEnv})),[]),c.useEffect((()=>()=>{l.dispose()}),[l]);const g=c.useMemo((()=>[m]),[m]),b=null==(n=e.ground)?void 0:n.height,f=null==(r=e.ground)?void 0:r.radius,v=null!==(a=null==(i=e.ground)?void 0:i.scale)&&void 0!==a?a:1e3;return c.createElement(c.Fragment,null,c.createElement(d,s.default({},e,{map:m})),c.createElement("groundProjectedEnvImpl",{args:g,scale:v,height:b,radius:f}))}exports.Environment=function(e){return e.ground?c.createElement(b,e):e.map?c.createElement(d,e):e.children?c.createElement(g,e):c.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=g;

package/core/Environment.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Euler, ThreeElement } from '@react-three/fiber';
+import { Object3DNode, Euler } from '@react-three/fiber';
 import { Texture, Scene } from 'three';
 import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
 import { PresetsType } from '../helpers/environment-assets';
@@ -19,7 +19,7 @@ export type EnvironmentProps = {
     environmentRotation?: Euler;
     map?: Texture;
     preset?: PresetsType;
-    scene?: Scene | React.RefObject<Scene>;
+    scene?: Scene | React.MutableRefObject<Scene>;
     ground?: boolean | {
         radius?: number;
         height?: number;
@@ -29,9 +29,11 @@ export type EnvironmentProps = {
 export declare function EnvironmentMap({ scene, background, map, ...config }: EnvironmentProps): null;
 export declare function EnvironmentCube({ background, scene, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, ...rest }: EnvironmentProps): null;
 export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, blur, backgroundBlurriness, backgroundIntensity, backgroundRotation, environmentIntensity, environmentRotation, scene, files, path, preset, extensions, }: EnvironmentProps): React.JSX.Element;
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        groundProjectedEnvImpl: ThreeElement<typeof GroundProjectedEnvImpl>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            groundProjectedEnvImpl: Object3DNode<GroundProjectedEnvImpl, typeof GroundProjectedEnvImpl>;
+        }
     }
 }
 export declare function Environment(props: EnvironmentProps): React.JSX.Element;

package/core/Fbo.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as THREE from 'three';
+import { TextureEncoding } from '../helpers/deprecated';
+type ColorSpace = 'srgb' | 'srgb-linear' | '' | string;
 type FBOSettings = {
     samples?: number;
     depth?: boolean;
@@ -14,7 +16,8 @@ type FBOSettings = {
     stencilBuffer?: boolean | undefined;
     generateMipmaps?: boolean | undefined;
     depthTexture?: THREE.DepthTexture | undefined;
-    colorSpace?: THREE.ColorSpace | undefined;
+    encoding?: TextureEncoding | undefined;
+    colorSpace?: ColorSpace | undefined;
 };
 export declare function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings): THREE.WebGLRenderTarget;
 export declare const Fbo: ({ children, width, height, ...settings }: {

package/core/Fbo.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { useThree } from '@react-three/fiber';
 
+// TODO: consume this from three >r154 when SemVer allows
+
 // 👇 uncomment when TS version supports function overloads
 // export function useFBO(settings?: FBOSettings)
 function useFBO(/** Width in pixels, or settings (will render fullscreen by default) */

package/core/Fbx.d.ts

@@ -3,7 +3,7 @@ import { Group } from 'three';
 import { Clone } from './Clone';
 export declare function useFBX(path: string): Group;
 export declare namespace useFBX {
-    var preload: (path: string) => void;
+    var preload: (path: string) => undefined;
     var clear: (input: string | string[]) => void;
 }
 export declare function Fbx({ path, ...props }: {

package/core/FirstPersonControls.d.ts

@@ -1,7 +1,7 @@
-import { ThreeElement } from '@react-three/fiber';
+import { Object3DNode } from '@react-three/fiber';
 import { FirstPersonControls as FirstPersonControlImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type FirstPersonControlsProps = Omit<ThreeElement<typeof FirstPersonControlImpl>, 'ref' | 'args'> & {
+export type FirstPersonControlsProps = Object3DNode<FirstPersonControlImpl, typeof FirstPersonControlImpl> & {
     domElement?: HTMLElement;
     makeDefault?: boolean;
 };

package/core/Fisheye.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ThreeElements } from '@react-three/fiber';
-export type FisheyeProps = ThreeElements['mesh'] & {
+export type FisheyeProps = JSX.IntrinsicElements['mesh'] & {
     zoom?: number;
     segments?: number;
     resolution?: number;

package/core/Float.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { ThreeElements } from '@react-three/fiber';
 import * as THREE from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type FloatProps = Omit<ThreeElements['group'], 'ref'> & {
+export type FloatProps = JSX.IntrinsicElements['group'] & {
     enabled?: boolean;
     speed?: number;
     rotationIntensity?: number;

package/core/FlyControls.d.ts

@@ -1,8 +1,8 @@
-import { ThreeElement } from '@react-three/fiber';
+import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { FlyControls as FlyControlsImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type FlyControlsProps = Omit<ThreeElement<typeof FlyControlsImpl>, 'ref' | 'args'> & {
+export type FlyControlsProps = ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl> & {
     onChange?: (e?: THREE.Event) => void;
     domElement?: HTMLElement;
     makeDefault?: boolean;

package/core/GizmoHelper.d.ts

@@ -1,10 +1,9 @@
-import { ThreeElements } from '@react-three/fiber';
 import { Vector3 } from 'three';
 type GizmoHelperContext = {
     tweenCamera: (direction: Vector3) => void;
 };
 export declare const useGizmoContext: () => GizmoHelperContext;
-export type GizmoHelperProps = ThreeElements['group'] & {
+export type GizmoHelperProps = JSX.IntrinsicElements['group'] & {
     alignment?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'center-right' | 'center-left' | 'center-center' | 'top-center';
     margin?: [number, number];
     renderPriority?: number;

package/core/GizmoViewport.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ThreeEvent, ThreeElements } from '@react-three/fiber';
-type GizmoViewportProps = ThreeElements['group'] & {
+import { ThreeEvent } from '@react-three/fiber';
+type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
     axisColors?: [string, string, string];
     axisScale?: [number, number, number];
     labels?: [string, string, string];

package/core/Gltf.d.ts

@@ -1,27 +1,23 @@
 import * as React from 'react';
 import { GLTFLoader, GLTF } from 'three-stdlib';
 import { ObjectMap } from '@react-three/fiber';
-import { CloneProps } from './Clone';
+import { Clone } from './Clone';
 type Path = string | string[];
 type UseDraco = boolean | string;
 type UseMeshopt = boolean;
 type ExtendLoader = (loader: GLTFLoader) => void;
 export declare const useGLTF: {
     <T extends Path>(path: T, useDraco?: UseDraco, useMeshopt?: UseMeshopt, extendLoader?: ExtendLoader): T extends any[] ? (GLTF & ObjectMap)[] : GLTF & ObjectMap;
-    preload(path: Path, useDraco?: UseDraco, useMeshopt?: UseMeshopt, extendLoader?: ExtendLoader): void;
+    preload(path: Path, useDraco?: UseDraco, useMeshopt?: UseMeshopt, extendLoader?: ExtendLoader): undefined;
     clear(path: Path): void;
     setDecoderPath(path: string): void;
 };
-export type GltfProps = Omit<CloneProps, 'object'> & {
+type CloneProps = React.ComponentProps<typeof Clone>;
+type GltfProps = Omit<CloneProps, 'object'> & {
     src: string;
     useDraco?: UseDraco;
     useMeshOpt?: UseMeshopt;
     extendLoader?: ExtendLoader;
 };
-export declare const Gltf: React.ForwardRefExoticComponent<Omit<CloneProps, "object"> & {
-    src: string;
-    useDraco?: UseDraco;
-    useMeshOpt?: UseMeshopt;
-    extendLoader?: ExtendLoader;
-} & React.RefAttributes<import("three").Group<import("three").Object3DEventMap>>>;
+export declare const Gltf: React.ForwardRefExoticComponent<Omit<GltfProps, "ref"> & React.RefAttributes<import("three").Group>>;
 export {};

package/core/GradientTexture.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { ThreeElements } from '@react-three/fiber';
 import * as THREE from 'three';
 export declare enum GradientType {
     Linear = "linear",
     Radial = "radial"
 }
-export type GradientTextureProps = {
+type Props = {
     stops: Array<number>;
     colors: Array<THREE.ColorRepresentation>;
     attach?: string;
@@ -14,5 +13,6 @@ export type GradientTextureProps = {
     type?: GradientType;
     innerCircleRadius?: number;
     outerCircleRadius?: string | number;
-} & Omit<ThreeElements['texture'], 'args' | 'type'>;
-export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: GradientTextureProps): React.JSX.Element;
+} & Omit<JSX.IntrinsicElements['texture'], 'type'>;
+export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): React.JSX.Element;
+export {};

package/core/GradientTexture.js

@@ -44,6 +44,8 @@ function GradientTexture({
     context.restore();
     return canvas;
   }, [stops]);
+
+  // @ts-ignore ????
   return /*#__PURE__*/React.createElement("canvasTexture", _extends({
     colorSpace: gl.outputColorSpace,
     args: [canvas],

package/core/Grid.d.ts

@@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type GridMaterialType = {
     cellSize?: number;
@@ -15,12 +14,14 @@ export type GridMaterialType = {
     fadeFrom?: number;
     side?: THREE.Side;
 };
-export type GridProps = Omit<ThreeElements['mesh'], 'ref' | 'args'> & GridMaterialType & {
+export type GridProps = GridMaterialType & {
     args?: ConstructorParameters<typeof THREE.PlaneGeometry>;
 };
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        gridMaterial: ThreeElements['shaderMaterial'] & GridMaterialType;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            gridMaterial: JSX.IntrinsicElements['shaderMaterial'] & GridMaterialType;
+        }
     }
 }
-export declare const Grid: ForwardRefComponent<GridProps, THREE.Mesh>;
+export declare const Grid: ForwardRefComponent<Omit<JSX.IntrinsicElements['mesh'], 'args'> & GridProps, THREE.Mesh>;

package/core/Helper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=t(e);function n(e,t,...n){const c=u.useRef(null),l=r.useThree((e=>e.scene));return u.useLayoutEffect((()=>{let r;if(e&&null!=e&&e.current&&t&&(c.current=r=new t(e.current,...n)),r)return r.traverse((e=>e.raycast=()=>null)),l.add(r),()=>{c.current=void 0,l.remove(r),null==r.dispose||r.dispose()}}),[l,t,e,...n]),r.useFrame((()=>{var e;null==(e=c.current)||null==e.update||e.update()})),c}exports.Helper=({type:e,args:r=[]})=>{const t=u.useRef(null),c=u.useRef(null);return u.useLayoutEffect((()=>{c.current=t.current.parent})),n(c,e,...r),u.createElement("object3D",{ref:t})},exports.useHelper=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber");function t(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=t(e);function n(e,t,...n){const c=u.useRef(),s=r.useThree((e=>e.scene));return u.useLayoutEffect((()=>{let r;if(e&&null!=e&&e.current&&t&&(c.current=r=new t(e.current,...n)),r)return r.traverse((e=>e.raycast=()=>null)),s.add(r),()=>{c.current=void 0,s.remove(r),null==r.dispose||r.dispose()}}),[s,t,e,...n]),r.useFrame((()=>{var e;null==(e=c.current)||null==e.update||e.update()})),c}exports.Helper=({type:e,args:r=[]})=>{const t=u.useRef(null),c=u.useRef(null);return u.useLayoutEffect((()=>{c.current=t.current.parent})),n(c,e,...r),u.createElement("object3D",{ref:t})},exports.useHelper=n;

package/core/Helper.d.ts

@@ -7,7 +7,7 @@ type HelperType = Object3D & {
 };
 type HelperConstructor = new (...args: any[]) => any;
 type HelperArgs<T> = T extends [infer _, ...infer R] ? R : never;
-export declare function useHelper<T extends HelperConstructor>(object3D: React.RefObject<Object3D> | Falsey, helperConstructor: T, ...args: HelperArgs<ConstructorParameters<T>>): React.RefObject<HelperType | null>;
+export declare function useHelper<T extends HelperConstructor>(object3D: React.MutableRefObject<Object3D> | Falsey, helperConstructor: T, ...args: HelperArgs<ConstructorParameters<T>>): React.MutableRefObject<HelperType | undefined>;
 export type HelperProps<T extends HelperConstructor> = {
     type: T;
     args?: HelperArgs<ConstructorParameters<T>>;

package/core/Helper.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 
 function useHelper(object3D, helperConstructor, ...args) {
-  const helper = React.useRef(null);
+  const helper = React.useRef();
   const scene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
     let currentHelper = undefined;

package/core/Hud.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-export type HudProps = {
+type HudProps = {
     children: React.ReactNode;
     renderPriority?: number;
 };
 export declare function Hud({ children, renderPriority }: HudProps): React.JSX.Element;
+export {};

package/core/Image.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
-import { Color, ThreeElements } from '@react-three/fiber';
+import { Color } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type ImageProps = Omit<ThreeElements['mesh'], 'scale'> & {
+export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
     segments?: number;
     scale?: number | [number, number];
     color?: Color;
@@ -19,7 +19,7 @@ export type ImageProps = Omit<ThreeElements['mesh'], 'scale'> & {
     texture?: never;
     url: string;
 });
-type ImageMaterialType = ThreeElements['shaderMaterial'] & {
+type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
     scale?: number[];
     imageBounds?: number[];
     radius?: number;
@@ -29,9 +29,11 @@ type ImageMaterialType = ThreeElements['shaderMaterial'] & {
     zoom?: number;
     grayscale?: number;
 };
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        imageMaterial: ImageMaterialType;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            imageMaterial: ImageMaterialType;
+        }
     }
 }
 export declare const Image: ForwardRefComponent<ImageProps, THREE.Mesh>;

package/core/Instances.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("../helpers/deprecated.cjs.js");function s(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 u=s(e),i=c(t),o=c(r);const l=new i.Matrix4,f=new i.Matrix4,d=[],m=new i.Mesh;class y extends i.Group{constructor(){super(),this.color=new i.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;m.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,l),f.multiplyMatrices(n,l),m.matrixWorld=f,r.material instanceof i.Material?m.material.side=r.material.side:m.material.side=r.material[0].side,m.raycast(e,d);for(let e=0,r=d.length;e<r;e++){const r=d[e];r.instanceId=a,r.object=this,t.push(r)}d.length=0}}}const p=o.createContext(null),g=new i.Matrix4,x=new i.Matrix4,h=new i.Matrix4,b=new i.Vector3,M=new i.Quaternion,w=new i.Vector3,A=o.forwardRef((({context:e,children:t,...r},a)=>{o.useMemo((()=>n.extend({PositionMesh:y})),[]);const s=o.useRef(null);o.useImperativeHandle(a,(()=>s.current),[]);const{subscribe:c,getParent:i}=o.useContext(e||p);return o.useLayoutEffect((()=>c(s)),[]),o.createElement("positionMesh",u.default({instance:i(),instanceKey:s,ref:s},r),t)})),v=o.forwardRef((({context:e,children:t,range:r,limit:s=1e3,frames:c=1/0,...l},f)=>{const[{localContext:d,instance:m}]=o.useState((()=>{const e=o.createContext(null);return{localContext:e,instance:o.forwardRef(((t,r)=>o.createElement(A,u.default({context:e},t,{ref:r}))))}})),y=o.useRef(null);o.useImperativeHandle(f,(()=>y.current),[]);const[v,E]=o.useState([]),[[j,D]]=o.useState((()=>{const e=new Float32Array(16*s);for(let t=0;t<s;t++)h.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*s)].map((()=>1)))]}));o.useEffect((()=>{y.current.instanceMatrix.needsUpdate=!0}));let R=0,C=0;const P=o.useRef([]);o.useLayoutEffect((()=>{P.current=Object.entries(y.current.geometry.attributes).filter((([e,t])=>t.isInstancedBufferAttribute))})),n.useFrame((()=>{if(c===1/0||R<c){y.current.updateMatrix(),y.current.updateMatrixWorld(),g.copy(y.current.matrixWorld).invert(),C=Math.min(s,void 0!==r?r:s,v.length),y.current.count=C,a.setUpdateRange(y.current.instanceMatrix,{start:0,count:16*C}),a.setUpdateRange(y.current.instanceColor,{start:0,count:3*C});for(let e=0;e<v.length;e++){const t=v[e].current;t.matrixWorld.decompose(b,M,w),x.compose(b,M,w).premultiply(g),x.toArray(j,16*e),y.current.instanceMatrix.needsUpdate=!0,t.color.toArray(D,3*e),y.current.instanceColor.needsUpdate=!0}R++}}));const U=o.useMemo((()=>({getParent:()=>y,subscribe:e=>(E((t=>[...t,e])),()=>E((t=>t.filter((t=>t.current!==e.current)))))})),[]);return o.createElement("instancedMesh",u.default({userData:{instances:v,limit:s,frames:c},matrixAutoUpdate:!1,ref:y,args:[null,null,0],raycast:()=>null},l),o.createElement("instancedBufferAttribute",{attach:"instanceMatrix",args:[j,16],usage:i.DynamicDrawUsage}),o.createElement("instancedBufferAttribute",{attach:"instanceColor",args:[D,3],usage:i.DynamicDrawUsage}),"function"==typeof t?o.createElement(d.Provider,{value:U},t(m)):e?o.createElement(e.Provider,{value:U},t):o.createElement(p.Provider,{value:U},t))})),E=o.forwardRef((function({meshes:e,children:t,...r},n){const a=[];if(Array.isArray(e))for(const t of e)null!=t&&t.isMesh&&a.push((e=>o.createElement(v,u.default({key:t.geometry.uuid,geometry:t.geometry,material:t.material},r,e))));else if(null!=e&&"object"==typeof e)for(const t in e){const n=e[t];null!=n&&n.isMesh&&a.push((e=>o.createElement(v,u.default({key:n.geometry.uuid,geometry:n.geometry,material:n.material},r,e))))}return o.createElement("group",{ref:n},t(a))}));const j=o.forwardRef((({name:e,defaultValue:t,normalized:r,usage:a=i.DynamicDrawUsage},s)=>{const c=o.useRef(null);o.useImperativeHandle(s,(()=>c.current),[]),o.useLayoutEffect((()=>{const r=c.current.__r3f.parent.object;r.geometry.attributes[e]=c.current;const n=Array.isArray(t)?t:[t],a=Array.from({length:r.userData.limit},(()=>n)).flat();return c.current.array=new Float32Array(a),c.current.itemSize=n.length,c.current.count=a.length/c.current.itemSize,()=>{delete r.geometry.attributes[e]}}),[e]);let u=0;return n.useFrame((()=>{const t=c.current.__r3f.parent.object;if(t.userData.frames===1/0||u<t.userData.frames){for(let r=0;r<t.userData.instances.length;r++){const n=t.userData.instances[r].current[e];void 0!==n&&(c.current.set(Array.isArray(n)?n:"function"==typeof n.toArray?n.toArray():[n],r*c.current.itemSize),c.current.needsUpdate=!0)}u++}})),o.createElement("instancedBufferAttribute",{ref:c,usage:a,normalized:r})}));exports.Instance=A,exports.InstancedAttribute=j,exports.Instances=v,exports.Merged=E,exports.PositionMesh=y,exports.createInstances=function(){const e=o.createContext(null);return[o.forwardRef(((t,r)=>o.createElement(v,u.default({ref:r,context:e},t)))),o.forwardRef(((t,r)=>o.createElement(A,u.default({ref:r,context:e},t))))]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),a=require("react-composer"),s=require("../helpers/deprecated.cjs.js");function c(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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=c(e),o=i(t),l=i(r),f=c(a);const d=new o.Matrix4,m=new o.Matrix4,y=[],p=new o.Mesh;class g extends o.Group{constructor(){super(),this.color=new o.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const r=this.instance.current;if(!r)return;if(!r.geometry||!r.material)return;p.geometry=r.geometry;const n=r.matrixWorld,a=r.userData.instances.indexOf(this.instanceKey);if(!(-1===a||a>r.count)){r.getMatrixAt(a,d),m.multiplyMatrices(n,d),p.matrixWorld=m,r.material instanceof o.Material?p.material.side=r.material.side:p.material.side=r.material[0].side,p.raycast(e,y);for(let e=0,r=y.length;e<r;e++){const r=y[e];r.instanceId=a,r.object=this,t.push(r)}y.length=0}}}const x=l.createContext(null),h=new o.Matrix4,b=new o.Matrix4,M=new o.Matrix4,w=new o.Vector3,A=new o.Quaternion,v=new o.Vector3,E=l.forwardRef((({context:e,children:t,...r},a)=>{l.useMemo((()=>n.extend({PositionMesh:g})),[]);const s=l.useRef();l.useImperativeHandle(a,(()=>s.current),[]);const{subscribe:c,getParent:i}=l.useContext(e||x);return l.useLayoutEffect((()=>c(s)),[]),l.createElement("positionMesh",u.default({instance:i(),instanceKey:s,ref:s},r),t)})),j=l.forwardRef((({context:e,children:t,range:r,limit:a=1e3,frames:c=1/0,...i},f)=>{const[{localContext:d,instance:m}]=l.useState((()=>{const e=l.createContext(null);return{localContext:e,instance:l.forwardRef(((t,r)=>l.createElement(E,u.default({context:e},t,{ref:r}))))}})),y=l.useRef(null);l.useImperativeHandle(f,(()=>y.current),[]);const[p,g]=l.useState([]),[[j,D]]=l.useState((()=>{const e=new Float32Array(16*a);for(let t=0;t<a;t++)M.identity().toArray(e,16*t);return[e,new Float32Array([...new Array(3*a)].map((()=>1)))]}));l.useEffect((()=>{y.current.instanceMatrix.needsUpdate=!0}));let R=0,O=0;const C=l.useRef([]);l.useLayoutEffect((()=>{C.current=Object.entries(y.current.geometry.attributes).filter((([e,t])=>t.isInstancedBufferAttribute))})),n.useFrame((()=>{if(c===1/0||R<c){y.current.updateMatrix(),y.current.updateMatrixWorld(),h.copy(y.current.matrixWorld).invert(),O=Math.min(a,void 0!==r?r:a,p.length),y.current.count=O,s.setUpdateRange(y.current.instanceMatrix,{offset:0,count:16*O}),s.setUpdateRange(y.current.instanceColor,{offset:0,count:3*O});for(let e=0;e<p.length;e++){const t=p[e].current;t.matrixWorld.decompose(w,A,v),b.compose(w,A,v).premultiply(h),b.toArray(j,16*e),y.current.instanceMatrix.needsUpdate=!0,t.color.toArray(D,3*e),y.current.instanceColor.needsUpdate=!0}R++}}));const P=l.useMemo((()=>({getParent:()=>y,subscribe:e=>(g((t=>[...t,e])),()=>g((t=>t.filter((t=>t.current!==e.current)))))})),[]);return l.createElement("instancedMesh",u.default({userData:{instances:p,limit:a,frames:c},matrixAutoUpdate:!1,ref:y,args:[null,null,0],raycast:()=>null},i),l.createElement("instancedBufferAttribute",{attach:"instanceMatrix",count:j.length/16,array:j,itemSize:16,usage:o.DynamicDrawUsage}),l.createElement("instancedBufferAttribute",{attach:"instanceColor",count:D.length/3,array:D,itemSize:3,usage:o.DynamicDrawUsage}),"function"==typeof t?l.createElement(d.Provider,{value:P},t(m)):e?l.createElement(e.Provider,{value:P},t):l.createElement(x.Provider,{value:P},t))})),D=l.forwardRef((function({meshes:e,children:t,...r},n){const a=Array.isArray(e);if(!a)for(const t of Object.keys(e))e[t].isMesh||delete e[t];return l.createElement("group",{ref:n},l.createElement(f.default,{components:(a?e:Object.values(e)).map((({geometry:e,material:t})=>l.createElement(j,u.default({key:e.uuid,geometry:e,material:t},r))))},(r=>a?t(...r):t(Object.keys(e).filter((t=>e[t].isMesh)).reduce(((e,t,n)=>({...e,[t]:r[n]})),{})))))}));const R=l.forwardRef((({name:e,defaultValue:t,normalized:r,usage:a=o.DynamicDrawUsage},s)=>{const c=l.useRef(null);l.useImperativeHandle(s,(()=>c.current),[]),l.useLayoutEffect((()=>{const r=c.current.__r3f.parent;r.geometry.attributes[e]=c.current;const n=Array.isArray(t)?t:[t],a=Array.from({length:r.userData.limit},(()=>n)).flat();return c.current.array=new Float32Array(a),c.current.itemSize=n.length,c.current.count=a.length/c.current.itemSize,()=>{delete r.geometry.attributes[e]}}),[e]);let i=0;return n.useFrame((()=>{const t=c.current.__r3f.parent;if(t.userData.frames===1/0||i<t.userData.frames){for(let r=0;r<t.userData.instances.length;r++){const n=t.userData.instances[r].current[e];void 0!==n&&(c.current.set(Array.isArray(n)?n:"function"==typeof n.toArray?n.toArray():[n],r*c.current.itemSize),c.current.needsUpdate=!0)}i++}})),l.createElement("instancedBufferAttribute",{ref:c,usage:a,normalized:r})}));exports.Instance=E,exports.InstancedAttribute=R,exports.Instances=j,exports.Merged=D,exports.PositionMesh=g,exports.createInstances=function(){const e=l.createContext(null);return[l.forwardRef(((t,r)=>l.createElement(j,u.default({ref:r,context:e},t)))),l.forwardRef(((t,r)=>l.createElement(E,u.default({ref:r,context:e},t))))]};

package/core/Instances.d.ts

@@ -1,26 +1,28 @@
 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 {
-        positionMesh: ThreeElement<typeof PositionMesh>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            positionMesh: ReactThreeFiber.Object3DNode<PositionMesh, typeof PositionMesh>;
+        }
     }
 }
 type Api = {
-    getParent: () => React.RefObject<InstancedMesh>;
-    subscribe: <T>(ref: React.RefObject<T>) => void;
+    getParent: () => React.MutableRefObject<InstancedMesh>;
+    subscribe: <T>(ref: React.MutableRefObject<T>) => void;
 };
-export type InstancesProps = Omit<ThreeElements['instancedMesh'], 'ref' | 'args'> & {
+export type InstancesProps = JSX.IntrinsicElements['instancedMesh'] & {
     context?: React.Context<Api>;
     range?: number;
     limit?: number;
     frames?: number;
 };
-export type InstanceProps = Omit<ThreeElements['positionMesh'], 'ref'> & {
+export type InstanceProps = JSX.IntrinsicElements['positionMesh'] & {
     context?: React.Context<Api>;
 };
-export type InstancedAttributeProps = Omit<ThreeElements['instancedBufferAttribute'], 'ref' | 'args'> & {
+export type InstancedAttributeProps = JSX.IntrinsicElements['instancedBufferAttribute'] & {
     name: string;
     defaultValue: any;
     normalized?: boolean;
@@ -32,33 +34,39 @@ type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor
 };
 export declare class PositionMesh extends THREE.Group {
     color: THREE.Color;
-    instance: React.RefObject<THREE.InstancedMesh | undefined>;
-    instanceKey: React.RefObject<PositionMesh | undefined>;
+    instance: React.MutableRefObject<THREE.InstancedMesh | undefined>;
+    instanceKey: React.MutableRefObject<JSX.IntrinsicElements['positionMesh'] | 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 Instance: 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<PositionMesh, import("@react-three/fiber").MathProps<PositionMesh> & import("@react-three/fiber").ReactProps<PositionMesh> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<PositionMesh, typeof PositionMesh>, "object">>>, "ref"> & {
-    context?: React.Context<Api>;
-} & React.RefAttributes<unknown>>;
+export declare const Instance: React.ForwardRefExoticComponent<Omit<InstanceProps, "ref"> & React.RefAttributes<unknown>>;
 export declare const Instances: ForwardRefComponent<InstancesProps, THREE.InstancedMesh>;
 export interface MergedProps extends InstancesProps {
     meshes: THREE.Mesh[];
     children: React.ReactNode;
 }
 export declare const Merged: ForwardRefComponent<any, THREE.Group>;
-export declare function createInstances<T = InstanceProps>(): readonly [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.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>, import("@react-three/fiber").MathProps<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>> & import("@react-three/fiber").ReactProps<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>, typeof THREE.InstancedMesh>, "object">>>, "ref" | "args"> & {
-    context?: React.Context<Api>;
-    range?: number;
-    limit?: number;
-    frames?: number;
-} & React.RefAttributes<THREE.InstancedMesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.Material | THREE.Material[]>>>, React.ForwardRefExoticComponent<React.PropsWithoutRef<T & 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<PositionMesh, import("@react-three/fiber").MathProps<PositionMesh> & import("@react-three/fiber").ReactProps<PositionMesh> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<PositionMesh, typeof PositionMesh>, "object">>>, "ref"> & {
+export declare function createInstances<T = InstanceProps>(): readonly [React.ForwardRefExoticComponent<Omit<InstancesProps, "ref"> & React.RefAttributes<THREE.InstancedMesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>>>, React.ForwardRefExoticComponent<React.PropsWithoutRef<T & Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<PositionMesh>, ReactThreeFiber.NodeProps<PositionMesh, typeof PositionMesh>>>, ReactThreeFiber.NonFunctionKeys<{
+    position?: ReactThreeFiber.Vector3;
+    up?: ReactThreeFiber.Vector3;
+    scale?: ReactThreeFiber.Vector3;
+    rotation?: ReactThreeFiber.Euler;
+    matrix?: ReactThreeFiber.Matrix4;
+    quaternion?: ReactThreeFiber.Quaternion;
+    layers?: ReactThreeFiber.Layers;
+    dispose?: (() => void) | null;
+}>> & {
+    position?: ReactThreeFiber.Vector3;
+    up?: ReactThreeFiber.Vector3;
+    scale?: ReactThreeFiber.Vector3;
+    rotation?: ReactThreeFiber.Euler;
+    matrix?: ReactThreeFiber.Matrix4;
+    quaternion?: ReactThreeFiber.Quaternion;
+    layers?: ReactThreeFiber.Layers;
+    dispose?: (() => void) | null;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     context?: React.Context<Api>;
 }> & React.RefAttributes<PositionMesh & T>>];
-export declare const InstancedAttribute: 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.InstancedBufferAttribute, import("@react-three/fiber").MathProps<THREE.InstancedBufferAttribute> & import("@react-three/fiber").ReactProps<THREE.InstancedBufferAttribute>>>, Omit<import("@react-three/fiber").InstanceProps<THREE.InstancedBufferAttribute, typeof THREE.InstancedBufferAttribute>, "object">>>, "ref" | "args"> & {
-    name: string;
-    defaultValue: any;
-    normalized?: boolean;
-    usage?: number;
-} & React.RefAttributes<unknown>>;
+export declare const InstancedAttribute: React.ForwardRefExoticComponent<Omit<InstancedAttributeProps, "ref"> & React.RefAttributes<unknown>>;
 export {};