@react-three/drei 9.107.0 → 9.107.2

package/README.md

@@ -373,7 +373,7 @@ If available controls have damping enabled by default, they manage their own upd
 const controls = useThree((state) => state.controls)
 ```
 
-Drei currently exports OrbitControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-orbitcontrols--orbit-controls-story), MapControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-mapcontrols--map-controls-scene-st), TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-pointerlockcontrols--pointer-lock-controls-scene-st), FirstPersonControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-firstpersoncontrols--first-person-controls-story) CameraControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-cameracontrols--camera-controls-story) and FaceControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-facecontrols)
+Drei currently exports OrbitControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-orbitcontrols--orbit-controls-story), MapControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-mapcontrols--map-controls-st), TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-pointerlockcontrols--pointer-lock-controls-scene-st), FirstPersonControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-firstpersoncontrols--first-person-controls-story) CameraControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-cameracontrols--camera-controls-story) and FaceControls [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/controls-facecontrols)
 
 All controls react to the default camera. If you have a `<PerspectiveCamera makeDefault />` in your scene, they will control it. If you need to inject an imperative camera or one that isn't the default, use the `camera` prop: `<OrbitControls camera={MyCamera} />`.
 
@@ -1188,7 +1188,7 @@ A triangle that fills the screen, ideal for full-screen fragment shader work (ra
 
 #### Line
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--basic-line)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shapes-line--basic-line-st)
 
 Renders a THREE.Line2 or THREE.LineSegments2 (depending on the value of `segments`).
 
@@ -1207,7 +1207,7 @@ Renders a THREE.Line2 or THREE.LineSegments2 (depending on the value of `segment
 
 #### QuadraticBezierLine
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--quadratic-bezier)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shapes-line--quadratic-bezier-st)
 
 <p>
   <a href="https://codesandbox.io/s/2ij9u"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2ij9u/screenshot.png" alt="Demo"/></a>
@@ -1246,7 +1246,7 @@ return <QuadraticBezierLine ref={ref} />
 
 #### CubicBezierLine
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--cubic-bezier)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shapes-line--cubic-bezier-st)
 
 Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.
 
@@ -1267,7 +1267,7 @@ Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.
 
 #### CatmullRomLine
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-line--catmull-rom)
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shapes-line--catmull-rom-st)
 
 Renders a THREE.Line2 using THREE.CatmullRomCurve3 for interpolation.
 

package/core/Bvh.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../custom.d.ts" />
 import * as React from 'react';
 import { Mesh, Group } from 'three';
 import { SplitStrategy } from 'three-mesh-bvh';

package/core/Edges.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"),n=require("./Line.cjs.js");function u(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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three-stdlib");var c=u(e),i=s(t),o=s(r);const a=i.forwardRef((({threshold:e=15,...t},r)=>{const u=i.useRef(null);i.useImperativeHandle(r,(()=>u.current),[]);const s=i.useMemo((()=>[0,0,0,1,0,0]),[]),a=i.useRef(),f=i.useRef();return i.useLayoutEffect((()=>{const t=u.current.parent;if(t){const r=t.geometry;if(r!==a.current||e!==f.current){a.current=r,f.current=e;const t=new o.EdgesGeometry(r,e).attributes.position.array;u.current.geometry.setPositions(t),u.current.geometry.attributes.instanceStart.needsUpdate=!0,u.current.geometry.attributes.instanceEnd.needsUpdate=!0,u.current.computeLineDistances()}}})),i.createElement(n.Line,c.default({segments:!0,points:s,ref:u,raycast:()=>null},t))}));exports.Edges=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("./Line.cjs.js");function u(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 n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("@react-three/fiber"),require("three-stdlib");var c=u(e),i=s(t),o=s(r);const a=i.forwardRef((({threshold:e=15,geometry:t,...r},u)=>{const s=i.useRef(null);i.useImperativeHandle(u,(()=>s.current),[]);const a=i.useMemo((()=>[0,0,0,1,0,0]),[]),f=i.useRef(),l=i.useRef();return i.useLayoutEffect((()=>{const r=s.current.parent,n=null!=t?t:null==r?void 0:r.geometry;if(!n)return;if(f.current===n&&l.current===e)return;f.current=n,l.current=e;const u=new o.EdgesGeometry(n,e).attributes.position.array;s.current.geometry.setPositions(u),s.current.geometry.attributes.instanceStart.needsUpdate=!0,s.current.geometry.attributes.instanceEnd.needsUpdate=!0,s.current.computeLineDistances()})),i.createElement(n.Line,c.default({segments:!0,points:a,ref:s,raycast:()=>null},r))}));exports.Edges=a;

package/core/Edges.d.ts

@@ -6,7 +6,8 @@ export type EdgesRef = THREE.Mesh<LineSegmentsGeometry, LineMaterial>;
 export type EdgesProps = Partial<ThreeElements['mesh']> & {
     threshold?: number;
     lineWidth?: number;
-} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {
+} & Omit<LineMaterialParameters, 'vertexColors' | 'color'> & Omit<ReactThreeFiber.Object3DNode<Line2, typeof Line2>, 'args' | 'geometry'> & Omit<ReactThreeFiber.Object3DNode<LineMaterial, [LineMaterialParameters]>, 'color' | 'vertexColors' | 'args'> & {
+    geometry?: THREE.BufferGeometry;
     color?: THREE.ColorRepresentation;
 };
 export declare const Edges: ForwardRefComponent<EdgesProps, EdgesRef>;

package/core/Edges.js

@@ -5,6 +5,7 @@ import { Line } from './Line.js';
 
 const Edges = /* @__PURE__ */React.forwardRef(({
   threshold = 15,
+  geometry: explicitGeometry,
   ...props
 }, fref) => {
   const ref = React.useRef(null);
@@ -14,18 +15,17 @@ const Edges = /* @__PURE__ */React.forwardRef(({
   const memoizedThreshold = React.useRef();
   React.useLayoutEffect(() => {
     const parent = ref.current.parent;
-    if (parent) {
-      const geometry = parent.geometry;
-      if (geometry !== memoizedGeometry.current || threshold !== memoizedThreshold.current) {
-        memoizedGeometry.current = geometry;
-        memoizedThreshold.current = threshold;
-        const points = new THREE.EdgesGeometry(geometry, threshold).attributes.position.array;
-        ref.current.geometry.setPositions(points);
-        ref.current.geometry.attributes.instanceStart.needsUpdate = true;
-        ref.current.geometry.attributes.instanceEnd.needsUpdate = true;
-        ref.current.computeLineDistances();
-      }
-    }
+    const geometry = explicitGeometry !== null && explicitGeometry !== void 0 ? explicitGeometry : parent == null ? void 0 : parent.geometry;
+    if (!geometry) return;
+    const cached = memoizedGeometry.current === geometry && memoizedThreshold.current === threshold;
+    if (cached) return;
+    memoizedGeometry.current = geometry;
+    memoizedThreshold.current = threshold;
+    const points = new THREE.EdgesGeometry(geometry, threshold).attributes.position.array;
+    ref.current.geometry.setPositions(points);
+    ref.current.geometry.attributes.instanceStart.needsUpdate = true;
+    ref.current.geometry.attributes.instanceEnd.needsUpdate = true;
+    ref.current.computeLineDistances();
   });
   return /*#__PURE__*/React.createElement(Line, _extends({
     segments: true,

package/core/Fbo.d.ts

@@ -21,7 +21,7 @@ type FBOSettings = {
 };
 export declare function useFBO(width?: number | FBOSettings, height?: number, settings?: FBOSettings): THREE.WebGLRenderTarget;
 export declare const Fbo: ({ children, width, height, ...settings }: {
-    children?: ((target: ReturnType<typeof useFBO>) => React.ReactNode) | undefined;
+    children?: (target: ReturnType<typeof useFBO>) => React.ReactNode;
     width: Parameters<typeof useFBO>[0];
     height: Parameters<typeof useFBO>[1];
 } & FBOSettings) => React.JSX.Element;

package/core/Ktx2.d.ts

@@ -8,7 +8,7 @@ export declare namespace useKTX2 {
     var clear: (input: string | string[]) => void;
 }
 export declare const Ktx2: ({ children, input, basisPath, }: {
-    children?: ((texture: ReturnType<typeof useKTX2>) => React.ReactNode) | undefined;
+    children?: (texture: ReturnType<typeof useKTX2>) => React.ReactNode;
     input: Parameters<typeof useKTX2>[0];
     basisPath?: Parameters<typeof useKTX2>[1];
 }) => React.JSX.Element;

package/core/MatcapTexture.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Texture } from 'three';
 export declare function useMatcapTexture(id?: number | string, format?: number, onLoad?: (texture: Texture | Texture[]) => void): [Texture, string, number];
 export declare const MatcapTexture: ({ children, id, format, onLoad, }: {
-    children?: ((texture: [Texture, string, number]) => React.ReactNode) | undefined;
+    children?: (texture: ReturnType<typeof useMatcapTexture>) => React.ReactNode;
     id?: Parameters<typeof useMatcapTexture>[0];
     format?: Parameters<typeof useMatcapTexture>[1];
     onLoad?: Parameters<typeof useMatcapTexture>[2];

package/core/NormalTexture.d.ts

@@ -7,7 +7,7 @@ type Settings = {
 };
 export declare function useNormalTexture(id?: number, settings?: Settings, onLoad?: (texture: Texture | Texture[]) => void): [Texture, string, number];
 export declare const NormalTexture: ({ children, id, onLoad, ...settings }: {
-    children?: ((texture: [Texture, string, number]) => React.ReactNode) | undefined;
+    children?: (texture: ReturnType<typeof useNormalTexture>) => React.ReactNode;
     id?: Parameters<typeof useNormalTexture>[0];
     onLoad?: Parameters<typeof useNormalTexture>[2];
 } & Settings) => React.JSX.Element;

package/core/RenderTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./Fbo.cjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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)}var i=u(e),c=l(r),o=l(t);const s=o.forwardRef((({children:e,compute:r,width:t,height:u,samples:l=8,renderPriority:s=0,eventPriority:d=0,frames:p=1/0,stencilBuffer:m=!1,depthBuffer:g=!0,generateMipmaps:b=!1,...v},h)=>{const{size:y,viewport:j}=n.useThree(),x=a.useFBO((t||y.width)*j.dpr,(u||y.height)*j.dpr,{samples:l,stencilBuffer:m,depthBuffer:g,generateMipmaps:b}),[O]=o.useState((()=>new c.Scene)),P=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=x.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof c.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[l]=t.raycaster.intersectObject(u);if(!l)return!1;const i=l.uv;if(!i)return!1;r.raycaster.setFromCamera(r.pointer.set(2*i.x-1,2*i.y-1),r.camera)}),[]);return o.useImperativeHandle(h,(()=>x.texture),[x]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:s,frames:p,fbo:x},e,o.createElement("group",{onPointerOver:()=>null})),O,{events:{compute:r||P,priority:d}}),o.createElement("primitive",i.default({object:x.texture},v)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u,l,i=0;return n.useFrame((r=>{(e===1/0||i<e)&&(u=r.gl.autoClear,l=r.gl.xr.enabled,r.gl.autoClear=!0,r.gl.xr.enabled=!1,r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),r.gl.autoClear=u,r.gl.xr.enabled=l,i++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./Fbo.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(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)}var u=i(e),s=l(r),c=l(t);const o=c.forwardRef((({children:e,compute:r,width:t,height:i,samples:l=8,renderPriority:o=0,eventPriority:d=0,frames:g=1/0,stencilBuffer:p=!1,depthBuffer:m=!0,generateMipmaps:b=!1,...v},h)=>{const{size:x,viewport:y}=n.useThree(),j=a.useFBO((t||x.width)*y.dpr,(i||x.height)*y.dpr,{samples:l,stencilBuffer:p,depthBuffer:m,generateMipmaps:b}),[P]=c.useState((()=>new s.Scene)),O=c.useCallback(((e,r,t)=>{var n,a;let i=null==(n=j.texture)?void 0:n.__r3f.parent;for(;i&&!(i instanceof s.Object3D);)i=i.__r3f.parent;if(!i)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[l]=t.raycaster.intersectObject(i);if(!l)return!1;const u=l.uv;if(!u)return!1;r.raycaster.setFromCamera(r.pointer.set(2*u.x-1,2*u.y-1),r.camera)}),[]);return c.useImperativeHandle(h,(()=>j.texture),[j]),c.createElement(c.Fragment,null,n.createPortal(c.createElement(f,{renderPriority:o,frames:g,fbo:j},e,c.createElement("group",{onPointerOver:()=>null})),P,{events:{compute:r||O,priority:d}}),c.createElement("primitive",u.default({object:j.texture},v)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let i,l,u,s,o=0;return n.useFrame((r=>{(e===1/0||o<e)&&(i=r.gl.autoClear,l=r.gl.xr.enabled,u=r.gl.getRenderTarget(),s=r.gl.xr.isPresenting,r.gl.autoClear=!0,r.gl.xr.enabled=!1,r.gl.xr.isPresenting=!1,r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(u),r.gl.autoClear=i,r.gl.xr.enabled=l,r.gl.xr.isPresenting=s,o++)}),r),c.createElement(c.Fragment,null,t)}exports.RenderTexture=o;

package/core/RenderTexture.js

@@ -78,17 +78,23 @@ function Container({
   let count = 0;
   let oldAutoClear;
   let oldXrEnabled;
+  let oldRenderTarget;
+  let oldIsPresenting;
   useFrame(state => {
     if (frames === Infinity || count < frames) {
       oldAutoClear = state.gl.autoClear;
       oldXrEnabled = state.gl.xr.enabled;
+      oldRenderTarget = state.gl.getRenderTarget();
+      oldIsPresenting = state.gl.xr.isPresenting;
       state.gl.autoClear = true;
       state.gl.xr.enabled = false;
+      state.gl.xr.isPresenting = false;
       state.gl.setRenderTarget(fbo);
       state.gl.render(state.scene, state.camera);
-      state.gl.setRenderTarget(null);
+      state.gl.setRenderTarget(oldRenderTarget);
       state.gl.autoClear = oldAutoClear;
       state.gl.xr.enabled = oldXrEnabled;
+      state.gl.xr.isPresenting = oldIsPresenting;
       count++;
     }
   }, renderPriority);

package/core/Texture.d.ts

@@ -13,7 +13,7 @@ export declare namespace useTexture {
     var clear: (input: string | string[]) => void;
 }
 export declare const Texture: ({ children, input, onLoad, }: {
-    children?: ((texture: ReturnType<typeof useTexture>) => React.ReactNode) | undefined;
+    children?: (texture: ReturnType<typeof useTexture>) => React.ReactNode;
     input: Parameters<typeof useTexture>[0];
     onLoad?: Parameters<typeof useTexture>[1];
 }) => React.JSX.Element;

package/core/TrailTexture.d.ts

@@ -13,6 +13,6 @@ type TrailConfig = {
 };
 export declare function useTrailTexture(config?: Partial<TrailConfig>): [Texture, (ThreeEvent: any) => void];
 export declare const TrailTexture: ({ children, ...config }: {
-    children?: ((texture: [Texture, (ThreeEvent: any) => void]) => React.ReactNode) | undefined;
+    children?: (texture: ReturnType<typeof useTrailTexture>) => React.ReactNode;
 } & TrailConfig) => React.JSX.Element;
 export {};

package/core/VideoTexture.d.ts

@@ -8,11 +8,7 @@ type Config = {
 } & Partial<Omit<HTMLVideoElement, 'children'>>;
 export declare function useVideoTexture(src: string | MediaStream, { unsuspend, start, crossOrigin, muted, loop, hls, ...videoProps }?: Config): THREE.VideoTexture;
 export declare const VideoTexture: ({ children, src, ...config }: {
-    children?: ((texture: ReturnType<typeof useVideoTexture>) => React.ReactNode) | undefined;
+    children?: (texture: ReturnType<typeof useVideoTexture>) => React.ReactNode;
     src: Parameters<typeof useVideoTexture>[0];
-} & {
-    unsuspend?: "canplay" | "canplaythrough" | "loadedmetadata" | "loadstart" | undefined;
-    start?: boolean | undefined;
-    hls?: Partial<HlsConfig> | undefined;
-} & Partial<Omit<HTMLVideoElement, "children">>) => React.JSX.Element;
+} & Parameters<typeof useVideoTexture>[1]) => React.JSX.Element;
 export {};

package/core/useEnvironment.d.ts

@@ -1,4 +1,4 @@
-import { Texture, Loader, CubeTexture } from 'three';
+import { Texture, Loader } from 'three';
 import { PresetsType } from '../helpers/environment-assets';
 import { TextureEncoding } from '../helpers/deprecated';
 export type EnvironmentLoaderProps = {
@@ -8,4 +8,4 @@ export type EnvironmentLoaderProps = {
     extensions?: (loader: Loader) => void;
     encoding?: TextureEncoding;
 };
-export declare function useEnvironment({ files, path, preset, encoding, extensions, }?: Partial<EnvironmentLoaderProps>): Texture | CubeTexture | (CubeTexture & Record<"colorSpace", unknown>);
+export declare function useEnvironment({ files, path, preset, encoding, extensions, }?: Partial<EnvironmentLoaderProps>): Texture;

package/core/useSpriteLoader.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=o(e),s=o(t);const a=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){return e[Object.keys(e)[0]][0]}return{w:0,h:0}},u=e=>{for(let r=3;r<e.length;r+=4)if(0!==e[r])return!1;return!0},i=(e,r,t,o)=>{const s=r*(o.aspect>e/r?o.width/e:o.height/r),a=e*(o.aspect>e/r?o.width/e:o.height/r)*t,u=s*t;let i=Math.min(1,a),c=Math.min(1,u);return a>1&&(i=1,c=u/a*1),new n.Vector3(i,c,1)};function c(o,c,f,h,l){const m=r.useThree((e=>e.viewport)),d=s.useRef(null),w=s.useRef(0),[g,p]=t.useState(null),[y,x]=s.useState(new n.Texture),S=new n.TextureLoader,[b,L]=t.useState(null);function j(e){(e||o)&&new Promise((r=>{S.load(null!=e?e:o,r)})).then((e=>{z(null,e)}))}function O(e,r,t){const o=fetch(e).then((e=>e.json())),n=new Promise((e=>{S.load(r,e)}));Promise.all([o,n]).then((e=>{t(e[0],e[1])}))}s.useLayoutEffect((()=>(c&&o?O(c,o,z):o&&j(),()=>{o&&r.useLoader.clear(e.TextureLoader,o)})),[]);const z=(e,r)=>{let t=new n.Vector3(1,1,1);if(null===e){if(r&&h){const e=r.image.width,o=r.image.height;w.current=h;const{rows:n,columns:s,frameWidth:a,frameHeight:u,emptyFrames:c}=v(r,h);d.current={frames:[],meta:{version:"1.0",size:{w:e,h:o},rows:n,columns:s,frameWidth:a,frameHeight:u,scale:"1"}};for(let e=0;e<n;e++)for(let r=0;r<s;r++){(null!=c?c:[]).some((t=>t.row===e&&t.col===r))||d.current.frames.push({frame:{x:r*a,y:e*u,w:a,h:u},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:a,h:u},sourceSize:{w:a,h:u}})}t=i(a,u,.1,m)}}else if(r){d.current=e,d.current.frames=A(),w.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:o}=a(e.frames).sourceSize;t=i(r,o,.1,m)}p(d.current),"encoding"in r?r.encoding=3001:r.colorSpace="srgb",x(r),L({spriteTexture:r,spriteData:d.current,aspect:t})},v=(e,r)=>{if(e.image){const t=document.createElement("canvas"),o=t.getContext("2d");t.width=e.image.width,t.height=e.image.height,o.drawImage(e.image,0,0);const n=e.image.width,s=e.image.height,a=Math.round(Math.sqrt(r*(n/s))),i=Math.round(r/a),c=n/a,f=s/i,h=[];for(let e=0;e<i;e++)for(let t=0;t<a;t++){if(e*a+t>=r){h.push({row:e,col:t});continue}const n=o.getImageData(t*c,e*f,c,f).data;u(n)&&h.push({row:e,col:t})}return{rows:i,columns:a,frameWidth:c,frameHeight:f,emptyFrames:h}}return{rows:0,columns:0,frameWidth:0,frameHeight:0,emptyFrames:[]}},A=()=>{const e={},r=d.current,t=f;if(t&&Array.isArray(r.frames)){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const n of r.frames){const r=n.frame,s=r.x,a=r.y,u=r.w,i=r.h,c=n.sourceSize.w,f=n.sourceSize.h;"string"==typeof n.filename&&-1!==n.filename.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:s,y:a,w:u,h:i,frame:r,sourceSize:{w:c,h:f}})}}return e}if(t&&"object"==typeof r.frames){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const n in r.frames){const s=r.frames[n],a=s.frame,u=a.x,i=a.y,c=a.w,f=a.h,h=s.sourceSize.w,l=s.sourceSize.h;"string"==typeof n&&-1!==n.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:u,y:i,w:c,h:f,frame:a,sourceSize:{w:h,h:l}})}}return e}{const e=[];for(const t in r.frames)e.push(r.frames[t]);return e}};return s.useLayoutEffect((()=>{null==l||l(y,g)}),[y,g]),{spriteObj:b,loadJsonAndTexture:function(e,r){r&&e?O(r,e,z):j(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=i,exports.checkIfFrameIsEmpty=u,exports.getFirstItem=a,exports.useSpriteLoader=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("@react-three/fiber"),t=require("react");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var a=o(e),n=o(t);const s=e=>{if(Array.isArray(e))return e[0];if("object"==typeof e&&null!==e){return e[Object.keys(e)[0]][0]}return{w:0,h:0}},i=e=>{for(let r=3;r<e.length;r+=4)if(0!==e[r])return!1;return!0},u=(e,r,t,o)=>{const n=r*(o.aspect>e/r?o.width/e:o.height/r),s=e*(o.aspect>e/r?o.width/e:o.height/r)*t,i=n*t;let u=Math.min(1,s),c=Math.min(1,i);return s>1&&(u=1,c=i/s*1),new a.Vector3(u,c,1)};function c(o,c,f,l,m){const h=r.useThree((e=>e.viewport)),d=n.useRef(null),w=n.useRef(0),[p,g]=t.useState(null),[y,x]=n.useState(new a.Texture),S=new a.TextureLoader,[L,b]=t.useState(null);function j(e){(e||o)&&new Promise((r=>{S.load(null!=e?e:o,r)})).then((e=>{O(null,e)}))}function v(e,r,t){const o=fetch(e).then((e=>e.json())),a=new Promise((e=>{S.load(r,e)}));Promise.all([o,a]).then((e=>{t(e[0],e[1])}))}n.useLayoutEffect((()=>(c&&o?v(c,o,O):o&&j(),()=>{o&&r.useLoader.clear(e.TextureLoader,o)})),[]);const O=(e,r)=>{let t=new a.Vector3(1,1,1);if(null===e){if(r&&l){const e=r.image.width,o=r.image.height;w.current=l;const{rows:a,columns:n,frameWidth:s,frameHeight:i,emptyFrames:c}=z(r,l);d.current={frames:[],meta:{version:"1.0",size:{w:e,h:o},rows:a,columns:n,frameWidth:s,frameHeight:i,scale:"1"}};for(let e=0;e<a;e++)for(let r=0;r<n;r++){(null!=c?c:[]).some((t=>t.row===e&&t.col===r))||d.current.frames.push({frame:{x:r*s,y:e*i,w:s,h:i},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:i},sourceSize:{w:s,h:i}})}t=u(s,i,.1,h)}d.current.frames=M(d.current.frames)}else if(r){d.current=e,d.current.frames=A(),w.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:o}=s(e.frames).sourceSize;t=u(r,o,.1,h)}g(d.current),"encoding"in r?r.encoding=3001:r.colorSpace=a.SRGBColorSpace,x(r),b({spriteTexture:r,spriteData:d.current,aspect:t})},z=(e,r)=>{if(e.image){const t=document.createElement("canvas"),o=t.getContext("2d");t.width=e.image.width,t.height=e.image.height,o.drawImage(e.image,0,0);const a=e.image.width,n=e.image.height,s=Math.round(Math.sqrt(r*(a/n))),u=Math.round(r/s),c=a/s,f=n/u,l=[];for(let e=0;e<u;e++)for(let t=0;t<s;t++){if(e*s+t>=r){l.push({row:e,col:t});continue}const a=o.getImageData(t*c,e*f,c,f).data;i(a)&&l.push({row:e,col:t})}return{rows:u,columns:s,frameWidth:c,frameHeight:f,emptyFrames:l}}return{rows:0,columns:0,frameWidth:0,frameHeight:0,emptyFrames:[]}},A=()=>{const e={},r=d.current,t=f;if(t&&Array.isArray(r.frames)){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const a of r.frames){const r=a.frame,n=r.x,s=r.y,i=r.w,u=r.h,c=a.sourceSize.w,f=a.sourceSize.h;"string"==typeof a.filename&&-1!==a.filename.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:n,y:s,w:i,h:u,frame:r,sourceSize:{w:c,h:f}})}}for(const r in e)e[r].frame=M(e[r]);return e}if(t&&"object"==typeof r.frames){for(let o=0;o<t.length;o++){e[t[o]]=[];for(const a in r.frames){const n=r.frames[a],s=n.frame,i=s.x,u=s.y,c=s.w,f=s.h,l=n.sourceSize.w,m=n.sourceSize.h;"string"==typeof a&&-1!==a.toLowerCase().indexOf(t[o].toLowerCase())&&e[t[o]].push({x:i,y:u,w:c,h:f,frame:s,sourceSize:{w:l,h:m}})}}for(const r in e)e[r].frame=M(e[r]);return e}{let e=[];for(const t in r.frames)e.push(r.frames[t]);return e=M(e),e}},M=e=>{let r=null;for(const t of e){const{w:e,h:o}=t.frame,a=e*o;(!r||a>r.area)&&(r={...t.frame,area:a})}for(const a of e){var t;const{w:e,h:n}=a.frame,s=e*n;var o;if(s===(null==(t=r)?void 0:t.area))a.scaleRatio=1;else a.scaleRatio=Math.sqrt(s/(null==(o=r)?void 0:o.area))}return e};return n.useLayoutEffect((()=>{null==m||m(y,p)}),[y,p]),{spriteObj:L,loadJsonAndTexture:function(e,r){r&&e?v(r,e,O):j(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=u,exports.checkIfFrameIsEmpty=i,exports.getFirstItem=s,exports.useSpriteLoader=c;

package/core/useSpriteLoader.js

@@ -155,6 +155,9 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
         }
         aspect = calculateAspectRatio(frameWidth, frameHeight, aspectFactor, v);
       }
+
+      //scale ratio for stadalone sprite
+      spriteDataRef.current.frames = calculateScaleRatio(spriteDataRef.current.frames);
     } else if (_spriteTexture) {
       spriteDataRef.current = json;
       spriteDataRef.current.frames = parseFrames();
@@ -169,7 +172,7 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
     // @ts-ignore
     if ('encoding' in _spriteTexture) _spriteTexture.encoding = 3001; // sRGBEncoding
     // @ts-ignore
-    else _spriteTexture.colorSpace = 'srgb';
+    else _spriteTexture.colorSpace = THREE.SRGBColorSpace;
     setSpriteTexture(_spriteTexture);
     setSpriteObj({
       spriteTexture: _spriteTexture,
@@ -263,6 +266,9 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
           }
         }
       }
+      for (const frame in sprites) {
+        sprites[frame].frame = calculateScaleRatio(sprites[frame]);
+      }
       return sprites;
     } else if (delimiters && typeof data['frames'] === 'object') {
       for (let i = 0; i < delimiters.length; i++) {
@@ -292,16 +298,56 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
           }
         }
       }
+      for (const frame in sprites) {
+        sprites[frame].frame = calculateScaleRatio(sprites[frame]);
+      }
       return sprites;
     } else {
       // we need to convert it into an array
-      const spritesArr = [];
+      let spritesArr = [];
       for (const key in data.frames) {
         spritesArr.push(data.frames[key]);
       }
+      spritesArr = calculateScaleRatio(spritesArr);
       return spritesArr;
     }
   };
+
+  // calculate scale ratio for the frames
+  const calculateScaleRatio = frames => {
+    // Find the largest frame
+    let largestFrame = null;
+    for (const frame of frames) {
+      const {
+        w,
+        h
+      } = frame.frame;
+      const area = w * h;
+      if (!largestFrame || area > largestFrame.area) {
+        largestFrame = {
+          ...frame.frame,
+          area
+        };
+      }
+    }
+
+    // Set scaleRatio property on each frame
+    for (const frame of frames) {
+      var _largestFrame;
+      const {
+        w,
+        h
+      } = frame.frame;
+      const area = w * h;
+      if (area === ((_largestFrame = largestFrame) == null ? void 0 : _largestFrame.area)) {
+        frame.scaleRatio = 1;
+      } else {
+        var _largestFrame2;
+        frame.scaleRatio = Math.sqrt(area / ((_largestFrame2 = largestFrame) == null ? void 0 : _largestFrame2.area));
+      }
+    }
+    return frames;
+  };
   React.useLayoutEffect(() => {
     onLoad == null || onLoad(spriteTexture, spriteData);
   }, [spriteTexture, spriteData]);