@react-three/drei 9.99.4 → 9.99.6

package/core/Center.d.ts

@@ -1,14 +1,14 @@
-import { Group } from 'three';
+import { Box3, Vector3, Sphere, Group, Object3D } from 'three';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 export type OnCenterCallbackProps = {
-    parent: THREE.Object3D;
-    container: THREE.Object3D;
+    parent: Object3D;
+    container: Object3D;
     width: number;
     height: number;
     depth: number;
-    boundingBox: THREE.Box3;
-    boundingSphere: THREE.Sphere;
-    center: THREE.Vector3;
+    boundingBox: Box3;
+    boundingSphere: Sphere;
+    center: Vector3;
     verticalAlignment: number;
     horizontalAlignment: number;
     depthAlignment: number;

package/core/Environment.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Object3DNode } from '@react-three/fiber';
-import { Scene } from 'three';
+import { Texture, Scene } from 'three';
 import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
 import { PresetsType } from '../helpers/environment-assets';
 import { EnvironmentLoaderProps } from './useEnvironment';
@@ -12,9 +12,9 @@ export type EnvironmentProps = {
     resolution?: number;
     background?: boolean | 'only';
     blur?: number;
-    map?: THREE.Texture;
+    map?: Texture;
     preset?: PresetsType;
-    scene?: Scene | React.MutableRefObject<THREE.Scene>;
+    scene?: Scene | React.MutableRefObject<Scene>;
     ground?: boolean | {
         radius?: number;
         height?: number;

package/core/MeshDiscardMaterial.d.ts

@@ -1,3 +1,4 @@
+import { ShaderMaterial } from 'three';
 import { ReactThreeFiber } from '@react-three/fiber';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 declare global {
@@ -7,4 +8,4 @@ declare global {
         }
     }
 }
-export declare const MeshDiscardMaterial: ForwardRefComponent<JSX.IntrinsicElements['shaderMaterial'], THREE.ShaderMaterial>;
+export declare const MeshDiscardMaterial: ForwardRefComponent<JSX.IntrinsicElements['shaderMaterial'], ShaderMaterial>;

package/core/SpotLight.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"),a=require("@react-three/fiber"),n=require("three-stdlib"),o=require("../materials/SpotLightMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../helpers/constants.cjs.js");var l=i(e),s=u(t),c="#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.);}";const p=e=>null==e?void 0:e.isSpotLight;function d({opacity:e=1,radiusTop:t,radiusBottom:n,depthBuffer:i,color:u="white",distance:l=5,angle:c=.15,attenuation:p=5,anglePower:d=5}){const m=s.useRef(null),h=a.useThree((e=>e.size)),f=a.useThree((e=>e.camera)),g=a.useThree((e=>e.viewport.dpr)),[v]=s.useState((()=>new o.SpotLightMaterial)),[w]=s.useState((()=>new r.Vector3));t=void 0===t?.1:t,n=void 0===n?7*c:n,a.useFrame((()=>{v.uniforms.spotPosition.value.copy(m.current.getWorldPosition(w)),m.current.lookAt(m.current.parent.target.getWorldPosition(w))}));const S=s.useMemo((()=>{const e=new r.CylinderGeometry(t,n,l,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-l/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[l,t,n]);return s.createElement(s.Fragment,null,s.createElement("mesh",{ref:m,geometry:S,raycast:()=>null},s.createElement("primitive",{object:v,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":u,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":i,"uniforms-cameraNear-value":f.near,"uniforms-cameraFar-value":f.far,"uniforms-resolution-value":i?[h.width*g,h.height*g]:[0,0]})))}function m(e,t,n,o,i){const[[u,l]]=s.useState((()=>[new r.Vector3,new r.Vector3]));s.useLayoutEffect((()=>{if(!p(e.current))throw new Error("SpotlightShadow must be a child of a SpotLight");e.current.shadow.mapSize.set(n,o),e.current.shadow.needsUpdate=!0}),[e,n,o]),a.useFrame((()=>{if(!e.current)return;const r=e.current.position,a=e.current.target.position;l.copy(a).sub(r);var n=l.length();l.normalize().multiplyScalar(n*i),u.copy(r).add(l),t.current.position.copy(u),t.current.lookAt(e.current.target.position)}))}function h({distance:e=.4,alphaTest:t=.5,map:o,shader:i=c,width:u=512,height:l=512,scale:p=1,children:d,...h}){const f=s.useRef(null),g=h.spotlightRef,v=h.debug;m(g,f,u,l,e);const w=s.useMemo((()=>new r.WebGLRenderTarget(u,l,{format:r.RGBAFormat,encoding:r.LinearEncoding,stencilBuffer:!1})),[u,l]),S=s.useRef({uShadowMap:{value:o},uTime:{value:0}});s.useEffect((()=>{S.current.uShadowMap.value=o}),[o]);const y=s.useMemo((()=>new n.FullScreenQuad(new r.ShaderMaterial({uniforms:S.current,vertexShader:"\n          varying vec2 vUv;\n\n          void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n          }\n          ",fragmentShader:i}))),[i]);return s.useEffect((()=>()=>{y.material.dispose(),y.dispose()}),[y]),s.useEffect((()=>()=>w.dispose()),[w]),a.useFrame((({gl:e},t)=>{S.current.uTime.value+=t,e.setRenderTarget(w),y.render(e),e.setRenderTarget(null)})),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:f,scale:p,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:w.texture,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:v?1:0},d)))}function f({distance:e=.4,alphaTest:t=.5,map:a,width:n=512,height:o=512,scale:i,children:u,...l}){const c=s.useRef(null),p=l.spotlightRef,d=l.debug;return m(p,c,n,o,e),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:c,scale:i,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:a,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:d?1:0},u)))}const g=s.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n="white",distance:o=5,angle:i=.15,attenuation:u=5,anglePower:c=5,volumetric:p=!0,debug:m=!1,children:h,...f},g)=>{const v=s.useRef(null);return s.useImperativeHandle(g,(()=>v.current),[]),s.createElement("group",null,m&&v.current&&s.createElement("spotLightHelper",{args:[v.current]}),s.createElement("spotLight",l.default({ref:v,angle:i,color:n,distance:o,castShadow:!0},f),p&&s.createElement(d,{debug:m,opacity:e,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n,distance:o,angle:i,attenuation:u,anglePower:c})),h&&s.cloneElement(h,{spotlightRef:v,debug:m}))}));exports.SpotLight=g,exports.SpotLightShadow=function(e){return e.shader?s.createElement(h,e):s.createElement(f,e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),o=require("../materials/SpotLightMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../helpers/constants.cjs.js");var l=i(e),s=u(t),c="#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.);}";const p=e=>null==e?void 0:e.isSpotLight;function d({opacity:e=1,radiusTop:t,radiusBottom:n,depthBuffer:i,color:u="white",distance:l=5,angle:c=.15,attenuation:p=5,anglePower:d=5}){const m=s.useRef(null),h=a.useThree((e=>e.size)),f=a.useThree((e=>e.camera)),g=a.useThree((e=>e.viewport.dpr)),[v]=s.useState((()=>new o.SpotLightMaterial)),[w]=s.useState((()=>new r.Vector3));t=void 0===t?.1:t,n=void 0===n?7*c:n,a.useFrame((()=>{v.uniforms.spotPosition.value.copy(m.current.getWorldPosition(w)),m.current.lookAt(m.current.parent.target.getWorldPosition(w))}));const S=s.useMemo((()=>{const e=new r.CylinderGeometry(t,n,l,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-l/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[l,t,n]);return s.createElement(s.Fragment,null,s.createElement("mesh",{ref:m,geometry:S,raycast:()=>null},s.createElement("primitive",{object:v,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":u,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":i,"uniforms-cameraNear-value":f.near,"uniforms-cameraFar-value":f.far,"uniforms-resolution-value":i?[h.width*g,h.height*g]:[0,0]})))}function m(e,t,n,o,i){const[[u,l]]=s.useState((()=>[new r.Vector3,new r.Vector3]));s.useLayoutEffect((()=>{if(!p(e.current))throw new Error("SpotlightShadow must be a child of a SpotLight");e.current.shadow.mapSize.set(n,o),e.current.shadow.needsUpdate=!0}),[e,n,o]),a.useFrame((()=>{if(!e.current)return;const r=e.current.position,a=e.current.target.position;l.copy(a).sub(r);var n=l.length();l.normalize().multiplyScalar(n*i),u.copy(r).add(l),t.current.position.copy(u),t.current.lookAt(e.current.target.position)}))}function h({distance:e=.4,alphaTest:t=.5,map:o,shader:i=c,width:u=512,height:l=512,scale:p=1,children:d,...h}){const f=s.useRef(null),g=h.spotlightRef,v=h.debug;m(g,f,u,l,e);const w=s.useMemo((()=>new r.WebGLRenderTarget(u,l,{format:r.RGBAFormat,stencilBuffer:!1})),[u,l]),S=s.useRef({uShadowMap:{value:o},uTime:{value:0}});s.useEffect((()=>{S.current.uShadowMap.value=o}),[o]);const y=s.useMemo((()=>new n.FullScreenQuad(new r.ShaderMaterial({uniforms:S.current,vertexShader:"\n          varying vec2 vUv;\n\n          void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n          }\n          ",fragmentShader:i}))),[i]);return s.useEffect((()=>()=>{y.material.dispose(),y.dispose()}),[y]),s.useEffect((()=>()=>w.dispose()),[w]),a.useFrame((({gl:e},t)=>{S.current.uTime.value+=t,e.setRenderTarget(w),y.render(e),e.setRenderTarget(null)})),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:f,scale:p,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:w.texture,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:v?1:0},d)))}function f({distance:e=.4,alphaTest:t=.5,map:a,width:n=512,height:o=512,scale:i,children:u,...l}){const c=s.useRef(null),p=l.spotlightRef,d=l.debug;return m(p,c,n,o,e),s.createElement(s.Fragment,null,s.createElement("mesh",{ref:c,scale:i,castShadow:!0},s.createElement("planeGeometry",null),s.createElement("meshBasicMaterial",{transparent:!0,side:r.DoubleSide,alphaTest:t,alphaMap:a,"alphaMap-wrapS":r.RepeatWrapping,"alphaMap-wrapT":r.RepeatWrapping,opacity:d?1:0},u)))}const g=s.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n="white",distance:o=5,angle:i=.15,attenuation:u=5,anglePower:c=5,volumetric:p=!0,debug:m=!1,children:h,...f},g)=>{const v=s.useRef(null);return s.useImperativeHandle(g,(()=>v.current),[]),s.createElement("group",null,m&&v.current&&s.createElement("spotLightHelper",{args:[v.current]}),s.createElement("spotLight",l.default({ref:v,angle:i,color:n,distance:o,castShadow:!0},f),p&&s.createElement(d,{debug:m,opacity:e,radiusTop:t,radiusBottom:r,depthBuffer:a,color:n,distance:o,angle:i,attenuation:u,anglePower:c})),h&&s.cloneElement(h,{spotlightRef:v,debug:m}))}));exports.SpotLight=g,exports.SpotLightShadow=function(e){return e.shader?s.createElement(h,e):s.createElement(f,e)};

package/core/SpotLight.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Vector3, CylinderGeometry, Matrix4, WebGLRenderTarget, RGBAFormat, LinearEncoding, ShaderMaterial, DoubleSide, RepeatWrapping } from 'three';
+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';
@@ -94,7 +94,6 @@ function SpotlightShadowWithShader({
   useCommon(spotlight, mesh, width, height, distance);
   const renderTarget = React.useMemo(() => new WebGLRenderTarget(width, height, {
     format: RGBAFormat,
-    encoding: LinearEncoding,
     stencilBuffer: false
     // depthTexture: null!
   }), [width, height]);

package/core/Trail.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ColorRepresentation, Object3D } from 'three';
+import { ColorRepresentation, Mesh, Object3D } from 'three';
 import { MeshLineGeometry as MeshLineGeometryImpl } from 'meshline';
 import { ForwardRefComponent } from '../helpers/ts-utils';
 type Settings = {
@@ -16,6 +16,6 @@ type TrailProps = {
     target?: React.MutableRefObject<Object3D>;
 } & Partial<Settings>;
 export declare function useTrail(target: Object3D, settings: Partial<Settings>): React.MutableRefObject<Float32Array | undefined>;
-export type MeshLineGeometry = THREE.Mesh & MeshLineGeometryImpl;
+export type MeshLineGeometry = Mesh & MeshLineGeometryImpl;
 export declare const Trail: ForwardRefComponent<React.PropsWithChildren<TrailProps>, MeshLineGeometry>;
 export {};

package/core/useEnvironment.d.ts

@@ -1,10 +1,13 @@
-import { Texture, Loader, CubeTexture, TextureEncoding } from 'three';
+import { Texture, Loader, CubeTexture } from 'three';
 import { PresetsType } from '../helpers/environment-assets';
+declare const LinearEncoding = 3000;
+declare const sRGBEncoding = 3001;
 export type EnvironmentLoaderProps = {
     files?: string | string[];
     path?: string;
     preset?: PresetsType;
     extensions?: (loader: Loader) => void;
-    encoding?: TextureEncoding;
+    encoding?: typeof LinearEncoding | typeof sRGBEncoding;
 };
 export declare function useEnvironment({ files, path, preset, encoding, extensions, }?: Partial<EnvironmentLoaderProps>): Texture | CubeTexture | (CubeTexture & Record<"colorSpace", unknown>);
+export {};

package/core/useEnvironment.js

@@ -5,6 +5,8 @@ import { presetsObj } from '../helpers/environment-assets.js';
 
 const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
 const isArray = arr => Array.isArray(arr);
+const LinearEncoding = 3000;
+const sRGBEncoding = 3001;
 function useEnvironment({
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
   path = '',
@@ -37,8 +39,6 @@ function useEnvironment({
   // @ts-ignore
   loaderResult[0] : loaderResult;
   texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
-  const sRGBEncoding = 3001;
-  const LinearEncoding = 3000;
   if ('colorSpace' in texture) texture.colorSpace = (encoding !== null && encoding !== void 0 ? encoding : isCubeMap) ? 'srgb' : 'srgb-linear';else texture.encoding = (encoding !== null && encoding !== void 0 ? encoding : isCubeMap) ? sRGBEncoding : LinearEncoding;
   return texture;
 }

package/core/useIntersect.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export declare function useIntersect<T extends THREE.Object3D>(onChange: (visible: boolean) => void): React.MutableRefObject<T>;
+import { Object3D } from 'three';
+export declare function useIntersect<T extends Object3D>(onChange: (visible: boolean) => void): React.MutableRefObject<T>;

package/core/useMatcapTexture.d.ts

@@ -1,2 +1,2 @@
 import { Texture } from 'three';
-export declare function useMatcapTexture(id?: number | string, format?: number, onLoad?: (texture: Texture | Texture[]) => void): [THREE.Texture, string, number];
+export declare function useMatcapTexture(id?: number | string, format?: number, onLoad?: (texture: Texture | Texture[]) => void): [Texture, string, number];

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 n(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 s=n(e),o=n(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,r,t,n)=>{const o=r*(n.aspect>e/r?n.width/e:n.height/r),a=e*(n.aspect>e/r?n.width/e:n.height/r)*t,u=o*t;let c=Math.min(1,a),i=Math.min(1,u);return a>1&&(c=1,i=u/a*1),new s.Vector3(c,i,1)};function c(n,c,i,f,l){const h=r.useThree((e=>e.viewport)),m=o.useRef(null),d=o.useRef(0),[p,w]=t.useState(null),[y,x]=o.useState(new s.Texture),g=new s.TextureLoader,[S,L]=t.useState(null);function b(e){(e||n)&&new Promise((r=>{g.load(null!=e?e:n,r)})).then((e=>{O(null,e)}))}function j(e,r,t){const n=fetch(e).then((e=>e.json())),s=new Promise((e=>{g.load(r,e)}));Promise.all([n,s]).then((e=>{t(e[0],e[1])}))}o.useLayoutEffect((()=>(c&&n?j(c,n,O):n&&b(),()=>{n&&r.useLoader.clear(e.TextureLoader,n)})),[]);const O=(e,r)=>{let t=new s.Vector3(1,1,1);if(null===e){if(r&&f){const e=r.image.width,n=r.image.height,s=e/f,o=n;if(d.current=f,m.current={frames:[],meta:{version:"1.0",size:{w:e,h:n},scale:"1"}},parseInt(s.toString(),10)===s)for(let e=0;e<f;e++)m.current.frames.push({frame:{x:e*s,y:0,w:s,h:o},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:s,h:o},sourceSize:{w:s,h:n}});t=u(s,o,.1,h)}}else if(r){m.current=e,m.current.frames=z(),d.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:n}=a(e.frames).sourceSize;t=u(r,n,.1,h)}w(m.current),r.encoding=s.sRGBEncoding,x(r),L({spriteTexture:r,spriteData:m.current,aspect:t})},z=()=>{const e={},r=m.current,t=i;if(t&&Array.isArray(r.frames)){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const s of r.frames){const r=s.frame,o=r.x,a=r.y,u=r.w,c=r.h,i=s.sourceSize.w,f=s.sourceSize.h;"string"==typeof s.filename&&-1!==s.filename.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:o,y:a,w:u,h:c,frame:r,sourceSize:{w:i,h:f}})}}return e}if(t&&"object"==typeof r.frames){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const s in r.frames){const o=r.frames[s],a=o.frame,u=a.x,c=a.y,i=a.w,f=a.h,l=o.sourceSize.w,h=o.sourceSize.h;"string"==typeof s&&-1!==s.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:u,y:c,w:i,h:f,frame:a,sourceSize:{w:l,h:h}})}}return e}{const e=[];for(const t in r.frames)e.push(r.frames[t]);return e}};return o.useLayoutEffect((()=>{null==l||l(y,p)}),[y,p]),{spriteObj:S,loadJsonAndTexture:function(e,r){r&&e?j(r,e,O):b(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=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 n(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 o=n(e),s=n(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,r,t,n)=>{const s=r*(n.aspect>e/r?n.width/e:n.height/r),a=e*(n.aspect>e/r?n.width/e:n.height/r)*t,u=s*t;let c=Math.min(1,a),i=Math.min(1,u);return a>1&&(c=1,i=u/a*1),new o.Vector3(c,i,1)};function c(n,c,i,f,l){const h=r.useThree((e=>e.viewport)),m=s.useRef(null),p=s.useRef(0),[d,w]=t.useState(null),[y,g]=s.useState(new o.Texture),x=new o.TextureLoader,[S,b]=t.useState(null);function L(e){(e||n)&&new Promise((r=>{x.load(null!=e?e:n,r)})).then((e=>{O(null,e)}))}function j(e,r,t){const n=fetch(e).then((e=>e.json())),o=new Promise((e=>{x.load(r,e)}));Promise.all([n,o]).then((e=>{t(e[0],e[1])}))}s.useLayoutEffect((()=>(c&&n?j(c,n,O):n&&L(),()=>{n&&r.useLoader.clear(e.TextureLoader,n)})),[]);const O=(e,r)=>{let t=new o.Vector3(1,1,1);if(null===e){if(r&&f){const e=r.image.width,n=r.image.height,o=e/f,s=n;if(p.current=f,m.current={frames:[],meta:{version:"1.0",size:{w:e,h:n},scale:"1"}},parseInt(o.toString(),10)===o)for(let e=0;e<f;e++)m.current.frames.push({frame:{x:e*o,y:0,w:o,h:s},rotated:!1,trimmed:!1,spriteSourceSize:{x:0,y:0,w:o,h:s},sourceSize:{w:o,h:n}});t=u(o,s,.1,h)}}else if(r){m.current=e,m.current.frames=z(),p.current=Array.isArray(e.frames)?e.frames.length:Object.keys(e.frames).length;const{w:r,h:n}=a(e.frames).sourceSize;t=u(r,n,.1,h)}w(m.current),"encoding"in r?r.encoding=3001:r.colorSpace="srgb",g(r),b({spriteTexture:r,spriteData:m.current,aspect:t})},z=()=>{const e={},r=m.current,t=i;if(t&&Array.isArray(r.frames)){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const o of r.frames){const r=o.frame,s=r.x,a=r.y,u=r.w,c=r.h,i=o.sourceSize.w,f=o.sourceSize.h;"string"==typeof o.filename&&-1!==o.filename.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:s,y:a,w:u,h:c,frame:r,sourceSize:{w:i,h:f}})}}return e}if(t&&"object"==typeof r.frames){for(let n=0;n<t.length;n++){e[t[n]]=[];for(const o in r.frames){const s=r.frames[o],a=s.frame,u=a.x,c=a.y,i=a.w,f=a.h,l=s.sourceSize.w,h=s.sourceSize.h;"string"==typeof o&&-1!==o.toLowerCase().indexOf(t[n].toLowerCase())&&e[t[n]].push({x:u,y:c,w:i,h:f,frame:a,sourceSize:{w:l,h:h}})}}return e}{const e=[];for(const t in r.frames)e.push(r.frames[t]);return e}};return s.useLayoutEffect((()=>{null==l||l(y,d)}),[y,d]),{spriteObj:S,loadJsonAndTexture:function(e,r){r&&e?j(r,e,O):L(e)}}}c.preload=t=>r.useLoader.preload(e.TextureLoader,t),c.clear=t=>r.useLoader.clear(e.TextureLoader,t),exports.calculateAspectRatio=u,exports.getFirstItem=a,exports.useSpriteLoader=c;

package/core/useSpriteLoader.js

@@ -146,7 +146,10 @@ function useSpriteLoader(input, json, animationNames, numberOfFrames, onLoad) {
       aspect = calculateAspectRatio(w, h, aspectFactor, v);
     }
     setSpriteData(spriteDataRef.current);
-    _spriteTexture.encoding = THREE.sRGBEncoding;
+    // @ts-ignore
+    if ('encoding' in _spriteTexture) _spriteTexture.encoding = 3001; // sRGBEncoding
+    // @ts-ignore
+    else _spriteTexture.colorSpace = 'srgb';
     setSpriteTexture(_spriteTexture);
     setSpriteObj({
       spriteTexture: _spriteTexture,