@react-three/drei 10.7.7 → 11.0.0-alpha.1

package/core/useSpriteLoader.js

@@ -1,402 +0,0 @@
-import * as THREE from 'three';
-import { TextureLoader } from 'three';
-import { useThree, useLoader } from '@react-three/fiber';
-import * as React from 'react';
-import { useState } from 'react';
-
-/* eslint react-hooks/exhaustive-deps: 1 */
-// utils
-const getFirstFrame = (frames, frameName) => {
-  if (Array.isArray(frames)) {
-    return frames[0];
-  } else {
-    const k = frameName !== null && frameName !== void 0 ? frameName : Object.keys(frames)[0];
-    return frames[k][0];
-  }
-};
-const checkIfFrameIsEmpty = frameData => {
-  for (let i = 3; i < frameData.length; i += 4) {
-    if (frameData[i] !== 0) {
-      return false;
-    }
-  }
-  return true;
-};
-function useSpriteLoader(/** The URL of the sprite sheet. */
-input, /** The JSON data of the sprite sheet. */
-json, /** The names of the animations in the sprite sheet. */
-animationNames, /** The number of frames in the sprite sheet. */
-numberOfFrames, /** A callback that is called when the sprite sheet is loaded. */
-onLoad, /** The settings to use when creating the 2D context. */
-canvasRenderingContext2DSettings) {
-  const viewportRef = React.useRef(useThree(state => state.viewport));
-  const spriteDataRef = React.useRef(null);
-  const totalFrames = React.useRef(0);
-  const aspectFactor = 0.1;
-  const inputRef = React.useRef(input);
-  const jsonRef = React.useRef(json);
-  const animationFramesRef = React.useRef(animationNames);
-  const [spriteData, setSpriteData] = useState(null);
-  const [spriteTexture, setSpriteTexture] = React.useState(new THREE.Texture());
-  const textureLoader = React.useMemo(() => new THREE.TextureLoader(), []);
-  const [spriteObj, setSpriteObj] = useState(null);
-  const calculateAspectRatio = React.useCallback((width, height, factor) => {
-    const adaptedHeight = height * (viewportRef.current.aspect > width / height ? viewportRef.current.width / width : viewportRef.current.height / height);
-    const adaptedWidth = width * (viewportRef.current.aspect > width / height ? viewportRef.current.width / width : viewportRef.current.height / height);
-    const scaleX = adaptedWidth * factor;
-    const scaleY = adaptedHeight * factor;
-    const currentMaxScale = 1;
-    // Calculate the maximum scale based on the aspect ratio and max scale limit
-    let finalMaxScaleW = Math.min(currentMaxScale, scaleX);
-    let finalMaxScaleH = Math.min(currentMaxScale, scaleY);
-
-    // Ensure that scaleX and scaleY do not exceed the max scale while maintaining aspect ratio
-    if (scaleX > currentMaxScale) {
-      finalMaxScaleW = currentMaxScale;
-      finalMaxScaleH = scaleY / scaleX * currentMaxScale;
-    }
-    return new THREE.Vector3(finalMaxScaleW, finalMaxScaleH, 1);
-  }, []);
-  const getRowsAndColumns = React.useCallback((texture, totalFrames) => {
-    if (texture.image) {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d', canvasRenderingContext2DSettings);
-      if (!ctx) {
-        throw new Error('Failed to get 2d context');
-      }
-      canvas.width = texture.image.width;
-      canvas.height = texture.image.height;
-      ctx.drawImage(texture.image, 0, 0);
-      const width = texture.image.width;
-      const height = texture.image.height;
-
-      // Calculate rows and columns based on the number of frames and image dimensions
-      const cols = Math.round(Math.sqrt(totalFrames * (width / height)));
-      const rows = Math.round(totalFrames / cols);
-      const frameWidth = width / cols;
-      const frameHeight = height / rows;
-      const emptyFrames = [];
-      for (let row = 0; row < rows; row++) {
-        for (let col = 0; col < cols; col++) {
-          const frameIndex = row * cols + col;
-          if (frameIndex >= totalFrames) {
-            emptyFrames.push({
-              row,
-              col
-            });
-            continue;
-          }
-          const frameData = ctx.getImageData(col * frameWidth, row * frameHeight, frameWidth, frameHeight).data;
-          const isEmpty = checkIfFrameIsEmpty(frameData);
-          if (isEmpty) {
-            emptyFrames.push({
-              row,
-              col
-            });
-          }
-        }
-      }
-      return {
-        rows,
-        columns: cols,
-        frameWidth,
-        frameHeight,
-        emptyFrames
-      };
-    } else {
-      return {
-        rows: 0,
-        columns: 0,
-        frameWidth: 0,
-        frameHeight: 0,
-        emptyFrames: []
-      };
-    }
-  }, [canvasRenderingContext2DSettings]);
-
-  // calculate scale ratio for the frames
-  const calculateScaleRatio = React.useCallback(frames => {
-    // Helper function to calculate scale ratio for an array of frames
-    const processFrameArray = frameArray => {
-      // Find the largest frame
-      let largestFrame = null;
-      for (const frame of frameArray) {
-        const {
-          w,
-          h
-        } = frame.frame;
-        const area = w * h;
-        if (!largestFrame || area > largestFrame.area) {
-          largestFrame = {
-            w,
-            h,
-            area
-          };
-        }
-      }
-
-      // Set scaleRatio property on each frame
-      const frameArr = frameArray.map(frame => {
-        const {
-          w,
-          h
-        } = frame.frame;
-        const area = w * h;
-        const scaleRatio = largestFrame ? area === largestFrame.area ? 1 : Math.sqrt(area / largestFrame.area) : 1;
-        return {
-          ...frame,
-          scaleRatio
-        };
-      });
-      return frameArr;
-    };
-
-    // Handle both array and record cases
-    if (Array.isArray(frames)) {
-      return processFrameArray(frames);
-    } else {
-      const result = {};
-      for (const key in frames) {
-        result[key] = processFrameArray(frames[key]);
-      }
-      return result;
-    }
-  }, []);
-
-  // for frame based JSON Hash sprite data
-  const parseFrames = React.useCallback(() => {
-    const sprites = {};
-    const data = spriteDataRef.current;
-    const delimiters = animationFramesRef.current;
-    if (data) {
-      if (delimiters && Array.isArray(data['frames'])) {
-        for (let i = 0; i < delimiters.length; i++) {
-          // we convert each named animation group into an array
-          sprites[delimiters[i]] = [];
-          for (const value of data['frames']) {
-            const frameData = value['frame'];
-            const sourceWidth = value['sourceSize']['w'];
-            const sourceHeight = value['sourceSize']['h'];
-            if (typeof value['filename'] === 'string' && value['filename'].toLowerCase().indexOf(delimiters[i].toLowerCase()) !== -1) {
-              sprites[delimiters[i]].push({
-                ...value,
-                frame: frameData,
-                sourceSize: {
-                  w: sourceWidth,
-                  h: sourceHeight
-                }
-              });
-            }
-          }
-        }
-        for (const frame in sprites) {
-          const scaleRatioData = calculateScaleRatio(sprites[frame]);
-          if (Array.isArray(scaleRatioData)) {
-            sprites[frame] = scaleRatioData;
-          }
-        }
-        return sprites;
-      } else if (delimiters && typeof data['frames'] === 'object') {
-        for (let i = 0; i < delimiters.length; i++) {
-          // we convert each named animation group into an array
-          sprites[delimiters[i]] = [];
-          for (const innerKey in data['frames']) {
-            const value = data['frames'][innerKey];
-            const frameData = value['frame'];
-            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({
-                ...value,
-                frame: frameData,
-                sourceSize: {
-                  w: sourceWidth,
-                  h: sourceHeight
-                }
-              });
-            }
-          }
-        }
-        for (const frame in sprites) {
-          const scaleRatioData = calculateScaleRatio(sprites[frame]);
-          if (Array.isArray(scaleRatioData)) {
-            sprites[frame] = scaleRatioData;
-          }
-        }
-        return sprites;
-      } else {
-        let spritesArr = [];
-        if (data != null && data.frames) {
-          if (Array.isArray(data.frames)) {
-            spritesArr = data.frames.map(frame => ({
-              ...frame,
-              x: frame.frame.x,
-              y: frame.frame.y,
-              w: frame.frame.w,
-              h: frame.frame.h
-            }));
-          } else {
-            spritesArr = Object.values(data.frames).flat().map(frame => ({
-              ...frame,
-              x: frame.frame.x,
-              y: frame.frame.y,
-              w: frame.frame.w,
-              h: frame.frame.h
-            }));
-          }
-        }
-        return calculateScaleRatio(spritesArr);
-      }
-    }
-    return [];
-  }, [calculateScaleRatio, spriteDataRef]);
-  const parseSpriteData = React.useCallback((json, _spriteTexture) => {
-    let aspect = new THREE.Vector3(1, 1, 1);
-    // sprite only case
-    if (json === null) {
-      if (_spriteTexture && numberOfFrames) {
-        //get size from texture
-        const width = _spriteTexture.image.width;
-        const height = _spriteTexture.image.height;
-        totalFrames.current = numberOfFrames;
-        const {
-          rows,
-          columns,
-          frameWidth,
-          frameHeight,
-          emptyFrames
-        } = getRowsAndColumns(_spriteTexture, numberOfFrames);
-        const nonJsonFrames = {
-          frames: [],
-          meta: {
-            version: '1.0',
-            size: {
-              w: width,
-              h: height
-            },
-            rows,
-            columns,
-            frameWidth,
-            frameHeight,
-            scale: '1'
-          }
-        };
-        for (let row = 0; row < rows; row++) {
-          for (let col = 0; col < columns; col++) {
-            const isExcluded = (emptyFrames !== null && emptyFrames !== void 0 ? emptyFrames : []).some(coord => coord.row === row && coord.col === col);
-            if (isExcluded) {
-              continue;
-            }
-            if (Array.isArray(nonJsonFrames.frames)) {
-              nonJsonFrames.frames.push({
-                frame: {
-                  x: col * frameWidth,
-                  y: row * frameHeight,
-                  w: frameWidth,
-                  h: frameHeight
-                },
-                scaleRatio: 1,
-                rotated: false,
-                trimmed: false,
-                spriteSourceSize: {
-                  x: 0,
-                  y: 0,
-                  w: frameWidth,
-                  h: frameHeight
-                },
-                sourceSize: {
-                  w: frameWidth,
-                  h: frameHeight
-                }
-              });
-            }
-          }
-        }
-        aspect = calculateAspectRatio(frameWidth, frameHeight, aspectFactor);
-        spriteDataRef.current = nonJsonFrames;
-      }
-
-      //scale ratio for standalone sprite
-      if (spriteDataRef.current && spriteDataRef.current.frames) {
-        spriteDataRef.current.frames = calculateScaleRatio(spriteDataRef.current.frames);
-      }
-    } else if (_spriteTexture) {
-      spriteDataRef.current = json;
-      spriteDataRef.current.frames = parseFrames();
-      totalFrames.current = Array.isArray(json.frames) ? json.frames.length : Object.keys(json.frames).length;
-      const {
-        w,
-        h
-      } = getFirstFrame(json.frames).sourceSize;
-      aspect = calculateAspectRatio(w, h, aspectFactor);
-    }
-    setSpriteData(spriteDataRef.current);
-    if ('encoding' in _spriteTexture) {
-      _spriteTexture.encoding = 3001; // sRGBEncoding
-    } else if ('colorSpace' in _spriteTexture) {
-      //@ts-ignore
-      _spriteTexture.colorSpace = THREE.SRGBColorSpace;
-    }
-    setSpriteTexture(_spriteTexture);
-    setSpriteObj({
-      spriteTexture: _spriteTexture,
-      spriteData: spriteDataRef.current,
-      aspect: aspect
-    });
-  }, [getRowsAndColumns, numberOfFrames, parseFrames, calculateAspectRatio, calculateScaleRatio]);
-
-  /**
-   *
-   */
-  const loadJsonAndTextureAndExecuteCallback = React.useCallback((jsonUrl, textureUrl, callback) => {
-    const jsonPromise = fetch(jsonUrl).then(response => response.json());
-    const texturePromise = new Promise(resolve => {
-      textureLoader.load(textureUrl, resolve);
-    });
-    Promise.all([jsonPromise, texturePromise]).then(response => {
-      callback(response[0], response[1]);
-    });
-  }, [textureLoader]);
-  const loadStandaloneSprite = React.useCallback(textureUrl => {
-    if (!textureUrl && !inputRef.current) {
-      throw new Error('Either textureUrl or input must be provided');
-    }
-    const validUrl = textureUrl !== null && textureUrl !== void 0 ? textureUrl : inputRef.current;
-    if (!validUrl) {
-      throw new Error('A valid texture URL must be provided');
-    }
-    textureLoader.load(validUrl, texture => parseSpriteData(null, texture));
-  }, [textureLoader, parseSpriteData]);
-  const loadJsonAndTexture = React.useCallback((textureUrl, jsonUrl) => {
-    if (jsonUrl && textureUrl) {
-      loadJsonAndTextureAndExecuteCallback(jsonUrl, textureUrl, parseSpriteData);
-    } else {
-      loadStandaloneSprite(textureUrl);
-    }
-  }, [loadJsonAndTextureAndExecuteCallback, loadStandaloneSprite, parseSpriteData]);
-  React.useLayoutEffect(() => {
-    if (jsonRef.current && inputRef.current) {
-      loadJsonAndTextureAndExecuteCallback(jsonRef.current, inputRef.current, parseSpriteData);
-    } else if (inputRef.current) {
-      // only load the texture, this is an image sprite only
-      loadStandaloneSprite();
-    }
-    const _inputRef = inputRef.current;
-    return () => {
-      if (_inputRef) {
-        useLoader.clear(TextureLoader, _inputRef);
-      }
-    };
-  }, [loadJsonAndTextureAndExecuteCallback, loadStandaloneSprite, parseSpriteData]);
-  React.useLayoutEffect(() => {
-    onLoad == null || onLoad(spriteTexture, spriteData !== null && spriteData !== void 0 ? spriteData : null);
-  }, [spriteTexture, spriteData, onLoad]);
-  return {
-    spriteObj,
-    loadJsonAndTexture
-  };
-}
-useSpriteLoader.preload = url => useLoader.preload(TextureLoader, url);
-useSpriteLoader.clear = input => useLoader.clear(TextureLoader, input);
-
-export { checkIfFrameIsEmpty, getFirstFrame, useSpriteLoader };

package/helpers/constants.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three");const r=(()=>parseInt(e.REVISION.replace(/\D+/g,"")))();exports.version=r;

package/helpers/constants.d.ts

@@ -1 +0,0 @@
-export declare const version: number;

package/helpers/constants.js

@@ -1,6 +0,0 @@
-import { REVISION } from 'three';
-
-const getVersion = () => parseInt(REVISION.replace(/\D+/g, ''));
-const version = /* @__PURE__ */getVersion();
-
-export { version };

package/helpers/deprecated.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.setUpdateRange=(e,t)=>{e.updateRanges[0]=t};

package/helpers/deprecated.d.ts

@@ -1,5 +0,0 @@
-import * as THREE from 'three';
-export declare const setUpdateRange: (attribute: THREE.BufferAttribute, updateRange: {
-    start: number;
-    count: number;
-}) => void;

package/helpers/deprecated.js

@@ -1,8 +0,0 @@
-/**
- * Sets `BufferAttribute.updateRange` since r159.
- */
-const setUpdateRange = (attribute, updateRange) => {
-  attribute.updateRanges[0] = updateRange;
-};
-
-export { setUpdateRange };

package/helpers/environment-assets.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.presetsObj={apartment:"lebombo_1k.hdr",city:"potsdamer_platz_1k.hdr",dawn:"kiara_1_dawn_1k.hdr",forest:"forest_slope_1k.hdr",lobby:"st_fagans_interior_1k.hdr",night:"dikhololo_night_1k.hdr",park:"rooitou_park_1k.hdr",studio:"studio_small_03_1k.hdr",sunset:"venice_sunset_1k.hdr",warehouse:"empty_warehouse_01_1k.hdr"};

package/helpers/environment-assets.d.ts

@@ -1,13 +0,0 @@
-export declare const presetsObj: {
-    apartment: string;
-    city: string;
-    dawn: string;
-    forest: string;
-    lobby: string;
-    night: string;
-    park: string;
-    studio: string;
-    sunset: string;
-    warehouse: string;
-};
-export type PresetsType = keyof typeof presetsObj;

package/helpers/environment-assets.js

@@ -1,14 +0,0 @@
-const presetsObj = {
-  apartment: 'lebombo_1k.hdr',
-  city: 'potsdamer_platz_1k.hdr',
-  dawn: 'kiara_1_dawn_1k.hdr',
-  forest: 'forest_slope_1k.hdr',
-  lobby: 'st_fagans_interior_1k.hdr',
-  night: 'dikhololo_night_1k.hdr',
-  park: 'rooitou_park_1k.hdr',
-  studio: 'studio_small_03_1k.hdr',
-  sunset: 'venice_sunset_1k.hdr',
-  warehouse: 'empty_warehouse_01_1k.hdr'
-};
-
-export { presetsObj };

package/helpers/glsl/DefaultSpotlightShadowShadows.glsl.js

@@ -1,3 +0,0 @@
-var SpotlightShadowShader = "#define GLSLIFY 1\nvarying vec2 vUv;uniform sampler2D uShadowMap;uniform float uTime;void main(){vec3 color=texture2D(uShadowMap,vUv).xyz;gl_FragColor=vec4(color,1.);}"; // eslint-disable-line
-
-export { SpotlightShadowShader as default };

package/helpers/glsl/distort.vert.glsl.js

@@ -1,3 +0,0 @@
-var distort = "#define GLSLIFY 1\nvec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}float snoise(vec3 v){const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;i=mod289(i);vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;vec4 sh=-step(h,vec4(0.0));vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));}"; // eslint-disable-line
-
-export { distort as default };

package/helpers/ts-utils.cjs.js

@@ -1 +0,0 @@
-"use strict";

package/helpers/ts-utils.d.ts

@@ -1,7 +0,0 @@
-import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
-export type NamedArrayTuple<T extends (...args: any) => any> = Parameters<T>;
-export type ForwardRefComponent<P, T> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
-export type NonFunctionKeys<T> = {
-    [K in keyof T]-?: T[K] extends Function ? never : K;
-}[keyof T];
-export type Overwrite<T, O> = Omit<T, NonFunctionKeys<O>> & O;

package/helpers/ts-utils.js

@@ -1 +0,0 @@
-

package/helpers/useEffectfulState.cjs.js

@@ -1 +0,0 @@
-"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));function r(e,t){"function"==typeof e?e(t):null!=e&&(e.current=t)}exports.useEffectfulState=function(e,u=[],n){const[c,f]=t.useState();return t.useLayoutEffect((()=>{const t=e();return f(t),r(n,t),()=>r(n,null)}),u),c};

package/helpers/useEffectfulState.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-type RefType<T> = React.RefObject<T> | ((state: T) => void);
-export declare function useEffectfulState<T>(fn: () => T, deps?: React.DependencyList, cb?: RefType<T>): T | undefined;
-export {};

package/helpers/useEffectfulState.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-function call(ref, value) {
-  if (typeof ref === 'function') ref(value);else if (ref != null) ref.current = value;
-}
-function useEffectfulState(fn, deps = [], cb) {
-  const [state, set] = React.useState();
-  React.useLayoutEffect(() => {
-    const value = fn();
-    set(value);
-    call(cb, value);
-    return () => call(cb, null);
-  }, deps);
-  return state;
-}
-
-export { useEffectfulState };