@ohos-ports/react-three-drei 10.7.7-beta.0

package/core/useSpriteLoader.js

@@ -0,0 +1,402 @@
+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

@@ -0,0 +1 @@
+"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

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

package/helpers/constants.js

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

package/helpers/deprecated.cjs.js

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

package/helpers/deprecated.d.ts

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

package/helpers/deprecated.js

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

package/helpers/environment-assets.cjs.js

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,3 @@
+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

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

package/helpers/ts-utils.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+

package/helpers/useEffectfulState.cjs.js

@@ -0,0 +1 @@
+"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,17 @@
+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 };