@react-three/drei 9.83.9 → 9.84.1

package/core/Sparkles.js

@@ -37,18 +37,13 @@ const SparklesImplMaterial = shaderMaterial({
       #include <tonemapping_fragment>
       #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }`);
-
 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;
-
 const normalizeVector = v => {
   if (Array.isArray(v)) return v;else if (isVector(v)) return v.toArray();
   return [v, v, v];
 };
-
 function usePropAsIsOrAsAttribute(count, prop, setDefault) {
   return React.useMemo(() => {
     if (prop !== undefined) {
@@ -66,19 +61,16 @@ function usePropAsIsOrAsAttribute(count, prop, setDefault) {
           }, () => normalizeVector(prop)).flat();
           return Float32Array.from(a);
         }
-
         return Float32Array.from({
           length: count
         }, () => prop);
       }
     }
-
     return Float32Array.from({
       length: count
     }, setDefault);
   }, [prop]);
 }
-
 const Sparkles = /*#__PURE__*/React.forwardRef(({
   noise = 1,
   count = 100,
@@ -95,9 +87,7 @@ const Sparkles = /*#__PURE__*/React.forwardRef(({
   }), []);
   const ref = React.useRef(null);
   const dpr = useThree(state => state.viewport.dpr);
-
   const _scale = normalizeVector(scale);
-
   const positions = React.useMemo(() => Float32Array.from(Array.from({
     length: count
   }, () => _scale.map(THREE.MathUtils.randFloatSpread)).flat()), [count, ..._scale]);

package/core/SpotLight.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DepthTexture, SpotLight as SpotLightImpl, Texture } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type SpotLightProps = JSX.IntrinsicElements['spotLight'] & {
+type SpotLightProps = JSX.IntrinsicElements['spotLight'] & {
     depthBuffer?: DepthTexture;
     attenuation?: number;
     anglePower?: number;
@@ -21,6 +21,6 @@ interface ShadowMeshProps {
     width?: number;
     height?: number;
 }
-export declare function SpotLightShadow(props: React.PropsWithChildren<ShadowMeshProps>): JSX.Element;
+export declare function SpotLightShadow(props: React.PropsWithChildren<ShadowMeshProps>): React.JSX.Element;
 declare const SpotLight: ForwardRefComponent<React.PropsWithChildren<SpotLightProps>, SpotLightImpl>;
 export { SpotLight };

package/core/SpotLight.js

@@ -10,7 +10,6 @@ import SpotlightShadowShader from '../helpers/glsl/DefaultSpotlightShadowShadows
 const isSpotLight = child => {
   return child == null ? void 0 : child.isSpotLight;
 };
-
 function VolumetricMesh({
   opacity = 1,
   radiusTop,
@@ -57,7 +56,6 @@ function VolumetricMesh({
     "uniforms-resolution-value": depthBuffer ? [size.width * dpr, size.height * dpr] : [0, 0]
   })));
 }
-
 function useCommon(spotlight, mesh, width, height, distance) {
   const [[pos, dir]] = React.useState(() => [new Vector3(), new Vector3()]);
   React.useLayoutEffect(() => {
@@ -80,7 +78,6 @@ function useCommon(spotlight, mesh, width, height, distance) {
     mesh.current.lookAt(spotlight.current.target.position);
   });
 }
-
 function SpotlightShadowWithShader({
   distance = 0.4,
   alphaTest = 0.5,
@@ -99,8 +96,8 @@ function SpotlightShadowWithShader({
   const renderTarget = React.useMemo(() => new WebGLRenderTarget(width, height, {
     format: RGBAFormat,
     encoding: LinearEncoding,
-    stencilBuffer: false // depthTexture: null!
-
+    stencilBuffer: false
+    // depthTexture: null!
   }), [width, height]);
   const uniforms = React.useRef({
     uShadowMap: {
@@ -113,9 +110,7 @@ function SpotlightShadowWithShader({
   React.useEffect(() => void (uniforms.current.uShadowMap.value = map), [map]);
   const fsQuad = React.useMemo(() => new FullScreenQuad(new ShaderMaterial({
     uniforms: uniforms.current,
-    vertexShader:
-    /* glsl */
-    `
+    vertexShader: /* glsl */`
           varying vec2 vUv;
 
           void main() {
@@ -152,7 +147,6 @@ function SpotlightShadowWithShader({
     opacity: debug ? 1 : 0
   }, children)));
 }
-
 function SpotlightShadowWithoutShader({
   distance = 0.4,
   alphaTest = 0.5,
@@ -181,7 +175,6 @@ function SpotlightShadowWithoutShader({
     opacity: debug ? 1 : 0
   }, children)));
 }
-
 function SpotLightShadow(props) {
   if (props.shader) return /*#__PURE__*/React.createElement(SpotlightShadowWithShader, props);
   return /*#__PURE__*/React.createElement(SpotlightShadowWithoutShader, props);

package/core/SpriteAnimator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type SpriteAnimatorProps = {
+export type SpriteAnimatorProps = {
     startFrame?: number;
     endFrame?: number;
     fps?: number;

package/core/SpriteAnimator.js

@@ -41,7 +41,6 @@ const SpriteAnimator = ({
   const [aspect, setAspect] = React.useState([1, 1, 1]);
   const flipOffset = flipX ? -1 : 1;
   const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite !== null && asSprite !== void 0 ? asSprite : true);
-
   function loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, callback) {
     const textureLoader = new THREE.TextureLoader();
     const jsonPromise = fetch(jsonUrl).then(response => response.json());
@@ -52,14 +51,13 @@ const SpriteAnimator = ({
       callback(response[0], response[1]);
     });
   }
-
   const calculateAspectRatio = (width, height) => {
     const aspectRatio = height / width;
     spriteRef.current.scale.set(1, aspectRatio, 1);
     return [1, aspectRatio, 1];
-  }; // initial loads
-
+  };
 
+  // initial loads
   React.useEffect(() => {
     if (textureDataURL && textureImageURL) {
       loadJsonAndTextureAndExecuteCallback(textureDataURL, textureImageURL, parseSpriteData);
@@ -88,7 +86,6 @@ const SpriteAnimator = ({
       hasEnded.current = false;
     }
   }, [frameName]);
-
   const parseSpriteData = (json, _spriteTexture) => {
     // sprite only case
     if (json === null) {
@@ -111,7 +108,6 @@ const SpriteAnimator = ({
             scale: '1'
           }
         };
-
         if (parseInt(frameWidth.toString(), 10) === frameWidth) {
           // if it fits
           for (let i = 0; i < numberOfFrames; i++) {
@@ -149,26 +145,22 @@ const SpriteAnimator = ({
       } = getFirstItem(json.frames).sourceSize;
       const aspect = calculateAspectRatio(w, h);
       setAspect(aspect);
-
       if (matRef.current) {
         matRef.current.map = _spriteTexture;
       }
     }
-
     _spriteTexture.premultiplyAlpha = false;
     setSpriteTexture(_spriteTexture);
-  }; // for frame based JSON Hash sprite data
-
+  };
 
+  // for frame based JSON Hash sprite data
   const parseFrames = () => {
     const sprites = {};
     const data = spriteData.current;
     const delimiters = animationNames;
-
     if (delimiters) {
       for (let i = 0; i < delimiters.length; i++) {
         sprites[delimiters[i]] = [];
-
         for (let innerKey in data['frames']) {
           const value = data['frames'][innerKey];
           const frameData = value['frame'];
@@ -178,7 +170,6 @@ const SpriteAnimator = ({
           const height = frameData['h'];
           const sourceWidth = value['sourceSize']['w'];
           const sourceHeight = value['sourceSize']['h'];
-
           if (typeof innerKey === 'string' && innerKey.toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
             sprites[delimiters[i]].push({
               x: x,
@@ -195,11 +186,10 @@ const SpriteAnimator = ({
         }
       }
     }
-
     return sprites;
-  }; // modify the sprite material after json is parsed and state updated
-
+  };
 
+  // modify the sprite material after json is parsed and state updated
   const modifySpritePosition = () => {
     if (!spriteData.current) return;
     const {
@@ -220,21 +210,21 @@ const SpriteAnimator = ({
     };
     matRef.current.map.wrapS = matRef.current.map.wrapT = THREE.RepeatWrapping;
     matRef.current.map.center.set(0, 0);
-    matRef.current.map.repeat.set(1 * flipOffset / (metaInfo.w / frameW), 1 / (metaInfo.h / frameH)); //const framesH = (metaInfo.w - 1) / frameW
+    matRef.current.map.repeat.set(1 * flipOffset / (metaInfo.w / frameW), 1 / (metaInfo.h / frameH));
 
+    //const framesH = (metaInfo.w - 1) / frameW
     const framesV = (metaInfo.h - 1) / frameH;
     const frameOffsetY = 1 / framesV;
     matRef.current.map.offset.x = 0.0; //-matRef.current.map.repeat.x
-
     matRef.current.map.offset.y = 1 - frameOffsetY;
     setJsonReady(true);
     if (onStart) onStart({
       currentFrameName: frameName,
       currentFrame: currentFrame.current
     });
-  }; // run the animation on each frame
-
+  };
 
+  // run the animation on each frame
   const runAnimation = () => {
     //if (!frameName) return
     const now = window.performance.now();
@@ -252,28 +242,23 @@ const SpriteAnimator = ({
     const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : [];
     let finalValX = 0;
     let finalValY = 0;
-
     const _endFrame = endFrame || spriteFrames.length - 1;
-
     if (currentFrame.current > _endFrame) {
       currentFrame.current = loop ? startFrame !== null && startFrame !== void 0 ? startFrame : 0 : 0;
-
       if (loop) {
-        onLoopEnd == null ? void 0 : onLoopEnd({
+        onLoopEnd == null || onLoopEnd({
           currentFrameName: frameName,
           currentFrame: currentFrame.current
         });
       } else {
-        onEnd == null ? void 0 : onEnd({
+        onEnd == null || onEnd({
           currentFrameName: frameName,
           currentFrame: currentFrame.current
         });
         hasEnded.current = true;
       }
-
       if (!loop) return;
     }
-
     if (diff <= fpsInterval) return;
     timerOffset.current = now - diff % fpsInterval;
     calculateAspectRatio(frameW, frameH);
@@ -296,20 +281,17 @@ const SpriteAnimator = ({
     matRef.current.map.offset.x = finalValX;
     matRef.current.map.offset.y = finalValY;
     currentFrame.current += 1;
-  }; // *** Warning! It runs on every frame! ***
-
+  };
 
+  // *** Warning! It runs on every frame! ***
   useFrame((state, delta) => {
     var _spriteData$current, _matRef$current;
-
     if (!((_spriteData$current = spriteData.current) != null && _spriteData$current.frames) || !((_matRef$current = matRef.current) != null && _matRef$current.map)) {
       return;
     }
-
     if (pause) {
       return;
     }
-
     if (!hasEnded.current && (autoPlay || play)) {
       runAnimation();
       onFrame && onFrame({
@@ -317,8 +299,9 @@ const SpriteAnimator = ({
         currentFrame: currentFrame.current
       });
     }
-  }); // utils
+  });
 
+  // utils
   const getFirstItem = param => {
     if (Array.isArray(param)) {
       return param[0];
@@ -332,7 +315,6 @@ const SpriteAnimator = ({
       };
     }
   };
-
   return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: null
   }, displayAsSprite && /*#__PURE__*/React.createElement("sprite", {

package/core/Stage.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { EnvironmentProps } from './Environment';
 import { ContactShadowsProps } from './ContactShadows';
 import { CenterProps } from './Center';
 import { AccumulativeShadowsProps, RandomizedLightProps } from './AccumulativeShadows';
 import { PresetsType } from '../helpers/environment-assets';
-declare type StageShadows = Partial<AccumulativeShadowsProps> & Partial<RandomizedLightProps> & Partial<ContactShadowsProps> & {
+type StageShadows = Partial<AccumulativeShadowsProps> & Partial<RandomizedLightProps> & Partial<ContactShadowsProps> & {
     type: 'contact' | 'accumulative';
     offset?: number;
     bias?: number;
     normalBias?: number;
     size?: number;
 };
-declare type StageProps = {
+type StageProps = {
     preset?: 'rembrandt' | 'portrait' | 'upfront' | 'soft' | {
         main: [x: number, y: number, z: number];
         fill: [x: number, y: number, z: number];
@@ -22,5 +22,5 @@ declare type StageProps = {
     intensity?: number;
     center?: Partial<CenterProps>;
 };
-export declare function Stage({ children, center, adjustCamera, intensity, shadows, environment, preset, ...props }: JSX.IntrinsicElements['group'] & StageProps): JSX.Element;
+export declare function Stage({ children, center, adjustCamera, intensity, shadows, environment, preset, ...props }: JSX.IntrinsicElements['group'] & StageProps): React.JSX.Element;
 export {};

package/core/Stage.js

@@ -24,7 +24,6 @@ const presets = {
     fill: [-1, 0.5, -1.5]
   }
 };
-
 function Refit({
   radius,
   adjustCamera
@@ -35,7 +34,6 @@ function Refit({
   }, [radius, adjustCamera]);
   return null;
 }
-
 function Stage({
   children,
   center,
@@ -47,7 +45,6 @@ function Stage({
   ...props
 }) {
   var _bias, _normalBias, _size, _offset, _amount, _radius, _ambient, _intensity;
-
   const config = typeof preset === 'string' ? presets[preset] : preset;
   const [{
     radius,
@@ -64,7 +61,8 @@ function Stage({
   const shadowOffset = (_offset = shadows == null ? void 0 : shadows.offset) !== null && _offset !== void 0 ? _offset : 0;
   const contactShadow = shadows === 'contact' || (shadows == null ? void 0 : shadows.type) === 'contact';
   const accumulativeShadow = shadows === 'accumulative' || (shadows == null ? void 0 : shadows.type) === 'accumulative';
-  const shadowSpread = { ...(typeof shadows === 'object' ? shadows : {})
+  const shadowSpread = {
+    ...(typeof shadows === 'object' ? shadows : {})
   };
   const environmentProps = !environment ? null : typeof environment === 'string' ? {
     preset: environment

package/core/Stars.d.ts

@@ -1,7 +1,7 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 import { Points, ShaderMaterial } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = {
+type Props = {
     radius?: number;
     depth?: number;
     count?: number;

package/core/Stars.js

@@ -14,9 +14,7 @@ class StarfieldMaterial extends ShaderMaterial {
           value: 1.0
         }
       },
-      vertexShader:
-      /* glsl */
-      `
+      vertexShader: /* glsl */`
       uniform float time;
       attribute float size;
       varying vec3 vColor;
@@ -26,9 +24,7 @@ class StarfieldMaterial extends ShaderMaterial {
         gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
         gl_Position = projectionMatrix * mvPosition;
       }`,
-      fragmentShader:
-      /* glsl */
-      `
+      fragmentShader: /* glsl */`
       uniform sampler2D pointTexture;
       uniform float fade;
       varying vec3 vColor;
@@ -45,13 +41,10 @@ class StarfieldMaterial extends ShaderMaterial {
       }`
     });
   }
-
 }
-
 const genStar = r => {
   return new Vector3().setFromSpherical(new Spherical(r, Math.acos(1 - Math.random() * 2), Math.random() * 2 * Math.PI));
 };
-
 const Stars = /*#__PURE__*/React.forwardRef(({
   radius = 100,
   depth = 50,
@@ -71,14 +64,12 @@ const Stars = /*#__PURE__*/React.forwardRef(({
     const color = new Color();
     let r = radius + depth;
     const increment = depth / count;
-
     for (let i = 0; i < count; i++) {
       r -= increment * Math.random();
       positions.push(...genStar(r).toArray());
       color.setHSL(i / count, saturation, 0.9);
       colors.push(color.r, color.g, color.b);
     }
-
     return [new Float32Array(positions), new Float32Array(colors), new Float32Array(sizes)];
   }, [count, depth, factor, radius, saturation]);
   useFrame(state => material.current && (material.current.uniforms.time.value = state.clock.getElapsedTime() * speed));

package/core/Stats.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type Props = {
+type Props = {
     showPanel?: number;
     className?: string;
     parent?: React.RefObject<HTMLElement>;

package/core/Stats.js

@@ -13,12 +13,12 @@ function Stats({
     if (stats) {
       const node = parent && parent.current || document.body;
       stats.showPanel(showPanel);
-      node == null ? void 0 : node.appendChild(stats.dom);
+      node == null || node.appendChild(stats.dom);
       if (className) stats.dom.classList.add(...className.split(' ').filter(cls => cls));
       const begin = addEffect(() => stats.begin());
       const end = addAfterEffect(() => stats.end());
       return () => {
-        node == null ? void 0 : node.removeChild(stats.dom);
+        node == null || node.removeChild(stats.dom);
         begin();
         end();
       };

package/core/StatsGl.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Stats from 'stats-gl';
-declare type Props = Partial<Stats> & {
+type Props = Partial<Stats> & {
     showPanel?: number;
     className?: string;
     parent?: React.RefObject<HTMLElement>;

package/core/StatsGl.js

@@ -9,7 +9,8 @@ function StatsGl({
 }) {
   const gl = useThree(state => state.gl);
   const stats = React.useMemo(() => {
-    const stats = new Stats({ ...props
+    const stats = new Stats({
+      ...props
     });
     stats.init(gl.domElement);
     return stats;
@@ -17,12 +18,12 @@ function StatsGl({
   React.useEffect(() => {
     if (stats) {
       const node = parent && parent.current || document.body;
-      node == null ? void 0 : node.appendChild(stats.container);
+      node == null || node.appendChild(stats.container);
       if (className) stats.container.classList.add(...className.split(' ').filter(cls => cls));
       const begin = addEffect(() => stats.begin());
       const end = addAfterEffect(() => stats.end());
       return () => {
-        node == null ? void 0 : node.removeChild(stats.container);
+        node == null || node.removeChild(stats.container);
         begin();
         end();
       };

package/core/Svg.js

@@ -18,7 +18,6 @@ const Svg = /*#__PURE__*/forwardRef(function R3FSvg({
   const svg = useLoader(SVGLoader, !src.startsWith('<svg') ? src : `data:image/svg+xml;utf8,${src}`);
   const strokeGeometries = useMemo(() => skipStrokes ? [] : svg.paths.map(path => {
     var _path$userData;
-
     return ((_path$userData = path.userData) == null ? void 0 : _path$userData.style.stroke) === undefined || path.userData.style.stroke === 'none' ? null : path.subPaths.map(subPath => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style));
   }), [svg, skipStrokes]);
   useEffect(() => {
@@ -30,7 +29,6 @@ const Svg = /*#__PURE__*/forwardRef(function R3FSvg({
     scale: [1, -1, 1]
   }, svg.paths.map((path, p) => {
     var _path$userData2, _path$userData3;
-
     return /*#__PURE__*/React.createElement(Fragment, {
       key: p
     }, !skipFill && ((_path$userData2 = path.userData) == null ? void 0 : _path$userData2.style.fill) !== undefined && path.userData.style.fill !== 'none' && SVGLoader.createShapes(path).map((shape, s) => /*#__PURE__*/React.createElement("mesh", _extends({

package/core/Text.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Props = JSX.IntrinsicElements['mesh'] & {
+type Props = JSX.IntrinsicElements['mesh'] & {
     children: React.ReactNode;
     characters?: string;
     color?: ReactThreeFiber.Color;

package/core/Text3D.d.ts

@@ -11,7 +11,7 @@ declare global {
         }
     }
 }
-declare type Text3DProps = {
+type Text3DProps = {
     font: FontData | string;
     bevelSegments?: number;
     smooth?: number;

package/core/Text3D.js

@@ -6,7 +6,6 @@ import { TextGeometry, mergeVertices } from 'three-stdlib';
 import { useFont } from './useFont.js';
 
 const types = ['string', 'number'];
-
 const getTextFromChildren = children => {
   let label = '';
   const rest = [];
@@ -15,7 +14,6 @@ const getTextFromChildren = children => {
   });
   return [label, ...rest];
 };
-
 const Text3D = /*#__PURE__*/React.forwardRef(({
   font: _font,
   letterSpacing = 0,
@@ -52,11 +50,11 @@ const Text3D = /*#__PURE__*/React.forwardRef(({
       lineHeight
     };
   }, [font, size, height, bevelThickness, bevelSize, bevelEnabled, bevelSegments, bevelOffset, curveSegments, letterSpacing, lineHeight]);
+
   /**
    * We need the `children` in the deps because we
    * need to be able to do `<Text3d>{state}</Text3d>`.
    */
-
   const [label, ...rest] = useMemo(() => getTextFromChildren(children), [children]);
   const args = React.useMemo(() => [label, opts], [label, opts]);
   React.useLayoutEffect(() => {

package/core/TrackballControls.d.ts

@@ -2,7 +2,7 @@ import { ReactThreeFiber } from '@react-three/fiber';
 import * as THREE from 'three';
 import { TrackballControls as TrackballControlsImpl } from 'three-stdlib';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-export declare type TrackballControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<TrackballControlsImpl, typeof TrackballControlsImpl>, {
+export type TrackballControlsProps = ReactThreeFiber.Overwrite<ReactThreeFiber.Object3DNode<TrackballControlsImpl, typeof TrackballControlsImpl>, {
     target?: ReactThreeFiber.Vector3;
     camera?: THREE.Camera;
     domElement?: HTMLElement;

package/core/TrackballControls.js

@@ -39,7 +39,6 @@ const TrackballControls = /*#__PURE__*/React.forwardRef(({
       if (regress) performance.regress();
       if (onChange) onChange(e);
     };
-
     controls.addEventListener('change', callback);
     if (onStart) controls.addEventListener('start', onStart);
     if (onEnd) controls.addEventListener('end', onEnd);

package/core/Trail.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ColorRepresentation, Object3D } from 'three';
 import { MeshLineGeometry as MeshLineGeometryImpl } from 'meshline';
 import { ForwardRefComponent } from '../helpers/ts-utils';
-declare type Settings = {
+type Settings = {
     width: number;
     length: number;
     decay: number;
@@ -10,12 +10,12 @@ declare type Settings = {
     stride: number;
     interval: number;
 };
-declare type TrailProps = {
+type TrailProps = {
     color?: ColorRepresentation;
     attenuation?: (width: number) => number;
     target?: React.MutableRefObject<Object3D>;
 } & Partial<Settings>;
 export declare function useTrail(target: Object3D, settings: Partial<Settings>): React.MutableRefObject<Float32Array | undefined>;
-export declare type MeshLineGeometry = THREE.Mesh & MeshLineGeometryImpl;
+export type MeshLineGeometry = THREE.Mesh & MeshLineGeometryImpl;
 export declare const Trail: ForwardRefComponent<React.PropsWithChildren<TrailProps>, MeshLineGeometry>;
 export {};