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

package/core/SpotLight.js

@@ -0,0 +1,223 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Vector3, CylinderGeometry, Matrix4, WebGLRenderTarget, RGBAFormat, ShaderMaterial, DoubleSide, RepeatWrapping } from 'three';
+import { useThree, useFrame } from '@react-three/fiber';
+import { FullScreenQuad } from 'three-stdlib';
+import { SpotLightMaterial } from '../materials/SpotLightMaterial.js';
+import SpotlightShadowShader from '../helpers/glsl/DefaultSpotlightShadowShadows.glsl.js';
+
+const isSpotLight = child => {
+  return child == null ? void 0 : child.isSpotLight;
+};
+function VolumetricMesh({
+  opacity = 1,
+  radiusTop,
+  radiusBottom,
+  depthBuffer,
+  color = 'white',
+  distance = 5,
+  angle = 0.15,
+  attenuation = 5,
+  anglePower = 5
+}) {
+  const mesh = React.useRef(null);
+  const size = useThree(state => state.size);
+  const camera = useThree(state => state.camera);
+  const dpr = useThree(state => state.viewport.dpr);
+  const [material] = React.useState(() => new SpotLightMaterial());
+  const [vec] = React.useState(() => new Vector3());
+  radiusTop = radiusTop === undefined ? 0.1 : radiusTop;
+  radiusBottom = radiusBottom === undefined ? angle * 7 : radiusBottom;
+  useFrame(() => {
+    material.uniforms.spotPosition.value.copy(mesh.current.getWorldPosition(vec));
+    mesh.current.lookAt(mesh.current.parent.target.getWorldPosition(vec));
+  });
+  const geom = React.useMemo(() => {
+    const geometry = new CylinderGeometry(radiusTop, radiusBottom, distance, 128, 64, true);
+    geometry.applyMatrix4(new Matrix4().makeTranslation(0, -distance / 2, 0));
+    geometry.applyMatrix4(new Matrix4().makeRotationX(-Math.PI / 2));
+    return geometry;
+  }, [distance, radiusTop, radiusBottom]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
+    ref: mesh,
+    geometry: geom,
+    raycast: () => null
+  }, /*#__PURE__*/React.createElement("primitive", {
+    object: material,
+    attach: "material",
+    "uniforms-opacity-value": opacity,
+    "uniforms-lightColor-value": color,
+    "uniforms-attenuation-value": attenuation,
+    "uniforms-anglePower-value": anglePower,
+    "uniforms-depth-value": depthBuffer,
+    "uniforms-cameraNear-value": camera.near,
+    "uniforms-cameraFar-value": camera.far,
+    "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(() => {
+    if (isSpotLight(spotlight.current)) {
+      spotlight.current.shadow.mapSize.set(width, height);
+      spotlight.current.shadow.needsUpdate = true;
+    } else {
+      throw new Error('SpotlightShadow must be a child of a SpotLight');
+    }
+  }, [spotlight, width, height]);
+  useFrame(() => {
+    if (!spotlight.current) return;
+    const A = spotlight.current.position;
+    const B = spotlight.current.target.position;
+    dir.copy(B).sub(A);
+    var len = dir.length();
+    dir.normalize().multiplyScalar(len * distance);
+    pos.copy(A).add(dir);
+    mesh.current.position.copy(pos);
+    mesh.current.lookAt(spotlight.current.target.position);
+  });
+}
+function SpotlightShadowWithShader({
+  distance = 0.4,
+  alphaTest = 0.5,
+  map,
+  shader = SpotlightShadowShader,
+  width = 512,
+  height = 512,
+  scale = 1,
+  children,
+  ...rest
+}) {
+  const mesh = React.useRef(null);
+  const spotlight = rest.spotlightRef;
+  const debug = rest.debug;
+  useCommon(spotlight, mesh, width, height, distance);
+  const renderTarget = React.useMemo(() => new WebGLRenderTarget(width, height, {
+    format: RGBAFormat,
+    stencilBuffer: false
+    // depthTexture: null!
+  }), [width, height]);
+  const uniforms = React.useRef({
+    uShadowMap: {
+      value: map
+    },
+    uTime: {
+      value: 0
+    }
+  });
+  React.useEffect(() => void (uniforms.current.uShadowMap.value = map), [map]);
+  const fsQuad = React.useMemo(() => new FullScreenQuad(new ShaderMaterial({
+    uniforms: uniforms.current,
+    vertexShader: /* glsl */`
+          varying vec2 vUv;
+
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+          `,
+    fragmentShader: shader
+  })), [shader]);
+  React.useEffect(() => () => {
+    fsQuad.material.dispose();
+    fsQuad.dispose();
+  }, [fsQuad]);
+  React.useEffect(() => () => renderTarget.dispose(), [renderTarget]);
+  useFrame(({
+    gl
+  }, dt) => {
+    uniforms.current.uTime.value += dt;
+    gl.setRenderTarget(renderTarget);
+    fsQuad.render(gl);
+    gl.setRenderTarget(null);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
+    ref: mesh,
+    scale: scale,
+    castShadow: true
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    side: DoubleSide,
+    alphaTest: alphaTest,
+    alphaMap: renderTarget.texture,
+    "alphaMap-wrapS": RepeatWrapping,
+    "alphaMap-wrapT": RepeatWrapping,
+    opacity: debug ? 1 : 0
+  }, children)));
+}
+function SpotlightShadowWithoutShader({
+  distance = 0.4,
+  alphaTest = 0.5,
+  map,
+  width = 512,
+  height = 512,
+  scale,
+  children,
+  ...rest
+}) {
+  const mesh = React.useRef(null);
+  const spotlight = rest.spotlightRef;
+  const debug = rest.debug;
+  useCommon(spotlight, mesh, width, height, distance);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("mesh", {
+    ref: mesh,
+    scale: scale,
+    castShadow: true
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+    transparent: true,
+    side: DoubleSide,
+    alphaTest: alphaTest,
+    alphaMap: map,
+    "alphaMap-wrapS": RepeatWrapping,
+    "alphaMap-wrapT": RepeatWrapping,
+    opacity: debug ? 1 : 0
+  }, children)));
+}
+function SpotLightShadow(props) {
+  if (props.shader) return /*#__PURE__*/React.createElement(SpotlightShadowWithShader, props);
+  return /*#__PURE__*/React.createElement(SpotlightShadowWithoutShader, props);
+}
+const SpotLight = /*#__PURE__*/React.forwardRef(({
+  // Volumetric
+  opacity = 1,
+  radiusTop,
+  radiusBottom,
+  depthBuffer,
+  color = 'white',
+  distance = 5,
+  angle = 0.15,
+  attenuation = 5,
+  anglePower = 5,
+  volumetric = true,
+  debug = false,
+  children,
+  ...props
+}, ref) => {
+  const spotlight = React.useRef(null);
+  React.useImperativeHandle(ref, () => spotlight.current, []);
+  return /*#__PURE__*/React.createElement("group", null, debug && spotlight.current && /*#__PURE__*/React.createElement("spotLightHelper", {
+    args: [spotlight.current]
+  }), /*#__PURE__*/React.createElement("spotLight", _extends({
+    ref: spotlight,
+    angle: angle,
+    color: color,
+    distance: distance,
+    castShadow: true
+  }, props), volumetric && /*#__PURE__*/React.createElement(VolumetricMesh, {
+    debug: debug,
+    opacity: opacity,
+    radiusTop: radiusTop,
+    radiusBottom: radiusBottom,
+    depthBuffer: depthBuffer,
+    color: color,
+    distance: distance,
+    angle: angle,
+    attenuation: attenuation,
+    anglePower: anglePower
+  })), children && /*#__PURE__*/React.cloneElement(children, {
+    spotlightRef: spotlight,
+    debug: debug
+  }));
+});
+
+export { SpotLight, SpotLightShadow };

package/core/SpriteAnimator.cjs.js

@@ -0,0 +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"),u=require("./Instances.cjs.js"),a=require("./Billboard.cjs.js"),c=require("./useSpriteLoader.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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("../helpers/deprecated.cjs.js");var o=l(e),i=s(r),m=s(n);const f=i.createContext(null);const p=new m.PlaneGeometry(1,1),d=i.forwardRef((({startFrame:e=0,endFrame:r,fps:n=30,frameName:l="",textureDataURL:s,textureImageURL:d,loop:h=!1,numberOfFrames:v=1,autoPlay:y=!0,animationNames:w,onStart:E,onEnd:F,onLoopEnd:b,onFrame:g,play:x,pause:S=!1,flipX:j=!1,alphaTest:R=0,children:A,asSprite:M=!1,offset:N,playBackwards:O=!1,resetOnEnd:z=!1,maxItems:q=1,instanceItems:D=[[0,0,0]],spriteDataset:L,canvasRenderingContext2DSettings:P,roundFramePosition:T=!1,meshProps:I={},...k},B)=>{const C=i.useRef(new m.Group),V=i.useRef(null),_=i.useRef(null),U=i.useRef(null),G=i.useRef(window.performance.now()),H=i.useRef(e),J=i.useRef(l),W=n>0?1e3/n:0,[X,K]=i.useState(new m.Texture),Q=i.useRef(0),[Y,Z]=i.useState(new m.Vector3(1,1,1)),$=j?-1:1,ee=i.useRef(S),re=i.useRef(N),te=i.useRef(!1),{spriteObj:ne,loadJsonAndTexture:ue}=c.useSpriteLoader(null,null,w,v,void 0,P),ae=i.useRef(l),ce=i.useCallback(((e,r)=>{if(null===r)v&&(Q.current=v,O&&(H.current=v-1),V.current=r);else{var t,n;V.current=r,V.current&&Array.isArray(V.current.frames)?Q.current=V.current.frames.length:V.current&&"object"==typeof V.current&&ae.current?Q.current=V.current.frames[ae.current].length:Q.current=0,O&&(H.current=Q.current-1);const{w:u,h:a}=c.getFirstFrame(null!==(t=null==(n=V.current)?void 0:n.frames)&&void 0!==t?t:[],ae.current).sourceSize,l=oe(u,a);Z(l),_.current&&(_.current.map=e)}K(e)}),[v,O]),le=i.useCallback((()=>{if(!V.current)return;const{meta:{size:e},frames:r}=V.current,{w:t,h:n}=Array.isArray(r)?r[0].sourceSize:l&&r[l]?r[l][0].sourceSize:{w:0,h:0};_.current&&_.current.map&&(_.current.map.wrapS=_.current.map.wrapT=m.RepeatWrapping,_.current.map.center.set(0,0),_.current.map.repeat.set(1*$/(e.w/t),1/(e.h/n)));const u=1/((e.h-1)/n);_.current&&_.current.map&&(_.current.map.offset.x=0,_.current.map.offset.y=1-u),E&&E({currentFrameName:null!=l?l:"",currentFrame:H.current})}),[$,l,E]),se=i.useMemo((()=>({current:re.current,offset:re.current,imageUrl:d,hasEnded:!1,ref:B})),[d,B]);i.useImperativeHandle(B,(()=>C.current),[]),i.useLayoutEffect((()=>{re.current=N}),[N]);const oe=(e,r)=>{var t;const n=new m.Vector3,u=r/e;return n.set(1,u,1),null==(t=U.current)||t.scale.copy(n),n};i.useEffect((()=>{var e;L?ce(null==L||null==(e=L.spriteTexture)?void 0:e.clone(),L.spriteData):d&&s&&ue(d,s)}),[ue,L,s,d,ce]),i.useEffect((()=>{var e;ne&&ce(null==ne||null==(e=ne.spriteTexture)?void 0:e.clone(),null==ne?void 0:ne.spriteData)}),[ne,ce]),i.useEffect((()=>{var e;(se.hasEnded=!1,V.current&&!0===O)?H.current=(null!==(e=V.current.frames.length)&&void 0!==e?e:0)-1:H.current=0}),[O,se]),i.useLayoutEffect((()=>{le()}),[X,j,le]),i.useEffect((()=>{y&&(ee.current=!1)}),[y]),i.useLayoutEffect((()=>{if(J.current!==l&&l&&(H.current=0,J.current=l,se.hasEnded=!1,W<=0&&(H.current=r||e||0),V.current)){const{w:e,h:r}=c.getFirstFrame(V.current.frames,l).sourceSize,t=oe(e,r);Z(t)}}),[l,W,se,r,e]);const ie=(e,r,t,n)=>{var u=void 0===N?se.current:N;const a=H.current;let c=0,l=0;oe(e,r);const s=T?Math.round((t.w-1)/e):(t.w-1)/e,o=T?Math.round((t.h-1)/r):(t.h-1)/r;if(!n[a])return;const{frame:{x:i,y:m},sourceSize:{w:f,h:p}}=n[a],d=1/s,h=1/o;if(_.current&&_.current.map&&(c=$>0?d*(i/f):d*(i/f)-_.current.map.repeat.x,l=Math.abs(1-h)-h*(m/p),_.current.map.offset.x=c,_.current.map.offset.y=l),null!=u){let e=Math.floor(u*n.length);e=Math.max(0,Math.min(e,n.length-1)),isNaN(e)&&(e=0),H.current=e}else O?H.current-=1:H.current+=1};return t.useFrame(((t,n)=>{var u,a;null!=(u=V.current)&&u.frames&&null!=(a=_.current)&&a.map&&(ee.current||se.hasEnded||!y&&!x||((()=>{if(null===(t=V.current)||!("meta"in t)||!("frames"in t))return;var t;const{meta:{size:n},frames:u}=V.current,{w:a,h:s}=c.getFirstFrame(u,l).sourceSize,o=Array.isArray(u)?u:l?u[l]:[],i=r||o.length-1;var m=void 0===N?se.current:N;if(W<=0)return H.current=r||e||0,void ie(a,s,n,o);const f=window.performance.now(),p=f-G.current;if(!(p<=W)){var d=O?H.current<0:H.current>i,v=O?H.current===i:0===H.current,y=O?H.current<0:H.current>=i;if(d){if(H.current=h&&null!=e?e:0,O&&(H.current=i),h?null==b||b({currentFrameName:null!=l?l:"",currentFrame:H.current}):(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),se.hasEnded=!z,z&&(ee.current=!0)),!h)return}else v&&(null==E||E({currentFrameName:null!=l?l:"",currentFrame:H.current}));void 0!==m&&y?!1===te.current&&(null==F||F({currentFrameName:null!=l?l:"",currentFrame:H.current}),te.current=!0):te.current=!1,p<=W||(G.current=f-p%W,ie(a,s,n,o))}})(),null==g||g({currentFrameName:J.current,currentFrame:H.current})))})),i.createElement("group",o.default({},k,{ref:C,scale:function(e=new m.Vector3(1,1,1),r=1){return"number"==typeof r?e.multiplyScalar(r):Array.isArray(r)?e.multiply(new m.Vector3(...r)):r instanceof m.Vector3?e.multiply(r):void 0}(Y,k.scale)}),i.createElement(f.Provider,{value:se},M&&i.createElement(a.Billboard,null,i.createElement("mesh",o.default({ref:U,scale:1,geometry:p},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}))),!M&&i.createElement(u.Instances,o.default({geometry:p,limit:null!=q?q:1},I),i.createElement("meshBasicMaterial",{premultipliedAlpha:!1,toneMapped:!1,side:m.DoubleSide,ref:_,map:X,transparent:!0,alphaTest:null!=R?R:0}),(null!=D?D:[0]).map(((e,r)=>i.createElement(u.Instance,o.default({key:r,ref:1===(null==D?void 0:D.length)?U:null,position:e,scale:1},I))))),A))}));exports.SpriteAnimator=d,exports.useSpriteAnimator=function(){return i.useContext(f)};

package/core/SpriteAnimator.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { ThreeElements, Vector3 } from '@react-three/fiber';
+import * as THREE from 'three';
+import { Instances, Instance } from './Instances';
+import { SpriteData } from './useSpriteLoader';
+type AnimationEventData = {
+    currentFrameName: string;
+    currentFrame: number;
+};
+type CommonProps<T, U, V> = Pick<T & U & V, keyof T & keyof U & keyof V>;
+type CommonMeshProps = CommonProps<React.ComponentProps<'mesh'>, React.ComponentProps<typeof Instance>, React.ComponentProps<typeof Instances>>;
+export type SpriteAnimatorProps = {
+    startFrame?: number;
+    endFrame?: number;
+    fps?: number;
+    frameName?: string;
+    textureDataURL?: string;
+    textureImageURL?: string;
+    loop?: boolean;
+    numberOfFrames?: number;
+    autoPlay?: boolean;
+    animationNames?: Array<string>;
+    onStart?: (data: AnimationEventData) => void;
+    onEnd?: (data: AnimationEventData) => void;
+    onLoopEnd?: (data: AnimationEventData) => void;
+    onFrame?: (data: AnimationEventData) => void;
+    play?: boolean;
+    pause?: boolean;
+    flipX?: boolean;
+    alphaTest?: number;
+    asSprite?: boolean;
+    offset?: number;
+    playBackwards?: boolean;
+    resetOnEnd?: boolean;
+    instanceItems?: Vector3[];
+    maxItems?: number;
+    spriteDataset?: {
+        spriteTexture: THREE.Texture;
+        spriteData: SpriteData | null;
+        aspect: Vector3;
+    } | null;
+    canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings;
+    roundFramePosition?: boolean;
+    meshProps?: CommonMeshProps;
+} & Omit<ThreeElements['group'], 'ref'>;
+type SpriteAnimatorState = {
+    current?: number;
+    offset?: number;
+    imageUrl?: string;
+    hasEnded: boolean;
+    ref: React.Ref<THREE.Group>;
+};
+export declare function useSpriteAnimator(): SpriteAnimatorState | null;
+export declare const SpriteAnimator: React.ForwardRefExoticComponent<{
+    startFrame?: number;
+    endFrame?: number;
+    fps?: number;
+    frameName?: string;
+    textureDataURL?: string;
+    textureImageURL?: string;
+    loop?: boolean;
+    numberOfFrames?: number;
+    autoPlay?: boolean;
+    animationNames?: Array<string>;
+    onStart?: (data: AnimationEventData) => void;
+    onEnd?: (data: AnimationEventData) => void;
+    onLoopEnd?: (data: AnimationEventData) => void;
+    onFrame?: (data: AnimationEventData) => void;
+    play?: boolean;
+    pause?: boolean;
+    flipX?: boolean;
+    alphaTest?: number;
+    asSprite?: boolean;
+    offset?: number;
+    playBackwards?: boolean;
+    resetOnEnd?: boolean;
+    instanceItems?: Vector3[];
+    maxItems?: number;
+    spriteDataset?: {
+        spriteTexture: THREE.Texture;
+        spriteData: SpriteData | null;
+        aspect: Vector3;
+    } | null;
+    canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings;
+    roundFramePosition?: boolean;
+    meshProps?: CommonMeshProps;
+} & 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"> & React.RefAttributes<THREE.Group<THREE.Object3DEventMap>>>;
+export {};