@react-three/drei 9.121.4 → 10.0.0-rc.1

package/core/MeshRefractionMaterial.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-mesh-bvh"),a=require("../materials/MeshRefractionMaterial.cjs.js");function i(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 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("three"),require("./shaderMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:u,...c}){t.extend({MeshRefractionMaterial:a.MeshRefractionMaterial});const l=r.useRef(),{size:f}=t.useThree(),h=r.useMemo((()=>{var r,t;const n={},a=(o=u)&&o.isCubeTexture;var o;const s=(null!==(r=a?null==(t=u.image[0])?void 0:t.width:u.image.width)&&void 0!==r?r:1024)/4,c=Math.floor(Math.log2(s)),l=Math.pow(2,c),f=3*Math.max(l,112),h=4*l;return a&&(n.ENVMAP_TYPE_CUBEM=""),n.CUBEUV_TEXEL_WIDTH=""+1/f,n.CUBEUV_TEXEL_HEIGHT=""+1/h,n.CUBEUV_MAX_MIP=`${c}.0`,e>0&&(n.CHROMATIC_ABERRATIONS=""),i&&(n.FAST_CHROMA=""),n}),[e,i]);return r.useLayoutEffect((()=>{var e;const r=null==(e=l.current)||null==(e=e.__r3f)||null==(e=e.parent)?void 0:e.geometry;r&&(l.current.bvh=new n.MeshBVHUniformStruct,l.current.bvh.updateFrom(new n.MeshBVH(r.clone().toNonIndexed(),{strategy:n.SAH})))}),[]),t.useFrame((({camera:e})=>{l.current.viewMatrixInverse=e.matrixWorld,l.current.projectionMatrixInverse=e.projectionMatrixInverse})),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(h),defines:h,ref:l,resolution:[f.width,f.height],aberrationStrength:e,envMap:u},c))};
+"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-mesh-bvh"),a=require("../materials/MeshRefractionMaterial.cjs.js");function i(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 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("three"),require("./shaderMaterial.cjs.js"),require("../helpers/constants.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:u,...c}){t.extend({MeshRefractionMaterial:a.MeshRefractionMaterial});const l=r.useRef(null),{size:f}=t.useThree(),h=r.useMemo((()=>{var r,t;const n={},a=(o=u)&&o.isCubeTexture;var o;const s=(null!==(r=a?null==(t=u.image[0])?void 0:t.width:u.image.width)&&void 0!==r?r:1024)/4,c=Math.floor(Math.log2(s)),l=Math.pow(2,c),f=3*Math.max(l,112),h=4*l;return a&&(n.ENVMAP_TYPE_CUBEM=""),n.CUBEUV_TEXEL_WIDTH=""+1/f,n.CUBEUV_TEXEL_HEIGHT=""+1/h,n.CUBEUV_MAX_MIP=`${c}.0`,e>0&&(n.CHROMATIC_ABERRATIONS=""),i&&(n.FAST_CHROMA=""),n}),[e,i]);return r.useLayoutEffect((()=>{var e;const r=null==(e=l.current)||null==(e=e.__r3f)||null==(e=e.parent)||null==(e=e.object)?void 0:e.geometry;r&&(l.current.bvh=new n.MeshBVHUniformStruct,l.current.bvh.updateFrom(new n.MeshBVH(r.clone().toNonIndexed(),{strategy:n.SAH})))}),[]),t.useFrame((({camera:e})=>{l.current.viewMatrixInverse=e.matrixWorld,l.current.projectionMatrixInverse=e.projectionMatrixInverse})),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(h),defines:h,ref:l,resolution:[f.width,f.height],aberrationStrength:e,envMap:u},c))};

package/core/MeshRefractionMaterial.d.ts

@@ -1,15 +1,13 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
 import { MeshRefractionMaterial as MeshRefractionMaterial_ } from '../materials/MeshRefractionMaterial';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            meshRefractionMaterial: typeof MeshRefractionMaterial_;
-        }
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        meshRefractionMaterial: typeof MeshRefractionMaterial_;
     }
 }
-type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
+export type MeshRefractionMaterialProps = ThreeElements['shaderMaterial'] & {
     envMap: THREE.CubeTexture | THREE.Texture;
     bounces?: number;
     ior?: number;
@@ -19,4 +17,3 @@ type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
     fastChroma?: boolean;
 };
 export declare function MeshRefractionMaterial({ aberrationStrength, fastChroma, envMap, ...props }: MeshRefractionMaterialProps): React.JSX.Element;
-export {};

package/core/MeshRefractionMaterial.js

@@ -15,7 +15,7 @@ function MeshRefractionMaterial({
   extend({
     MeshRefractionMaterial: MeshRefractionMaterial$1
   });
-  const material = useRef();
+  const material = useRef(null);
   const {
     size
   } = useThree();
@@ -42,7 +42,7 @@ function MeshRefractionMaterial({
   useLayoutEffect(() => {
     var _material$current;
     // Get the geometry of this materials parent
-    const geometry = (_material$current = material.current) == null || (_material$current = _material$current.__r3f) == null || (_material$current = _material$current.parent) == null ? void 0 : _material$current.geometry;
+    const geometry = (_material$current = material.current) == null || (_material$current = _material$current.__r3f) == null || (_material$current = _material$current.parent) == null || (_material$current = _material$current.object) == null ? void 0 : _material$current.geometry;
     // Update the BVH
     if (geometry) {
       material.current.bvh = new MeshBVHUniformStruct();

package/core/MeshTransmissionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("@babel/runtime/helpers/extends"),e=require("three"),t=require("react"),a=require("@react-three/fiber"),r=require("./Fbo.cjs.js"),i=require("../materials/DiscardMaterial.cjs.js");function o(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function s(n){if(n&&n.__esModule)return n;var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}require("./shaderMaterial.cjs.js");var l=o(n),c=s(e),m=s(t);class u extends c.MeshPhysicalMaterial{constructor(n=6,e=!1){super(),this.uniforms={chromaticAberration:{value:.05},transmission:{value:0},_transmission:{value:1},transmissionMap:{value:null},roughness:{value:0},thickness:{value:0},thicknessMap:{value:null},attenuationDistance:{value:1/0},attenuationColor:{value:new c.Color("white")},anisotropicBlur:{value:.1},time:{value:0},distortion:{value:0},distortionScale:{value:.5},temporalDistortion:{value:0},buffer:{value:null}},this.onBeforeCompile=t=>{t.uniforms={...t.uniforms,...this.uniforms},this.anisotropy>0&&(t.defines.USE_ANISOTROPY=""),e?t.defines.USE_SAMPLER="":t.defines.USE_TRANSMISSION="",t.fragmentShader="\n      uniform float chromaticAberration;         \n      uniform float anisotropicBlur;      \n      uniform float time;\n      uniform float distortion;\n      uniform float distortionScale;\n      uniform float temporalDistortion;\n      uniform sampler2D buffer;\n\n      vec3 random3(vec3 c) {\n        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));\n        vec3 r;\n        r.z = fract(512.0*j);\n        j *= .125;\n        r.x = fract(512.0*j);\n        j *= .125;\n        r.y = fract(512.0*j);\n        return r-0.5;\n      }\n\n      uint hash( uint x ) {\n        x += ( x << 10u );\n        x ^= ( x >>  6u );\n        x += ( x <<  3u );\n        x ^= ( x >> 11u );\n        x += ( x << 15u );\n        return x;\n      }\n\n      // Compound versions of the hashing algorithm I whipped together.\n      uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y)                         ); }\n      uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z)             ); }\n      uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }\n\n      // Construct a float with half-open range [0:1] using low 23 bits.\n      // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.\n      float floatConstruct( uint m ) {\n        const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask\n        const uint ieeeOne      = 0x3F800000u; // 1.0 in IEEE binary32\n        m &= ieeeMantissa;                     // Keep only mantissa bits (fractional part)\n        m |= ieeeOne;                          // Add fractional part to 1.0\n        float  f = uintBitsToFloat( m );       // Range [1:2]\n        return f - 1.0;                        // Range [0:1]\n      }\n\n      // Pseudo-random value in half-open range [0:1].\n      float randomBase( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }\n      float randomBase( vec2  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec3  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec4  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float rand(float seed) {\n        float result = randomBase(vec3(gl_FragCoord.xy, seed));\n        return result;\n      }\n\n      const float F3 =  0.3333333;\n      const float G3 =  0.1666667;\n\n      float snoise(vec3 p) {\n        vec3 s = floor(p + dot(p, vec3(F3)));\n        vec3 x = p - s + dot(s, vec3(G3));\n        vec3 e = step(vec3(0.0), x - x.yzx);\n        vec3 i1 = e*(1.0 - e.zxy);\n        vec3 i2 = 1.0 - e.zxy*(1.0 - e);\n        vec3 x1 = x - i1 + G3;\n        vec3 x2 = x - i2 + 2.0*G3;\n        vec3 x3 = x - 1.0 + 3.0*G3;\n        vec4 w, d;\n        w.x = dot(x, x);\n        w.y = dot(x1, x1);\n        w.z = dot(x2, x2);\n        w.w = dot(x3, x3);\n        w = max(0.6 - w, 0.0);\n        d.x = dot(random3(s), x);\n        d.y = dot(random3(s + i1), x1);\n        d.z = dot(random3(s + i2), x2);\n        d.w = dot(random3(s + 1.0), x3);\n        w *= w;\n        w *= w;\n        d *= w;\n        return dot(d, vec4(52.0));\n      }\n\n      float snoiseFractal(vec3 m) {\n        return 0.5333333* snoise(m)\n              +0.2666667* snoise(2.0*m)\n              +0.1333333* snoise(4.0*m)\n              +0.0666667* snoise(8.0*m);\n      }\n"+t.fragmentShader,t.fragmentShader=t.fragmentShader.replace("#include <transmission_pars_fragment>","\n        #ifdef USE_TRANSMISSION\n          // Transmission code is based on glTF-Sampler-Viewer\n          // https://github.com/KhronosGroup/glTF-Sample-Viewer\n          uniform float _transmission;\n          uniform float thickness;\n          uniform float attenuationDistance;\n          uniform vec3 attenuationColor;\n          #ifdef USE_TRANSMISSIONMAP\n            uniform sampler2D transmissionMap;\n          #endif\n          #ifdef USE_THICKNESSMAP\n            uniform sampler2D thicknessMap;\n          #endif\n          uniform vec2 transmissionSamplerSize;\n          uniform sampler2D transmissionSamplerMap;\n          uniform mat4 modelMatrix;\n          uniform mat4 projectionMatrix;\n          varying vec3 vWorldPosition;\n          vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {\n            // Direction of refracted light.\n            vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );\n            // Compute rotation-independant scaling of the model matrix.\n            vec3 modelScale;\n            modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );\n            modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );\n            modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );\n            // The thickness is specified in local space.\n            return normalize( refractionVector ) * thickness * modelScale;\n          }\n          float applyIorToRoughness( const in float roughness, const in float ior ) {\n            // Scale roughness with IOR so that an IOR of 1.0 results in no microfacet refraction and\n            // an IOR of 1.5 results in the default amount of microfacet refraction.\n            return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );\n          }\n          vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {\n            float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );            \n            #ifdef USE_SAMPLER\n              #ifdef texture2DLodEXT\n                return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #else\n                return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #endif\n            #else\n              return texture2D(buffer, fragCoord.xy);\n            #endif\n          }\n          vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {\n            if ( isinf( attenuationDistance ) ) {\n              // Attenuation distance is +∞, i.e. the transmitted color is not attenuated at all.\n              return radiance;\n            } else {\n              // Compute light attenuation using Beer's law.\n              vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;\n              vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); // Beer's law\n              return transmittance * radiance;\n            }\n          }\n          vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,\n            const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,\n            const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,\n            const in vec3 attenuationColor, const in float attenuationDistance ) {\n            vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );\n            vec3 refractedRayExit = position + transmissionRay;\n            // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.\n            vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );\n            vec2 refractionCoords = ndcPos.xy / ndcPos.w;\n            refractionCoords += 1.0;\n            refractionCoords /= 2.0;\n            // Sample framebuffer to get pixel the refracted ray hits.\n            vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );\n            vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );\n            // Get the specular component.\n            vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );\n            return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );\n          }\n        #endif\n"),t.fragmentShader=t.fragmentShader.replace("#include <transmission_fragment>",`  \n        // Improve the refraction to use the world pos\n        material.transmission = _transmission;\n        material.transmissionAlpha = 1.0;\n        material.thickness = thickness;\n        material.attenuationDistance = attenuationDistance;\n        material.attenuationColor = attenuationColor;\n        #ifdef USE_TRANSMISSIONMAP\n          material.transmission *= texture2D( transmissionMap, vUv ).r;\n        #endif\n        #ifdef USE_THICKNESSMAP\n          material.thickness *= texture2D( thicknessMap, vUv ).g;\n        #endif\n        \n        vec3 pos = vWorldPosition;\n        float runningSeed = 0.0;\n        vec3 v = normalize( cameraPosition - pos );\n        vec3 n = inverseTransformDirection( normal, viewMatrix );\n        vec3 transmission = vec3(0.0);\n        float transmissionR, transmissionB, transmissionG;\n        float randomCoords = rand(runningSeed++);\n        float thickness_smear = thickness * max(pow(roughnessFactor, 0.33), anisotropicBlur);\n        vec3 distortionNormal = vec3(0.0);\n        vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;\n        if (distortion > 0.0) {\n          distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));\n        }\n        for (float i = 0.0; i < ${n}.0; i ++) {\n          vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5)) * pow(rand(runningSeed++), 0.33) + distortionNormal);\n          transmissionR = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness  + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).r;\n          transmissionG = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior  * (1.0 + chromaticAberration * (i + randomCoords) / float(${n})) , material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).g;\n          transmissionB = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${n})), material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).b;\n          transmission.r += transmissionR;\n          transmission.g += transmissionG;\n          transmission.b += transmissionB;\n        }\n        transmission /= ${n}.0;\n        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`)},Object.keys(this.uniforms).forEach((n=>Object.defineProperty(this,n,{get:()=>this.uniforms[n].value,set:e=>this.uniforms[n].value=e})))}}const f=m.forwardRef((({buffer:n,transmissionSampler:e=!1,backside:t=!1,side:o=c.FrontSide,transmission:s=1,thickness:f=0,backsideThickness:d=0,backsideEnvMapIntensity:v=1,samples:h=10,resolution:p,backsideResolution:x,background:g,anisotropy:S,anisotropicBlur:M,...C},b)=>{a.extend({MeshTransmissionMaterial:u});const y=m.useRef(null),[w]=m.useState((()=>new i.DiscardMaterial)),k=r.useFBO(x||p),D=r.useFBO(p);let R,T,F,B;return a.useFrame((n=>{y.current.time=n.clock.getElapsedTime(),y.current.buffer!==D.texture||e||(B=y.current.__r3f.parent,B&&(F=n.gl.toneMapping,R=n.scene.background,T=y.current.envMapIntensity,n.gl.toneMapping=c.NoToneMapping,g&&(n.scene.background=g),B.material=w,t&&(n.gl.setRenderTarget(k),n.gl.render(n.scene,n.camera),B.material=y.current,B.material.buffer=k.texture,B.material.thickness=d,B.material.side=c.BackSide,B.material.envMapIntensity=v),n.gl.setRenderTarget(D),n.gl.render(n.scene,n.camera),B.material=y.current,B.material.thickness=f,B.material.side=o,B.material.buffer=D.texture,B.material.envMapIntensity=T,n.scene.background=R,n.gl.setRenderTarget(null),n.gl.toneMapping=F))})),m.useImperativeHandle(b,(()=>y.current),[]),m.createElement("meshTransmissionMaterial",l.default({args:[h,e],ref:y},C,{buffer:n||D.texture,_transmission:s,anisotropicBlur:null!=M?M:S,transmission:e?s:0,thickness:f,side:o}))}));exports.MeshTransmissionMaterial=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("@babel/runtime/helpers/extends"),e=require("three"),t=require("react"),a=require("@react-three/fiber"),r=require("./Fbo.cjs.js"),o=require("../materials/DiscardMaterial.cjs.js");function i(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function s(n){if(n&&n.__esModule)return n;var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}require("./shaderMaterial.cjs.js");var l=i(n),c=s(e),m=s(t);class u extends c.MeshPhysicalMaterial{constructor(n=6,e=!1){super(),this.uniforms={chromaticAberration:{value:.05},transmission:{value:0},_transmission:{value:1},transmissionMap:{value:null},roughness:{value:0},thickness:{value:0},thicknessMap:{value:null},attenuationDistance:{value:1/0},attenuationColor:{value:new c.Color("white")},anisotropicBlur:{value:.1},time:{value:0},distortion:{value:0},distortionScale:{value:.5},temporalDistortion:{value:0},buffer:{value:null}},this.onBeforeCompile=t=>{t.uniforms={...t.uniforms,...this.uniforms},this.anisotropy>0&&(t.defines.USE_ANISOTROPY=""),e?t.defines.USE_SAMPLER="":t.defines.USE_TRANSMISSION="",t.fragmentShader="\n      uniform float chromaticAberration;         \n      uniform float anisotropicBlur;      \n      uniform float time;\n      uniform float distortion;\n      uniform float distortionScale;\n      uniform float temporalDistortion;\n      uniform sampler2D buffer;\n\n      vec3 random3(vec3 c) {\n        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));\n        vec3 r;\n        r.z = fract(512.0*j);\n        j *= .125;\n        r.x = fract(512.0*j);\n        j *= .125;\n        r.y = fract(512.0*j);\n        return r-0.5;\n      }\n\n      uint hash( uint x ) {\n        x += ( x << 10u );\n        x ^= ( x >>  6u );\n        x += ( x <<  3u );\n        x ^= ( x >> 11u );\n        x += ( x << 15u );\n        return x;\n      }\n\n      // Compound versions of the hashing algorithm I whipped together.\n      uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y)                         ); }\n      uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z)             ); }\n      uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }\n\n      // Construct a float with half-open range [0:1] using low 23 bits.\n      // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.\n      float floatConstruct( uint m ) {\n        const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask\n        const uint ieeeOne      = 0x3F800000u; // 1.0 in IEEE binary32\n        m &= ieeeMantissa;                     // Keep only mantissa bits (fractional part)\n        m |= ieeeOne;                          // Add fractional part to 1.0\n        float  f = uintBitsToFloat( m );       // Range [1:2]\n        return f - 1.0;                        // Range [0:1]\n      }\n\n      // Pseudo-random value in half-open range [0:1].\n      float randomBase( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }\n      float randomBase( vec2  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec3  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float randomBase( vec4  v ) { return floatConstruct(hash(floatBitsToUint(v))); }\n      float rand(float seed) {\n        float result = randomBase(vec3(gl_FragCoord.xy, seed));\n        return result;\n      }\n\n      const float F3 =  0.3333333;\n      const float G3 =  0.1666667;\n\n      float snoise(vec3 p) {\n        vec3 s = floor(p + dot(p, vec3(F3)));\n        vec3 x = p - s + dot(s, vec3(G3));\n        vec3 e = step(vec3(0.0), x - x.yzx);\n        vec3 i1 = e*(1.0 - e.zxy);\n        vec3 i2 = 1.0 - e.zxy*(1.0 - e);\n        vec3 x1 = x - i1 + G3;\n        vec3 x2 = x - i2 + 2.0*G3;\n        vec3 x3 = x - 1.0 + 3.0*G3;\n        vec4 w, d;\n        w.x = dot(x, x);\n        w.y = dot(x1, x1);\n        w.z = dot(x2, x2);\n        w.w = dot(x3, x3);\n        w = max(0.6 - w, 0.0);\n        d.x = dot(random3(s), x);\n        d.y = dot(random3(s + i1), x1);\n        d.z = dot(random3(s + i2), x2);\n        d.w = dot(random3(s + 1.0), x3);\n        w *= w;\n        w *= w;\n        d *= w;\n        return dot(d, vec4(52.0));\n      }\n\n      float snoiseFractal(vec3 m) {\n        return 0.5333333* snoise(m)\n              +0.2666667* snoise(2.0*m)\n              +0.1333333* snoise(4.0*m)\n              +0.0666667* snoise(8.0*m);\n      }\n"+t.fragmentShader,t.fragmentShader=t.fragmentShader.replace("#include <transmission_pars_fragment>","\n        #ifdef USE_TRANSMISSION\n          // Transmission code is based on glTF-Sampler-Viewer\n          // https://github.com/KhronosGroup/glTF-Sample-Viewer\n          uniform float _transmission;\n          uniform float thickness;\n          uniform float attenuationDistance;\n          uniform vec3 attenuationColor;\n          #ifdef USE_TRANSMISSIONMAP\n            uniform sampler2D transmissionMap;\n          #endif\n          #ifdef USE_THICKNESSMAP\n            uniform sampler2D thicknessMap;\n          #endif\n          uniform vec2 transmissionSamplerSize;\n          uniform sampler2D transmissionSamplerMap;\n          uniform mat4 modelMatrix;\n          uniform mat4 projectionMatrix;\n          varying vec3 vWorldPosition;\n          vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {\n            // Direction of refracted light.\n            vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );\n            // Compute rotation-independant scaling of the model matrix.\n            vec3 modelScale;\n            modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );\n            modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );\n            modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );\n            // The thickness is specified in local space.\n            return normalize( refractionVector ) * thickness * modelScale;\n          }\n          float applyIorToRoughness( const in float roughness, const in float ior ) {\n            // Scale roughness with IOR so that an IOR of 1.0 results in no microfacet refraction and\n            // an IOR of 1.5 results in the default amount of microfacet refraction.\n            return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );\n          }\n          vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {\n            float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );            \n            #ifdef USE_SAMPLER\n              #ifdef texture2DLodEXT\n                return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #else\n                return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);\n              #endif\n            #else\n              return texture2D(buffer, fragCoord.xy);\n            #endif\n          }\n          vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {\n            if ( isinf( attenuationDistance ) ) {\n              // Attenuation distance is +∞, i.e. the transmitted color is not attenuated at all.\n              return radiance;\n            } else {\n              // Compute light attenuation using Beer's law.\n              vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;\n              vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); // Beer's law\n              return transmittance * radiance;\n            }\n          }\n          vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,\n            const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,\n            const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,\n            const in vec3 attenuationColor, const in float attenuationDistance ) {\n            vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );\n            vec3 refractedRayExit = position + transmissionRay;\n            // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.\n            vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );\n            vec2 refractionCoords = ndcPos.xy / ndcPos.w;\n            refractionCoords += 1.0;\n            refractionCoords /= 2.0;\n            // Sample framebuffer to get pixel the refracted ray hits.\n            vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );\n            vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );\n            // Get the specular component.\n            vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );\n            return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );\n          }\n        #endif\n"),t.fragmentShader=t.fragmentShader.replace("#include <transmission_fragment>",`  \n        // Improve the refraction to use the world pos\n        material.transmission = _transmission;\n        material.transmissionAlpha = 1.0;\n        material.thickness = thickness;\n        material.attenuationDistance = attenuationDistance;\n        material.attenuationColor = attenuationColor;\n        #ifdef USE_TRANSMISSIONMAP\n          material.transmission *= texture2D( transmissionMap, vUv ).r;\n        #endif\n        #ifdef USE_THICKNESSMAP\n          material.thickness *= texture2D( thicknessMap, vUv ).g;\n        #endif\n        \n        vec3 pos = vWorldPosition;\n        float runningSeed = 0.0;\n        vec3 v = normalize( cameraPosition - pos );\n        vec3 n = inverseTransformDirection( normal, viewMatrix );\n        vec3 transmission = vec3(0.0);\n        float transmissionR, transmissionB, transmissionG;\n        float randomCoords = rand(runningSeed++);\n        float thickness_smear = thickness * max(pow(roughnessFactor, 0.33), anisotropicBlur);\n        vec3 distortionNormal = vec3(0.0);\n        vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;\n        if (distortion > 0.0) {\n          distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));\n        }\n        for (float i = 0.0; i < ${n}.0; i ++) {\n          vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5)) * pow(rand(runningSeed++), 0.33) + distortionNormal);\n          transmissionR = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness  + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).r;\n          transmissionG = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior  * (1.0 + chromaticAberration * (i + randomCoords) / float(${n})) , material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).g;\n          transmissionB = getIBLVolumeRefraction(\n            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,\n            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${n})), material.thickness + thickness_smear * (i + randomCoords) / float(${n}),\n            material.attenuationColor, material.attenuationDistance\n          ).b;\n          transmission.r += transmissionR;\n          transmission.g += transmissionG;\n          transmission.b += transmissionB;\n        }\n        transmission /= ${n}.0;\n        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`)},Object.keys(this.uniforms).forEach((n=>Object.defineProperty(this,n,{get:()=>this.uniforms[n].value,set:e=>this.uniforms[n].value=e})))}}const f=m.forwardRef((({buffer:n,transmissionSampler:e=!1,backside:t=!1,side:i=c.FrontSide,transmission:s=1,thickness:f=0,backsideThickness:d=0,backsideEnvMapIntensity:v=1,samples:h=10,resolution:p,backsideResolution:x,background:g,anisotropy:S,anisotropicBlur:M,...b},C)=>{a.extend({MeshTransmissionMaterial:u});const y=m.useRef(null),[w]=m.useState((()=>new o.DiscardMaterial)),k=r.useFBO(x||p),D=r.useFBO(p);let R,T,F,j;return a.useFrame((n=>{var a;(y.current.time=n.clock.getElapsedTime(),y.current.buffer!==D.texture||e)||(j=null==(a=y.current.__r3f.parent)?void 0:a.object,j&&(F=n.gl.toneMapping,R=n.scene.background,T=y.current.envMapIntensity,n.gl.toneMapping=c.NoToneMapping,g&&(n.scene.background=g),j.material=w,t&&(n.gl.setRenderTarget(k),n.gl.render(n.scene,n.camera),j.material=y.current,j.material.buffer=k.texture,j.material.thickness=d,j.material.side=c.BackSide,j.material.envMapIntensity=v),n.gl.setRenderTarget(D),n.gl.render(n.scene,n.camera),j.material=y.current,j.material.thickness=f,j.material.side=i,j.material.buffer=D.texture,j.material.envMapIntensity=T,n.scene.background=R,n.gl.setRenderTarget(null),n.gl.toneMapping=F))})),m.useImperativeHandle(C,(()=>y.current),[]),m.createElement("meshTransmissionMaterial",l.default({args:[h,e],ref:y},b,{buffer:n||D.texture,_transmission:s,anisotropicBlur:null!=M?M:S,transmission:e?s:0,thickness:f,side:i}))}));exports.MeshTransmissionMaterial=f;

package/core/MeshTransmissionMaterial.d.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type MeshTransmissionMaterialType = Omit<JSX.IntrinsicElements['meshPhysicalMaterial'], 'args' | 'roughness' | 'thickness' | 'transmission'> & {
+type MeshTransmissionMaterialType = Omit<ThreeElements['meshPhysicalMaterial'], 'args' | 'roughness' | 'thickness' | 'transmission'> & {
     transmission?: number;
     thickness?: number;
     roughness?: number;
@@ -14,7 +15,7 @@ type MeshTransmissionMaterialType = Omit<JSX.IntrinsicElements['meshPhysicalMate
     time?: number;
     args?: [samples: number, transmissionSampler: boolean];
 };
-type MeshTransmissionMaterialProps = Omit<MeshTransmissionMaterialType, 'args'> & {
+export type MeshTransmissionMaterialProps = Omit<MeshTransmissionMaterialType, 'ref' | 'args'> & {
     transmissionSampler?: boolean;
     backside?: boolean;
     backsideThickness?: number;
@@ -24,12 +25,10 @@ type MeshTransmissionMaterialProps = Omit<MeshTransmissionMaterialType, 'args'>
     samples?: number;
     background?: THREE.Texture | THREE.Color;
 };
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            meshTransmissionMaterial: MeshTransmissionMaterialType;
-        }
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        meshTransmissionMaterial: MeshTransmissionMaterialType;
     }
 }
-export declare const MeshTransmissionMaterial: ForwardRefComponent<MeshTransmissionMaterialProps, JSX.IntrinsicElements['meshTransmissionMaterial']>;
+export declare const MeshTransmissionMaterial: ForwardRefComponent<MeshTransmissionMaterialProps, ThreeElements['meshTransmissionMaterial']>;
 export {};

package/core/MeshTransmissionMaterial.js

@@ -334,7 +334,8 @@ const MeshTransmissionMaterial = /* @__PURE__ */React.forwardRef(({
     ref.current.time = state.clock.getElapsedTime();
     // Render only if the buffer matches the built-in and no transmission sampler is set
     if (ref.current.buffer === fboMain.texture && !transmissionSampler) {
-      parent = ref.current.__r3f.parent;
+      var _r3f$parent;
+      parent = (_r3f$parent = ref.current.__r3f.parent) == null ? void 0 : _r3f$parent.object;
       if (parent) {
         // Save defaults
         oldTone = state.gl.toneMapping;

package/core/MeshWobbleMaterial.d.ts

@@ -1,21 +1,6 @@
 import { IUniform, MeshStandardMaterial, MeshStandardMaterialParameters } from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
-    time?: number;
-    factor?: number;
-    speed?: number;
-};
-type Props = WobbleMaterialType & {
-    speed?: number;
-    factor?: number;
-};
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            wobbleMaterialImpl: WobbleMaterialType;
-        }
-    }
-}
 interface Uniform<T> {
     value: T;
 }
@@ -34,5 +19,18 @@ declare class WobbleMaterialImpl extends MeshStandardMaterial {
     get factor(): number;
     set factor(v: number);
 }
-export declare const MeshWobbleMaterial: ForwardRefComponent<Props, WobbleMaterialImpl>;
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        wobbleMaterialImpl: ThreeElements['meshStandardMaterial'] & {
+            time?: number;
+            factor?: number;
+            speed?: number;
+        };
+    }
+}
+export type WobbleMaterialProps = Omit<ThreeElements['meshStandardMaterial'], 'ref'> & {
+    speed?: number;
+    factor?: number;
+};
+export declare const MeshWobbleMaterial: ForwardRefComponent<WobbleMaterialProps, WobbleMaterialImpl>;
 export {};

package/core/MotionPathControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=u(e),a=c(t),i=c(r);const f=i.createContext(null);function l(){return i.useContext(f)}function p({points:e=50}){const{path:t}=l(),[r,n]=i.useState([]),[o]=i.useState((()=>new a.MeshBasicMaterial({color:"black"}))),[u]=i.useState((()=>new a.SphereGeometry(.025,16,16))),c=i.useRef([]);return i.useEffect((()=>{t.curves!==c.current&&(n(t.getPoints(e)),c.current=t.curves)})),i.createElement(i.Fragment,null,r.map(((e,t)=>i.createElement("mesh",{key:t,material:o,geometry:u,position:[e.x,e.y,e.z]}))))}const m=i.forwardRef((({children:e,curves:t=[],object:r,debug:u=!1,smooth:c=!1,focus:l,offset:m,eps:d=1e-5,damping:g=.1,focusDamping:v=.1,maxSpeed:b=1/0,...h},j)=>{const{camera:y}=n.useThree(),P=i.useRef(),[w]=i.useState((()=>new a.CurvePath)),x=i.useRef(null!=m?m:0),O=i.useMemo((()=>({focus:l,object:(null==r?void 0:r.current)instanceof a.Object3D?r:{current:y},path:w,current:x.current,offset:x.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,r]);i.useLayoutEffect((()=>{var e;w.curves=[];const r=t.length>0?t:null==(e=P.current)?void 0:e.__r3f.objects;for(var n=0;n<r.length;n++)w.add(r[n]);if(c){const e=w.getPoints("number"==typeof c?c:1),t=new a.CatmullRomCurve3(e);w.curves=[t]}w.updateArcLengths()})),i.useImperativeHandle(j,(()=>P.current),[]),i.useLayoutEffect((()=>{x.current=o.misc.repeat(x.current,1)}),[m]);let E=0;const[C]=i.useState((()=>new a.Vector3));return n.useFrame(((e,t)=>{if(E=O.offset,o.easing.damp(x,"current",void 0!==m?m:O.current,g,t,b,void 0,d),O.offset=o.misc.repeat(x.current,1),w.getCurveLengths().length>0){w.getPointAt(O.offset,O.point),w.getTangentAt(O.offset,O.tangent).normalize(),w.getPointAt(o.misc.repeat(x.current-(E-O.offset),1),O.next);const e=(null==r?void 0:r.current)instanceof a.Object3D?r.current:y;e.position.copy(O.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(C):l,v,t,b,void 0,d)}})),i.createElement("group",s.default({ref:P},h),i.createElement(f.Provider,{value:O},e,u&&i.createElement(p,null)))}));exports.MotionPathControls=m,exports.useMotion=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=u(e),a=c(t),i=c(r);const f=i.createContext(null);function l(){return i.useContext(f)}function p({points:e=50}){const{path:t}=l(),[r,n]=i.useState([]),[o]=i.useState((()=>new a.MeshBasicMaterial({color:"black"}))),[u]=i.useState((()=>new a.SphereGeometry(.025,16,16))),c=i.useRef([]);return i.useEffect((()=>{t.curves!==c.current&&(n(t.getPoints(e)),c.current=t.curves)})),i.createElement(i.Fragment,null,r.map(((e,t)=>i.createElement("mesh",{key:t,material:o,geometry:u,position:[e.x,e.y,e.z]}))))}const m=i.forwardRef((({children:e,curves:t=[],object:r,debug:u=!1,smooth:c=!1,focus:l,offset:m,eps:d=1e-5,damping:g=.1,focusDamping:v=.1,maxSpeed:h=1/0,...b},j)=>{const{camera:y}=n.useThree(),P=i.useRef(null),[w]=i.useState((()=>new a.CurvePath)),x=i.useRef(null!=m?m:0),O=i.useMemo((()=>({focus:l,object:(null==r?void 0:r.current)instanceof a.Object3D?r:{current:y},path:w,current:x.current,offset:x.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,r]);i.useLayoutEffect((()=>{w.curves=[];const e=t.length>0?t:P.current.__r3f.children.map((e=>e.object));for(var r=0;r<e.length;r++)w.add(e[r]);if(c){const e=w.getPoints("number"==typeof c?c:1),t=new a.CatmullRomCurve3(e);w.curves=[t]}w.updateArcLengths()})),i.useImperativeHandle(j,(()=>P.current),[]),i.useLayoutEffect((()=>{x.current=o.misc.repeat(x.current,1)}),[m]);let E=0;const[C]=i.useState((()=>new a.Vector3));return n.useFrame(((e,t)=>{if(E=O.offset,o.easing.damp(x,"current",void 0!==m?m:O.current,g,t,h,void 0,d),O.offset=o.misc.repeat(x.current,1),w.getCurveLengths().length>0){w.getPointAt(O.offset,O.point),w.getTangentAt(O.offset,O.tangent).normalize(),w.getPointAt(o.misc.repeat(x.current-(E-O.offset),1),O.next);const e=(null==r?void 0:r.current)instanceof a.Object3D?r.current:y;e.position.copy(O.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(C):l,v,t,h,void 0,d)}})),i.createElement("group",s.default({ref:P},b),i.createElement(f.Provider,{value:O},e,u&&i.createElement(p,null)))}));exports.MotionPathControls=m,exports.useMotion=l;

package/core/MotionPathControls.d.ts

@@ -1,10 +1,11 @@
 import * as THREE from 'three';
 import * as React from 'react';
-type MotionPathProps = JSX.IntrinsicElements['group'] & {
+import { ThreeElements } from '@react-three/fiber';
+export type MotionPathProps = Omit<ThreeElements['group'], 'ref'> & {
     curves?: THREE.Curve<THREE.Vector3>[];
     debug?: boolean;
-    object?: React.MutableRefObject<THREE.Object3D>;
-    focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>;
+    object?: React.RefObject<THREE.Object3D>;
+    focus?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>;
     offset?: number;
     smooth?: boolean | number;
     eps?: number;
@@ -15,13 +16,24 @@ type MotionPathProps = JSX.IntrinsicElements['group'] & {
 type MotionState = {
     current: number;
     path: THREE.CurvePath<THREE.Vector3>;
-    focus: React.MutableRefObject<THREE.Object3D> | [x: number, y: number, z: number] | undefined;
-    object: React.MutableRefObject<THREE.Object3D>;
+    focus: React.RefObject<THREE.Object3D> | [x: number, y: number, z: number] | undefined;
+    object: React.RefObject<THREE.Object3D>;
     offset: number;
     point: THREE.Vector3;
     tangent: THREE.Vector3;
     next: THREE.Vector3;
 };
 export declare function useMotion(): MotionState;
-export declare const MotionPathControls: React.ForwardRefExoticComponent<Omit<MotionPathProps, "ref"> & React.RefAttributes<THREE.Group>>;
+export declare const MotionPathControls: 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"> & {
+    curves?: THREE.Curve<THREE.Vector3>[];
+    debug?: boolean;
+    object?: React.RefObject<THREE.Object3D>;
+    focus?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>;
+    offset?: number;
+    smooth?: boolean | number;
+    eps?: number;
+    damping?: number;
+    focusDamping?: number;
+    maxSpeed?: number;
+} & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
 export {};

package/core/MotionPathControls.js

@@ -51,7 +51,7 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
   const {
     camera
   } = useThree();
-  const ref = React.useRef();
+  const ref = React.useRef(null);
   const [path] = React.useState(() => new THREE.CurvePath());
   const pos = React.useRef(offset !== null && offset !== void 0 ? offset : 0);
   const state = React.useMemo(() => ({
@@ -67,9 +67,8 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
     next: new THREE.Vector3()
   }), [focus, object]);
   React.useLayoutEffect(() => {
-    var _ref$current;
     path.curves = [];
-    const _curves = curves.length > 0 ? curves : (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.objects;
+    const _curves = curves.length > 0 ? curves : ref.current.__r3f.children.map(instance => instance.object);
     for (var i = 0; i < _curves.length; i++) path.add(_curves[i]);
 
     //Smoothen curve

package/core/MultiMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react");function t(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 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 n=t(e),a=u(r);exports.MultiMaterial=function(e){const r=a.useRef(null);return a.useLayoutEffect((()=>{var e;const t=null==(e=r.current)?void 0:e.parent,u=null==t?void 0:t.geometry;if(u){const e=t.material;t.material=r.current.__r3f.objects;const n=[...u.groups];return u.clearGroups(),t.material.forEach(((e,r)=>{r<t.material.length-1&&(e.depthWrite=!1),u.addGroup(0,1/0,r)})),()=>{t.material=e,u.groups=n}}})),a.createElement("group",n.default({ref:r},e))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react");function t(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 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 n=t(e),a=u(r);exports.MultiMaterial=function(e){const r=a.useRef(null);return a.useLayoutEffect((()=>{const e=r.current.parent,t=null==e?void 0:e.geometry;if(t){const u=e.material;e.material=r.current.__r3f.children.map((e=>e.object));const n=[...t.groups];return t.clearGroups(),e.material.forEach(((r,u)=>{u<e.material.length-1&&(r.depthWrite=!1),t.addGroup(0,1/0,u)})),()=>{e.material=u,t.groups=n}}})),a.createElement("group",n.default({ref:r},e))};

package/core/MultiMaterial.d.ts

@@ -1,2 +1,4 @@
+import { ThreeElements } from '@react-three/fiber';
 import * as React from 'react';
-export declare function MultiMaterial(props: JSX.IntrinsicElements['group']): React.JSX.Element;
+export type MultiMaterialProps = Omit<ThreeElements['group'], 'ref'>;
+export declare function MultiMaterial(props: MultiMaterialProps): React.JSX.Element;

package/core/MultiMaterial.js

@@ -4,12 +4,11 @@ import * as React from 'react';
 function MultiMaterial(props) {
   const group = React.useRef(null);
   React.useLayoutEffect(() => {
-    var _group$current;
-    const parent = (_group$current = group.current) == null ? void 0 : _group$current.parent;
+    const parent = group.current.parent;
     const geometry = parent == null ? void 0 : parent.geometry;
     if (geometry) {
       const oldMaterial = parent.material;
-      parent.material = group.current.__r3f.objects;
+      parent.material = group.current.__r3f.children.map(instance => instance.object);
       const oldGroups = [...geometry.groups];
       geometry.clearGroups();
       parent.material.forEach((material, index) => {

package/core/OrbitControls.d.ts

@@ -1,12 +1,12 @@
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ReactThreeFiber, ThreeElement } from '@react-three/fiber';
 import { Camera, Event } from 'three';
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
-import { ForwardRefComponent } from '../helpers/ts-utils';
+import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
 type ExtractCallback<T, E extends string> = T extends {
     addEventListener(event: E, callback: infer C): void;
 } ? C : never;
 export type OrbitControlsChangeEvent = Parameters<ExtractCallback<OrbitControlsImpl, 'change'>>[0];
-export type OrbitControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<OrbitControlsImpl, typeof OrbitControlsImpl>, {
+export type OrbitControlsProps = Omit<Overwrite<ThreeElement<typeof OrbitControlsImpl>, {
     camera?: Camera;
     domElement?: HTMLElement;
     enableDamping?: boolean;
@@ -17,6 +17,6 @@ export type OrbitControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.
     regress?: boolean;
     target?: ReactThreeFiber.Vector3;
     keyEvents?: boolean | HTMLElement;
-}>, 'ref'>;
+}>, 'ref' | 'args'>;
 export declare const OrbitControls: ForwardRefComponent<OrbitControlsProps, OrbitControlsImpl>;
 export {};

package/core/OrthographicCamera.d.ts

@@ -1,8 +1,9 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { OrthographicCamera as OrthographicCameraImpl } from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type Props = Omit<JSX.IntrinsicElements['orthographicCamera'], 'children'> & {
+export type OrthographicCameraProps = Omit<ThreeElements['orthographicCamera'], 'ref' | 'children'> & {
     makeDefault?: boolean;
     manual?: boolean;
     children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);
@@ -10,5 +11,4 @@ type Props = Omit<JSX.IntrinsicElements['orthographicCamera'], 'children'> & {
     resolution?: number;
     envMap?: THREE.Texture;
 };
-export declare const OrthographicCamera: ForwardRefComponent<Props, OrthographicCameraImpl>;
-export {};
+export declare const OrthographicCamera: ForwardRefComponent<OrthographicCameraProps, OrthographicCameraImpl>;

package/core/Outlines.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),r=require("react"),t=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var l=a(e),p=s(n),u=s(r);const f=t.shaderMaterial({screenspace:!1,color:new p.Color("black"),opacity:1,thickness:.05,size:new p.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   #include <clipping_planes_pars_vertex>\n   uniform float thickness;\n   uniform bool screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     #include <clipping_planes_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   #include <clipping_planes_pars_fragment>\n   void main(){\n     #include <clipping_planes_fragment>\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:r=!1,screenspace:t=!1,toneMapped:c=!0,polygonOffset:a=!1,polygonOffsetFactor:s=0,renderOrder:d=0,thickness:m=.05,angle:g=Math.PI,clippingPlanes:v,...h}){const y=u.useRef(),[_]=u.useState((()=>new f({side:p.BackSide}))),{gl:x}=i.useThree(),M=x.getDrawingBufferSize(new p.Vector2);u.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const P=u.useRef(0),b=u.useRef();return u.useLayoutEffect((()=>{const e=y.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(P.current!==g||b.current!==n.geometry)){var r;P.current=g,b.current=n.geometry;let t=null==(r=e.children)?void 0:r[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new p.SkinnedMesh,t.material=_,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new p.InstancedMesh(n.geometry,_,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new p.Mesh,t.material=_,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry,t.morphTargetInfluences=n.morphTargetInfluences,t.morphTargetDictionary=n.morphTargetDictionary}})),u.useLayoutEffect((()=>{const o=y.current;if(!o)return;const l=o.children[0];if(l){l.renderOrder=d;const p=o.parent;i.applyProps(l,{morphTargetInfluences:p.morphTargetInfluences,morphTargetDictionary:p.morphTargetDictionary}),i.applyProps(l.material,{transparent:r,thickness:m,color:e,opacity:n,size:M,screenspace:t,toneMapped:c,polygonOffset:a,polygonOffsetFactor:s,clippingPlanes:v,clipping:v&&v.length>0})}})),u.useEffect((()=>()=>{const e=y.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),u.createElement("group",l.default({ref:y},h))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),r=require("react"),t=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var l=a(e),p=s(n),u=s(r);const f=t.shaderMaterial({screenspace:!1,color:new p.Color("black"),opacity:1,thickness:.05,size:new p.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   #include <clipping_planes_pars_vertex>\n   uniform float thickness;\n   uniform bool screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     #include <clipping_planes_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   #include <clipping_planes_pars_fragment>\n   void main(){\n     #include <clipping_planes_fragment>\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:r=!1,screenspace:t=!1,toneMapped:c=!0,polygonOffset:a=!1,polygonOffsetFactor:s=0,renderOrder:d=0,thickness:m=.05,angle:g=Math.PI,clippingPlanes:v,...h}){const y=u.useRef(null),[_]=u.useState((()=>new f({side:p.BackSide}))),{gl:x}=i.useThree(),M=x.getDrawingBufferSize(new p.Vector2);u.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const P=u.useRef(0),b=u.useRef(null);return u.useLayoutEffect((()=>{const e=y.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(P.current!==g||b.current!==n.geometry)){var r;P.current=g,b.current=n.geometry;let t=null==(r=e.children)?void 0:r[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new p.SkinnedMesh,t.material=_,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new p.InstancedMesh(n.geometry,_,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new p.Mesh,t.material=_,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry,t.morphTargetInfluences=n.morphTargetInfluences,t.morphTargetDictionary=n.morphTargetDictionary}})),u.useLayoutEffect((()=>{const o=y.current;if(!o)return;const l=o.children[0];if(l){l.renderOrder=d;const p=o.parent;i.applyProps(l,{morphTargetInfluences:p.morphTargetInfluences,morphTargetDictionary:p.morphTargetDictionary}),i.applyProps(l.material,{transparent:r,thickness:m,color:e,opacity:n,size:M,screenspace:t,toneMapped:c,polygonOffset:a,polygonOffsetFactor:s,clippingPlanes:v,clipping:v&&v.length>0})}})),u.useEffect((()=>()=>{const e=y.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),u.createElement("group",l.default({ref:y},h))};

package/core/Outlines.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
-import { ReactThreeFiber } from '@react-three/fiber';
-type OutlinesProps = JSX.IntrinsicElements['group'] & {
+import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+export type OutlinesProps = Omit<ThreeElements['group'], 'ref'> & {
     color?: ReactThreeFiber.Color;
     screenspace?: boolean;
     opacity?: number;
@@ -15,4 +15,3 @@ type OutlinesProps = JSX.IntrinsicElements['group'] & {
     renderOrder?: number;
 };
 export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, renderOrder, thickness, angle, clippingPlanes, ...props }: OutlinesProps): React.JSX.Element;
-export {};

package/core/Outlines.js

@@ -71,7 +71,7 @@ function Outlines({
   clippingPlanes,
   ...props
 }) {
-  const ref = React.useRef();
+  const ref = React.useRef(null);
   const [material] = React.useState(() => new OutlinesMaterial({
     side: THREE.BackSide
   }));
@@ -83,7 +83,7 @@ function Outlines({
     OutlinesMaterial
   }), []);
   const oldAngle = React.useRef(0);
-  const oldGeometry = React.useRef();
+  const oldGeometry = React.useRef(null);
   React.useLayoutEffect(() => {
     const group = ref.current;
     if (!group) return;

package/core/PerformanceMonitor.d.ts

@@ -15,9 +15,9 @@ export type PerformanceMonitorApi = {
     flipped: number;
     fallback: boolean;
     subscriptions: Map<Symbol, Partial<PerformanceMonitorHookApi>>;
-    subscribe: (ref: React.MutableRefObject<Partial<PerformanceMonitorHookApi>>) => () => void;
+    subscribe: (ref: React.RefObject<Partial<PerformanceMonitorHookApi>>) => () => void;
 };
-type PerformanceMonitorProps = {
+export type PerformanceMonitorProps = {
     ms?: number;
     iterations?: number;
     threshold?: number;

package/core/PerspectiveCamera.d.ts

@@ -1,8 +1,9 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { PerspectiveCamera as PerspectiveCameraImpl } from 'three';
+import { ThreeElements } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
+export type PerspectiveCameraProps = Omit<ThreeElements['perspectiveCamera'], 'ref' | 'children'> & {
     makeDefault?: boolean;
     manual?: boolean;
     children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);
@@ -10,5 +11,4 @@ type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
     resolution?: number;
     envMap?: THREE.Texture;
 };
-export declare const PerspectiveCamera: ForwardRefComponent<Props, PerspectiveCameraImpl>;
-export {};
+export declare const PerspectiveCamera: ForwardRefComponent<PerspectiveCameraProps, PerspectiveCameraImpl>;

package/core/PointMaterial.d.ts

@@ -1,16 +1,8 @@
 import * as THREE from 'three';
-import { PrimitiveProps } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-type PointMaterialType = JSX.IntrinsicElements['pointsMaterial'];
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            pointMaterialImpl: PointMaterialType;
-        }
-    }
-}
+import { ThreeElements } from '@react-three/fiber';
 export declare class PointMaterialImpl extends THREE.PointsMaterial {
     constructor(props: any);
 }
-export declare const PointMaterial: ForwardRefComponent<Omit<PrimitiveProps, 'object' | 'attach'>, PointMaterialImpl>;
-export {};
+export type PointMaterialProps = Omit<ThreeElements['pointsMaterial'], 'ref'>;
+export declare const PointMaterial: ForwardRefComponent<PointMaterialProps, PointMaterialImpl>;

package/core/PointerLockControls.d.ts

@@ -1,8 +1,8 @@
-import { ReactThreeFiber } from '@react-three/fiber';
+import { ThreeElement } from '@react-three/fiber';
 import * as THREE from 'three';
 import { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type PointerLockControlsProps = ReactThreeFiber.Object3DNode<PointerLockControlsImpl, typeof PointerLockControlsImpl> & {
+export type PointerLockControlsProps = Omit<ThreeElement<typeof PointerLockControlsImpl>, 'ref'> & {
     domElement?: HTMLElement;
     selector?: string;
     enabled?: boolean;

package/core/Points.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");function a(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 s=a(e),o=i(t),u=i(r);const c=new o.Matrix4,l=new o.Ray,f=new o.Sphere,d=new o.Vector3;class m extends o.Group{constructor(){super(),this.size=0,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){var r,n;const a=this.instance.current;if(!a||!a.geometry)return;const i=a.userData.instances.indexOf(this.instanceKey);if(-1===i||i>a.geometry.drawRange.count)return;const s=null!==(r=null==(n=e.params.Points)?void 0:n.threshold)&&void 0!==r?r:1;if(f.set(this.getWorldPosition(d),s),!1===e.ray.intersectsSphere(f))return;c.copy(a.matrixWorld).invert(),l.copy(e.ray).applyMatrix4(c);const u=s/((this.scale.x+this.scale.y+this.scale.z)/3),m=u*u,p=l.distanceSqToPoint(this.position);if(p<m){const r=new o.Vector3;l.closestPointToPoint(this.position,r),r.applyMatrix4(this.matrixWorld);const n=e.ray.origin.distanceTo(r);if(n<e.near||n>e.far)return;t.push({distance:n,distanceToRay:Math.sqrt(p),point:r,index:i,face:null,object:this})}}}let p,y;const h=u.createContext(null),g=new o.Matrix4,b=new o.Vector3,x=u.forwardRef((({children:e,range:t,limit:r=1e3,...a},i)=>{const c=u.useRef(null);u.useImperativeHandle(i,(()=>c.current),[]);const[l,f]=u.useState([]),[[d,m,x]]=u.useState((()=>[new Float32Array(3*r),Float32Array.from({length:3*r},(()=>1)),Float32Array.from({length:r},(()=>1))]));u.useEffect((()=>{c.current.geometry.attributes.position.needsUpdate=!0})),n.useFrame((()=>{for(c.current.updateMatrix(),c.current.updateMatrixWorld(),g.copy(c.current.matrixWorld).invert(),c.current.geometry.drawRange.count=Math.min(r,void 0!==t?t:r,l.length),p=0;p<l.length;p++)y=l[p].current,y.getWorldPosition(b).applyMatrix4(g),b.toArray(d,3*p),c.current.geometry.attributes.position.needsUpdate=!0,y.matrixWorldNeedsUpdate=!0,y.color.toArray(m,3*p),c.current.geometry.attributes.color.needsUpdate=!0,x.set([y.size],p),c.current.geometry.attributes.size.needsUpdate=!0}));const w=u.useMemo((()=>({getParent:()=>c,subscribe:e=>(f((t=>[...t,e])),()=>f((t=>t.filter((t=>t.current!==e.current)))))})),[]);return u.createElement("points",s.default({userData:{instances:l},matrixAutoUpdate:!1,ref:c,raycast:()=>null},a),u.createElement("bufferGeometry",null,u.createElement("bufferAttribute",{attach:"attributes-position",count:d.length/3,array:d,itemSize:3,usage:o.DynamicDrawUsage}),u.createElement("bufferAttribute",{attach:"attributes-color",count:m.length/3,array:m,itemSize:3,usage:o.DynamicDrawUsage}),u.createElement("bufferAttribute",{attach:"attributes-size",count:x.length,array:x,itemSize:1,usage:o.DynamicDrawUsage})),u.createElement(h.Provider,{value:w},e))})),w=u.forwardRef((({children:e,...t},r)=>{u.useMemo((()=>n.extend({PositionPoint:m})),[]);const a=u.useRef(null);u.useImperativeHandle(r,(()=>a.current),[]);const{subscribe:i,getParent:o}=u.useContext(h);return u.useLayoutEffect((()=>i(a)),[]),u.createElement("positionPoint",s.default({instance:o(),instanceKey:a,ref:a},t),e)})),v=u.forwardRef((({children:e,positions:t,colors:r,sizes:a,stride:i=3,...c},l)=>{const f=u.useRef(null);return u.useImperativeHandle(l,(()=>f.current),[]),n.useFrame((()=>{const e=f.current.geometry.attributes;e.position.needsUpdate=!0,r&&(e.color.needsUpdate=!0),a&&(e.size.needsUpdate=!0)})),u.createElement("points",s.default({ref:f},c),u.createElement("bufferGeometry",null,u.createElement("bufferAttribute",{attach:"attributes-position",count:t.length/i,array:t,itemSize:i,usage:o.DynamicDrawUsage}),r&&u.createElement("bufferAttribute",{attach:"attributes-color",count:r.length/i,array:r,itemSize:3,usage:o.DynamicDrawUsage}),a&&u.createElement("bufferAttribute",{attach:"attributes-size",count:a.length/i,array:a,itemSize:1,usage:o.DynamicDrawUsage})),e)})),P=u.forwardRef(((e,t)=>e.positions instanceof Float32Array?u.createElement(v,s.default({},e,{ref:t})):u.createElement(x,s.default({},e,{ref:t}))));exports.Point=w,exports.Points=P,exports.PointsBuffer=v,exports.PositionPoint=m;
+"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");function a(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)}var i=a(e),o=s(t),u=s(r);const c=new o.Matrix4,l=new o.Ray,f=new o.Sphere,d=new o.Vector3;class p extends o.Group{constructor(){super(),this.size=0,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){var r,n;const a=this.instance.current;if(!a||!a.geometry)return;const s=a.userData.instances.indexOf(this.instanceKey);if(-1===s||s>a.geometry.drawRange.count)return;const i=null!==(r=null==(n=e.params.Points)?void 0:n.threshold)&&void 0!==r?r:1;if(f.set(this.getWorldPosition(d),i),!1===e.ray.intersectsSphere(f))return;c.copy(a.matrixWorld).invert(),l.copy(e.ray).applyMatrix4(c);const u=i/((this.scale.x+this.scale.y+this.scale.z)/3),p=u*u,m=l.distanceSqToPoint(this.position);if(m<p){const r=new o.Vector3;l.closestPointToPoint(this.position,r),r.applyMatrix4(this.matrixWorld);const n=e.ray.origin.distanceTo(r);if(n<e.near||n>e.far)return;t.push({distance:n,distanceToRay:Math.sqrt(m),point:r,index:s,face:null,object:this})}}}let m,y;const g=u.createContext(null),h=new o.Matrix4,b=new o.Vector3,x=u.forwardRef((({children:e,range:t,limit:r=1e3,...a},s)=>{const c=u.useRef(null);u.useImperativeHandle(s,(()=>c.current),[]);const[l,f]=u.useState([]),[[d,p,x]]=u.useState((()=>[new Float32Array(3*r),Float32Array.from({length:3*r},(()=>1)),Float32Array.from({length:r},(()=>1))]));u.useEffect((()=>{c.current.geometry.attributes.position.needsUpdate=!0})),n.useFrame((()=>{for(c.current.updateMatrix(),c.current.updateMatrixWorld(),h.copy(c.current.matrixWorld).invert(),c.current.geometry.drawRange.count=Math.min(r,void 0!==t?t:r,l.length),m=0;m<l.length;m++)y=l[m].current,y.getWorldPosition(b).applyMatrix4(h),b.toArray(d,3*m),c.current.geometry.attributes.position.needsUpdate=!0,y.matrixWorldNeedsUpdate=!0,y.color.toArray(p,3*m),c.current.geometry.attributes.color.needsUpdate=!0,x.set([y.size],m),c.current.geometry.attributes.size.needsUpdate=!0}));const w=u.useMemo((()=>({getParent:()=>c,subscribe:e=>(f((t=>[...t,e])),()=>f((t=>t.filter((t=>t.current!==e.current)))))})),[]);return u.createElement("points",i.default({userData:{instances:l},matrixAutoUpdate:!1,ref:c,raycast:()=>null},a),u.createElement("bufferGeometry",null,u.createElement("bufferAttribute",{attach:"attributes-position",args:[d,3],usage:o.DynamicDrawUsage}),u.createElement("bufferAttribute",{attach:"attributes-color",args:[p,3],usage:o.DynamicDrawUsage}),u.createElement("bufferAttribute",{attach:"attributes-size",args:[x,1],usage:o.DynamicDrawUsage})),u.createElement(g.Provider,{value:w},e))})),w=u.forwardRef((({children:e,...t},r)=>{u.useMemo((()=>n.extend({PositionPoint:p})),[]);const a=u.useRef(null);u.useImperativeHandle(r,(()=>a.current),[]);const{subscribe:s,getParent:o}=u.useContext(g);return u.useLayoutEffect((()=>s(a)),[]),u.createElement("positionPoint",i.default({instance:o(),instanceKey:a,ref:a},t),e)})),v=u.forwardRef((({children:e,positions:t,colors:r,sizes:a,stride:s=3,...c},l)=>{const f=u.useRef(null);return u.useImperativeHandle(l,(()=>f.current),[]),n.useFrame((()=>{const e=f.current.geometry.attributes;e.position.needsUpdate=!0,r&&(e.color.needsUpdate=!0),a&&(e.size.needsUpdate=!0)})),u.createElement("points",i.default({ref:f},c),u.createElement("bufferGeometry",null,u.createElement("bufferAttribute",{attach:"attributes-position",args:[t,s],usage:o.DynamicDrawUsage}),r&&u.createElement("bufferAttribute",{attach:"attributes-color",args:[r,s],count:r.length/s,usage:o.DynamicDrawUsage}),a&&u.createElement("bufferAttribute",{attach:"attributes-size",args:[a,1],count:a.length/s,usage:o.DynamicDrawUsage})),e)})),P=u.forwardRef(((e,t)=>e.positions instanceof Float32Array?u.createElement(v,i.default({},e,{ref:t})):u.createElement(x,i.default({},e,{ref:t}))));exports.Point=w,exports.Points=P,exports.PointsBuffer=v,exports.PositionPoint=p;

package/core/Points.d.ts

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