@react-three/drei 9.120.4 → 9.120.5

package/core/ArcballControls.js

@@ -49,6 +49,7 @@ const ArcballControls = /* @__PURE__ */forwardRef(({
   useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });

package/core/DeviceOrientationControls.js

@@ -33,6 +33,7 @@ const DeviceOrientationControls = /* @__PURE__ */React.forwardRef((props, ref) =
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });

package/core/FlyControls.js

@@ -35,6 +35,7 @@ const FlyControls = /* @__PURE__ */React.forwardRef(({
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });

package/core/MapControls.js

@@ -43,6 +43,7 @@ const MapControls = /* @__PURE__ */React.forwardRef((props = {
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });

package/core/OrbitControls.d.ts

@@ -1,12 +1,11 @@
 import { ReactThreeFiber } from '@react-three/fiber';
-import type { Camera, Event } from 'three';
+import { Camera, Event } from 'three';
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export type OrbitControlsChangeEvent = Event & {
-    target: EventTarget & {
-        object: Camera;
-    };
-};
+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>, {
     camera?: Camera;
     domElement?: HTMLElement;
@@ -20,3 +19,4 @@ export type OrbitControlsProps = Omit<ReactThreeFiber.Overwrite<ReactThreeFiber.
     keyEvents?: boolean | HTMLElement;
 }>, 'ref'>;
 export declare const OrbitControls: ForwardRefComponent<OrbitControlsProps, OrbitControlsImpl>;
+export {};

package/core/OrbitControls.js

@@ -60,6 +60,7 @@ const OrbitControls = /* @__PURE__ */React.forwardRef(({
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });

package/core/PointerLockControls.js

@@ -71,6 +71,7 @@ const PointerLockControls = /* @__PURE__ */React.forwardRef(({
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });

package/core/Sparkles.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"),o=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),n=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 t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=a(e),c=s(t),u=s(r);const f=i.shaderMaterial({time:0,pixelRatio:1}," uniform float pixelRatio;\n    uniform float time;\n    attribute float size;  \n    attribute float speed;  \n    attribute float opacity;\n    attribute vec3 noise;\n    attribute vec3 color;\n    varying vec3 vColor;\n    varying float vOpacity;\n    void main() {\n      vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;\n      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;\n      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;\n      vec4 viewPosition = viewMatrix * modelPosition;\n      vec4 projectionPostion = projectionMatrix * viewPosition;\n      gl_Position = projectionPostion;\n      gl_PointSize = size * 25. * pixelRatio;\n      gl_PointSize *= (1.0 / - viewPosition.z);\n      vColor = color;\n      vOpacity = opacity;\n    }",` varying vec3 vColor;\n    varying float vOpacity;\n    void main() {\n      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));\n      float strength = 0.05 / distanceToCenter - 0.1;\n      gl_FragColor = vec4(vColor, strength * vOpacity);\n      #include <tonemapping_fragment>\n      #include <${n.version>=154?"colorspace_fragment":"encodings_fragment"}>\n    }`),m=e=>e&&e.constructor===Float32Array,p=e=>e instanceof u.Vector2||e instanceof u.Vector3||e instanceof u.Vector4,d=e=>Array.isArray(e)?e:p(e)?e.toArray():[e,e,e];function v(e,t,r){return c.useMemo((()=>{if(void 0!==t){if(m(t))return t;if(t instanceof u.Color){const r=Array.from({length:3*e},(()=>{return[(e=t).r,e.g,e.b];var e})).flat();return Float32Array.from(r)}if(p(t)||Array.isArray(t)){const r=Array.from({length:3*e},(()=>d(t))).flat();return Float32Array.from(r)}return Float32Array.from({length:e},(()=>t))}return Float32Array.from({length:e},r)}),[t])}const b=c.forwardRef((({noise:e=1,count:t=100,speed:r=1,opacity:i=1,scale:n=1,size:a,color:s,children:p,...b},y)=>{c.useMemo((()=>o.extend({SparklesImplMaterial:f})),[]);const g=c.useRef(null),h=o.useThree((e=>e.viewport.dpr)),A=d(n),P=c.useMemo((()=>Float32Array.from(Array.from({length:t},(()=>A.map(u.MathUtils.randFloatSpread))).flat())),[t,...A]),x=v(t,a,Math.random),j=v(t,i),M=v(t,r),O=v(3*t,e),_=v(void 0===s?3*t:t,m(s)?s:new u.Color(s),(()=>1));return o.useFrame((e=>{g.current&&g.current.material&&(g.current.material.time=e.clock.elapsedTime)})),c.useImperativeHandle(y,(()=>g.current),[]),c.createElement("points",l.default({key:`particle-${t}-${JSON.stringify(n)}`},b,{ref:g}),c.createElement("bufferGeometry",null,c.createElement("bufferAttribute",{attach:"attributes-position",args:[P,3]}),c.createElement("bufferAttribute",{attach:"attributes-size",args:[x,1]}),c.createElement("bufferAttribute",{attach:"attributes-opacity",args:[j,1]}),c.createElement("bufferAttribute",{attach:"attributes-speed",args:[M,1]}),c.createElement("bufferAttribute",{attach:"attributes-color",args:[_,3]}),c.createElement("bufferAttribute",{attach:"attributes-noise",args:[O,3]})),p||c.createElement("sparklesImplMaterial",{transparent:!0,pixelRatio:h,depthWrite:!1}))}));exports.Sparkles=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),i=require("@react-three/fiber"),o=require("../helpers/constants.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=n(e),l=a(t),c=a(r);class u extends c.ShaderMaterial{constructor(){super({uniforms:{time:{value:0},pixelRatio:{value:1}},vertexShader:"\n        uniform float pixelRatio;\n        uniform float time;\n        attribute float size;  \n        attribute float speed;  \n        attribute float opacity;\n        attribute vec3 noise;\n        attribute vec3 color;\n        varying vec3 vColor;\n        varying float vOpacity;\n\n        void main() {\n          vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n          modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;\n          modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;\n          modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;\n          vec4 viewPosition = viewMatrix * modelPosition;\n          vec4 projectionPostion = projectionMatrix * viewPosition;\n          gl_Position = projectionPostion;\n          gl_PointSize = size * 25. * pixelRatio;\n          gl_PointSize *= (1.0 / - viewPosition.z);\n          vColor = color;\n          vOpacity = opacity;\n        }\n      ",fragmentShader:`\n        varying vec3 vColor;\n        varying float vOpacity;\n        void main() {\n          float distanceToCenter = distance(gl_PointCoord, vec2(0.5));\n          float strength = 0.05 / distanceToCenter - 0.1;\n          gl_FragColor = vec4(vColor, strength * vOpacity);\n          #include <tonemapping_fragment>\n          #include <${o.version>=154?"colorspace_fragment":"encodings_fragment"}>\n        }\n      `})}get time(){return this.uniforms.time.value}set time(e){this.uniforms.time.value=e}get pixelRatio(){return this.uniforms.pixelRatio.value}set pixelRatio(e){this.uniforms.pixelRatio.value=e}}const f=e=>e&&e.constructor===Float32Array,m=e=>e instanceof c.Vector2||e instanceof c.Vector3||e instanceof c.Vector4,p=e=>Array.isArray(e)?e:m(e)?e.toArray():[e,e,e];function d(e,t,r){return l.useMemo((()=>{if(void 0!==t){if(f(t))return t;if(t instanceof c.Color){const r=Array.from({length:3*e},(()=>{return[(e=t).r,e.g,e.b];var e})).flat();return Float32Array.from(r)}if(m(t)||Array.isArray(t)){const r=Array.from({length:3*e},(()=>p(t))).flat();return Float32Array.from(r)}return Float32Array.from({length:e},(()=>t))}return Float32Array.from({length:e},r)}),[t])}const v=l.forwardRef((({noise:e=1,count:t=100,speed:r=1,opacity:o=1,scale:n=1,size:a,color:m,children:v,...b},g)=>{l.useMemo((()=>i.extend({SparklesImplMaterial:u})),[]);const y=l.useRef(null),h=i.useThree((e=>e.viewport.dpr)),x=p(n),A=l.useMemo((()=>Float32Array.from(Array.from({length:t},(()=>x.map(c.MathUtils.randFloatSpread))).flat())),[t,...x]),P=d(t,a,Math.random),M=d(t,o),j=d(t,r),O=d(3*t,e),_=d(void 0===m?3*t:t,f(m)?m:new c.Color(m),(()=>1));return i.useFrame((e=>{y.current&&y.current.material&&(y.current.material.time=e.clock.elapsedTime)})),l.useImperativeHandle(g,(()=>y.current),[]),l.createElement("points",s.default({key:`particle-${t}-${JSON.stringify(n)}`},b,{ref:y}),l.createElement("bufferGeometry",null,l.createElement("bufferAttribute",{attach:"attributes-position",args:[A,3]}),l.createElement("bufferAttribute",{attach:"attributes-size",args:[P,1]}),l.createElement("bufferAttribute",{attach:"attributes-opacity",args:[M,1]}),l.createElement("bufferAttribute",{attach:"attributes-speed",args:[j,1]}),l.createElement("bufferAttribute",{attach:"attributes-color",args:[_,3]}),l.createElement("bufferAttribute",{attach:"attributes-noise",args:[O,3]})),v||l.createElement("sparklesImplMaterial",{transparent:!0,pixelRatio:h,depthWrite:!1}))}));exports.Sparkles=v;

package/core/Sparkles.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { PointsProps, Node } from '@react-three/fiber';
+import { PointsProps, MaterialNode } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 interface Props {
     count?: number;
@@ -10,10 +10,17 @@ interface Props {
     scale?: number | [number, number, number] | THREE.Vector3;
     noise?: number | [number, number, number] | THREE.Vector3 | Float32Array;
 }
+declare class SparklesImplMaterial extends THREE.ShaderMaterial {
+    constructor();
+    get time(): number;
+    set time(value: number);
+    get pixelRatio(): number;
+    set pixelRatio(value: number);
+}
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            sparklesImplMaterial: Node<any, any>;
+            sparklesImplMaterial: MaterialNode<SparklesImplMaterial, typeof SparklesImplMaterial>;
         }
     }
 }

package/core/Sparkles.js

@@ -2,42 +2,70 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
-import { shaderMaterial } from './shaderMaterial.js';
 import { version } from '../helpers/constants.js';
 
-const SparklesImplMaterial = /* @__PURE__ */shaderMaterial({
-  time: 0,
-  pixelRatio: 1
-}, ` uniform float pixelRatio;
-    uniform float time;
-    attribute float size;  
-    attribute float speed;  
-    attribute float opacity;
-    attribute vec3 noise;
-    attribute vec3 color;
-    varying vec3 vColor;
-    varying float vOpacity;
-    void main() {
-      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
-      modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
-      modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
-      modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
-      vec4 viewPosition = viewMatrix * modelPosition;
-      vec4 projectionPostion = projectionMatrix * viewPosition;
-      gl_Position = projectionPostion;
-      gl_PointSize = size * 25. * pixelRatio;
-      gl_PointSize *= (1.0 / - viewPosition.z);
-      vColor = color;
-      vOpacity = opacity;
-    }`, ` varying vec3 vColor;
-    varying float vOpacity;
-    void main() {
-      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
-      float strength = 0.05 / distanceToCenter - 0.1;
-      gl_FragColor = vec4(vColor, strength * vOpacity);
-      #include <tonemapping_fragment>
-      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
-    }`);
+class SparklesImplMaterial extends THREE.ShaderMaterial {
+  constructor() {
+    super({
+      uniforms: {
+        time: {
+          value: 0
+        },
+        pixelRatio: {
+          value: 1
+        }
+      },
+      vertexShader: /* glsl */`
+        uniform float pixelRatio;
+        uniform float time;
+        attribute float size;  
+        attribute float speed;  
+        attribute float opacity;
+        attribute vec3 noise;
+        attribute vec3 color;
+        varying vec3 vColor;
+        varying float vOpacity;
+
+        void main() {
+          vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+          modelPosition.y += sin(time * speed + modelPosition.x * noise.x * 100.0) * 0.2;
+          modelPosition.z += cos(time * speed + modelPosition.x * noise.y * 100.0) * 0.2;
+          modelPosition.x += cos(time * speed + modelPosition.x * noise.z * 100.0) * 0.2;
+          vec4 viewPosition = viewMatrix * modelPosition;
+          vec4 projectionPostion = projectionMatrix * viewPosition;
+          gl_Position = projectionPostion;
+          gl_PointSize = size * 25. * pixelRatio;
+          gl_PointSize *= (1.0 / - viewPosition.z);
+          vColor = color;
+          vOpacity = opacity;
+        }
+      `,
+      fragmentShader: /* glsl */`
+        varying vec3 vColor;
+        varying float vOpacity;
+        void main() {
+          float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+          float strength = 0.05 / distanceToCenter - 0.1;
+          gl_FragColor = vec4(vColor, strength * vOpacity);
+          #include <tonemapping_fragment>
+          #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+        }
+      `
+    });
+  }
+  get time() {
+    return this.uniforms.time.value;
+  }
+  set time(value) {
+    this.uniforms.time.value = value;
+  }
+  get pixelRatio() {
+    return this.uniforms.pixelRatio.value;
+  }
+  set pixelRatio(value) {
+    this.uniforms.pixelRatio.value = value;
+  }
+}
 const isFloat32Array = def => def && def.constructor === Float32Array;
 const expandColor = v => [v.r, v.g, v.b];
 const isVector = v => v instanceof THREE.Vector2 || v instanceof THREE.Vector3 || v instanceof THREE.Vector4;

package/core/StatsGl.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("stats-gl");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=l(t),u=o(r);const s=n.forwardRef((({className:t,parent:r,id:o,clearStatsGlStyle:l,...s},a)=>{const c=e.useThree((e=>e.gl)),d=n.useMemo((()=>{const e=new u.default({...s});return e.init(c),e}),[c]);return n.useImperativeHandle(a,(()=>d.dom)),n.useEffect((()=>{if(d){const n=r&&r.current||document.body;null==n||n.appendChild(d.dom),d.dom.querySelectorAll("canvas").forEach((e=>{e.style.removeProperty("position")})),o&&(d.dom.id=o),l&&d.dom.removeAttribute("style"),d.dom.removeAttribute("style");const u=(null!=t?t:"").split(" ").filter((e=>e));u.length&&d.dom.classList.add(...u);const s=e.addAfterEffect((()=>d.update()));return()=>{u.length&&d.dom.classList.remove(...u),null==n||n.removeChild(d.dom),s()}}}),[r,d,t,o,l]),null}));s.displayName="StatsGl",exports.StatsGl=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),t=require("react"),r=require("stats-gl");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,l.get?l:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=n(t),u=l(r);const s=o.forwardRef((({className:t,parent:r,id:l,clearStatsGlStyle:n,...s},a)=>{const c=e.useThree((e=>e.gl)),d=o.useMemo((()=>{const e=new u.default({...s});return e.init(c),e}),[c]);return o.useImperativeHandle(a,(()=>d.domElement),[d]),o.useEffect((()=>{if(d){const o=r&&r.current||document.body;null==o||o.appendChild(d.domElement),d.domElement.querySelectorAll("canvas").forEach((e=>{e.style.removeProperty("position")})),l&&(d.domElement.id=l),n&&d.domElement.removeAttribute("style"),d.domElement.removeAttribute("style");const u=(null!=t?t:"").split(" ").filter((e=>e));u.length&&d.domElement.classList.add(...u);const s=e.addAfterEffect((()=>d.update()));return()=>{u.length&&d.domElement.classList.remove(...u),null==o||o.removeChild(d.domElement),s()}}}),[r,d,t,l,n]),null}));s.displayName="StatsGl",exports.StatsGl=s;

package/core/StatsGl.d.ts

@@ -1,7 +1,8 @@
 import { ForwardRefComponent } from '../helpers/ts-utils';
 import * as React from 'react';
 import Stats from 'stats-gl';
-type Props = Partial<Stats> & {
+type StatsOptions = ConstructorParameters<typeof Stats>[0];
+type Props = Partial<StatsOptions> & {
     id?: string;
     clearStatsGlStyle?: boolean;
     showPanel?: number;

package/core/StatsGl.js

@@ -17,23 +17,23 @@ const StatsGl = /* @__PURE__ */React.forwardRef(({
     stats.init(gl);
     return stats;
   }, [gl]);
-  React.useImperativeHandle(fref, () => stats.dom);
+  React.useImperativeHandle(fref, () => stats.domElement, [stats]);
   React.useEffect(() => {
     if (stats) {
       const node = parent && parent.current || document.body;
-      node == null || node.appendChild(stats.dom);
-      stats.dom.querySelectorAll('canvas').forEach(canvas => {
+      node == null || node.appendChild(stats.domElement);
+      stats.domElement.querySelectorAll('canvas').forEach(canvas => {
         canvas.style.removeProperty('position');
       });
-      if (id) stats.dom.id = id;
-      if (clearStatsGlStyle) stats.dom.removeAttribute('style');
-      stats.dom.removeAttribute('style');
+      if (id) stats.domElement.id = id;
+      if (clearStatsGlStyle) stats.domElement.removeAttribute('style');
+      stats.domElement.removeAttribute('style');
       const classNames = (className !== null && className !== void 0 ? className : '').split(' ').filter(cls => cls);
-      if (classNames.length) stats.dom.classList.add(...classNames);
+      if (classNames.length) stats.domElement.classList.add(...classNames);
       const end = addAfterEffect(() => stats.update());
       return () => {
-        if (classNames.length) stats.dom.classList.remove(...classNames);
-        node == null || node.removeChild(stats.dom);
+        if (classNames.length) stats.domElement.classList.remove(...classNames);
+        node == null || node.removeChild(stats.domElement);
         end();
       };
     }

package/core/TrackballControls.js

@@ -54,6 +54,7 @@ const TrackballControls = /* @__PURE__ */React.forwardRef(({
   React.useEffect(() => {
     if (makeDefault) {
       const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
       set({
         controls
       });