@react-three/drei 9.83.9 → 9.84.0

package/core/useBoxProjectedEnv.js

@@ -2,11 +2,10 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { applyProps } from '@react-three/fiber';
 
+// credits for the box-projecting shader code go to codercat (https://codercat.tk)
 // and @0beqz https://gist.github.com/0beqz/8d51b4ae16d68021a09fb504af708fca
 
-const worldposReplace =
-/* glsl */
-`
+const worldposReplace = /* glsl */`
 #if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
   vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
   #ifdef BOX_PROJECTED_ENV_MAP
@@ -14,9 +13,7 @@ const worldposReplace =
   #endif
 #endif
 `;
-const boxProjectDefinitions =
-/*glsl */
-`
+const boxProjectDefinitions = /*glsl */`
 #ifdef BOX_PROJECTED_ENV_MAP
   uniform vec3 envMapSize;
   uniform vec3 envMapPosition;
@@ -35,38 +32,35 @@ const boxProjectDefinitions =
     return boxIntersection - cubePos;
   }
 #endif
-`; // will be inserted after "vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );"
+`;
 
-const getIBLIrradiance_patch =
-/* glsl */
-`
+// will be inserted after "vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );"
+const getIBLIrradiance_patch = /* glsl */`
 #ifdef BOX_PROJECTED_ENV_MAP
   worldNormal = parallaxCorrectNormal( worldNormal, envMapSize, envMapPosition );
 #endif
-`; // will be inserted after "reflectVec = inverseTransformDirection( reflectVec, viewMatrix );"
+`;
 
-const getIBLRadiance_patch =
-/* glsl */
-`
+// will be inserted after "reflectVec = inverseTransformDirection( reflectVec, viewMatrix );"
+const getIBLRadiance_patch = /* glsl */`
 #ifdef BOX_PROJECTED_ENV_MAP
   reflectVec = parallaxCorrectNormal( reflectVec, envMapSize, envMapPosition );
 #endif
 `;
-
 function boxProjectedEnvMap(shader, envMapPosition, envMapSize) {
-  shader.defines.BOX_PROJECTED_ENV_MAP = true; // uniforms
-
+  shader.defines.BOX_PROJECTED_ENV_MAP = true;
+  // uniforms
   shader.uniforms.envMapPosition = {
     value: envMapPosition
   };
   shader.uniforms.envMapSize = {
     value: envMapSize
-  }; // vertex shader
-
+  };
+  // vertex shader
   shader.vertexShader = `
   varying vec3 vWorldPosition;
-  ${shader.vertexShader.replace('#include <worldpos_vertex>', worldposReplace)}`; // fragment shader
-
+  ${shader.vertexShader.replace('#include <worldpos_vertex>', worldposReplace)}`;
+  // fragment shader
   shader.fragmentShader = `
     ${boxProjectDefinitions}
     ${shader.fragmentShader.replace('#include <envmap_physical_pars_fragment>', THREE.ShaderChunk.envmap_physical_pars_fragment).replace('vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );', `vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );
@@ -75,7 +69,6 @@ function boxProjectedEnvMap(shader, envMapPosition, envMapSize) {
          ${getIBLRadiance_patch}
         `)}`;
 }
-
 function useBoxProjectedEnv(position = new THREE.Vector3(), size = new THREE.Vector3()) {
   const [config] = React.useState(() => ({
     position: new THREE.Vector3(),

package/core/useCamera.js

@@ -13,7 +13,6 @@ function useCamera(camera, props) {
      * so we have an expect error to mask this
      */
     // @ts-expect-error
-
     if (props) applyProps(raycaster, props, {});
     return function (_, intersects) {
       raycaster.setFromCamera(pointer, camera instanceof Camera ? camera : camera.current);

package/core/useContextBridge.js

@@ -14,8 +14,7 @@ function useContextBridge(...contexts) {
    * done this way in reference to:
    * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
    * https://github.com/microsoft/TypeScript/issues/14729
-   */
-  ), []);
+   */), []);
 }
 
 export { useContextBridge };

package/core/useCubeCamera.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import { Fog, FogExp2 } from 'three';
-export declare type CubeCameraOptions = {
+export type CubeCameraOptions = {
     resolution?: number;
     near?: number;
     far?: number;

package/core/useCubeTexture.d.ts

@@ -1,5 +1,5 @@
 import { CubeTexture } from 'three';
-declare type Options = {
+type Options = {
     path: string;
 };
 export declare function useCubeTexture(files: string[], { path }: Options): CubeTexture;

package/core/useCubeTexture.js

@@ -5,14 +5,15 @@ function useCubeTexture(files, {
   path
 }) {
   // @ts-ignore
-  const [cubeTexture] = useLoader( // @ts-ignore
+  const [cubeTexture] = useLoader(
+  // @ts-ignore
   CubeTextureLoader, [files], loader => loader.setPath(path));
   return cubeTexture;
 }
-
 useCubeTexture.preload = (files, {
   path
-}) => useLoader.preload( // @ts-ignore
+}) => useLoader.preload(
+// @ts-ignore
 CubeTextureLoader, [files], loader => loader.setPath(path));
 
 export { useCubeTexture };

package/core/useEnvironment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js");const s=e=>Array.isArray(e);exports.useEnvironment=function({files:i=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:o="",preset:a,encoding:p,extensions:l}={}){var u,c,d;let b,h=null,g=!1;if(a){if(!(a in t.presetsObj))throw new Error("Preset must be one of: "+Object.keys(t.presetsObj).join(", "));i=t.presetsObj[a],o="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}if(g=s(i),b=s(i)?"cube":i.startsWith("data:application/exr")?"exr":i.startsWith("data:application/hdr")?"hdr":null==(u=i.split(".").pop())||null==(c=u.split("?"))||null==(d=c.shift())?void 0:d.toLowerCase(),h=g?r.CubeTextureLoader:"hdr"===b?n.RGBELoader:"exr"===b?n.EXRLoader:null,!h)throw new Error("useEnvironment: Unrecognized file extension: "+i);const f=e.useLoader(h,g?[i]:i,(e=>{null==e.setPath||e.setPath(o),l&&l(e)})),x=g?f[0]:f;return x.mapping=g?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in x?x.colorSpace=(null!=p?p:g)?"srgb":"srgb-linear":x.encoding=(null!=p?p:g)?3001:3e3,x};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@react-three/fiber"),r=require("three"),n=require("three-stdlib"),t=require("../helpers/environment-assets.cjs.js");const s=e=>Array.isArray(e);exports.useEnvironment=function({files:i=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:o="",preset:a,encoding:p,extensions:l}={}){var u;let c,d=null,b=!1;if(a){if(!(a in t.presetsObj))throw new Error("Preset must be one of: "+Object.keys(t.presetsObj).join(", "));i=t.presetsObj[a],o="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/"}if(b=s(i),c=s(i)?"cube":i.startsWith("data:application/exr")?"exr":i.startsWith("data:application/hdr")?"hdr":null==(u=i.split(".").pop())||null==(u=u.split("?"))||null==(u=u.shift())?void 0:u.toLowerCase(),d=b?r.CubeTextureLoader:"hdr"===c?n.RGBELoader:"exr"===c?n.EXRLoader:null,!d)throw new Error("useEnvironment: Unrecognized file extension: "+i);const h=e.useLoader(d,b?[i]:i,(e=>{null==e.setPath||e.setPath(o),l&&l(e)})),g=b?h[0]:h;return g.mapping=b?r.CubeReflectionMapping:r.EquirectangularReflectionMapping,"colorSpace"in g?g.colorSpace=(null!=p?p:b)?"srgb":"srgb-linear":g.encoding=(null!=p?p:b)?3001:3e3,g};

package/core/useEnvironment.d.ts

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

package/core/useEnvironment.js

@@ -4,9 +4,7 @@ import { RGBELoader, EXRLoader } from 'three-stdlib';
 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);
-
 function useEnvironment({
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
   path = '',
@@ -14,29 +12,29 @@ function useEnvironment({
   encoding = undefined,
   extensions
 } = {}) {
-  var _files$split$pop, _files$split$pop$spli, _files$split$pop$spli2;
-
+  var _files$split$pop;
   let loader = null;
   let isCubeMap = false;
   let extension;
-
   if (preset) {
     if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
     files = presetsObj[preset];
     path = CUBEMAP_ROOT;
-  } // Everything else
-
+  }
 
+  // Everything else
   isCubeMap = isArray(files);
-  extension = isArray(files) ? 'cube' : files.startsWith('data:application/exr') ? 'exr' : files.startsWith('data:application/hdr') ? 'hdr' : (_files$split$pop = files.split('.').pop()) == null ? void 0 : (_files$split$pop$spli = _files$split$pop.split('?')) == null ? void 0 : (_files$split$pop$spli2 = _files$split$pop$spli.shift()) == null ? void 0 : _files$split$pop$spli2.toLowerCase();
+  extension = isArray(files) ? 'cube' : files.startsWith('data:application/exr') ? 'exr' : files.startsWith('data:application/hdr') ? 'hdr' : (_files$split$pop = files.split('.').pop()) == null || (_files$split$pop = _files$split$pop.split('?')) == null || (_files$split$pop = _files$split$pop.shift()) == null ? void 0 : _files$split$pop.toLowerCase();
   loader = isCubeMap ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : null;
   if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files);
-  const loaderResult = useLoader( // @ts-expect-error
+  const loaderResult = useLoader(
+  // @ts-expect-error
   loader, isCubeMap ? [files] : files, loader => {
-    loader.setPath == null ? void 0 : loader.setPath(path);
+    loader.setPath == null || loader.setPath(path);
     if (extensions) extensions(loader);
   });
-  const texture = isCubeMap ? // @ts-ignore
+  const texture = isCubeMap ?
+  // @ts-ignore
   loaderResult[0] : loaderResult;
   texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
   const sRGBEncoding = 3001;

package/core/useFBO.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-declare type FBOSettings = {
+type FBOSettings = {
     samples?: number;
     depth?: boolean;
 } & THREE.WebGLRenderTargetOptions;

package/core/useFBO.js

@@ -4,22 +4,15 @@ import { useThree } from '@react-three/fiber';
 
 // 👇 uncomment when TS version supports function overloads
 // export function useFBO(settings?: FBOSettings)
-function useFBO(
-/** Width in pixels, or settings (will render fullscreen by default) */
-width,
-/** Height in pixels */
-height,
-/**Settings */
+function useFBO( /** Width in pixels, or settings (will render fullscreen by default) */
+width, /** Height in pixels */
+height, /**Settings */
 settings) {
   const size = useThree(state => state.size);
   const viewport = useThree(state => state.viewport);
-
   const _width = typeof width === 'number' ? width : size.width * viewport.dpr;
-
   const _height = typeof height === 'number' ? height : size.height * viewport.dpr;
-
   const _settings = (typeof width === 'number' ? settings : width) || {};
-
   const {
     samples = 0,
     depth,
@@ -32,11 +25,9 @@ settings) {
       type: THREE.HalfFloatType,
       ...targetSettings
     });
-
     if (depth) {
       target.depthTexture = new THREE.DepthTexture(_width, _height, THREE.FloatType);
     }
-
     target.samples = samples;
     return target;
   }, []);

package/core/useFBX.js

@@ -4,9 +4,7 @@ import { useLoader } from '@react-three/fiber';
 function useFBX(path) {
   return useLoader(FBXLoader, path);
 }
-
 useFBX.preload = path => useLoader.preload(FBXLoader, path);
-
 useFBX.clear = input => useLoader.clear(FBXLoader, input);
 
 export { useFBX };

package/core/useFont.d.ts

@@ -1,9 +1,9 @@
-export declare type Glyph = {
+export type Glyph = {
     _cachedOutline: string[];
     ha: number;
     o: string;
 };
-export declare type FontData = {
+export type FontData = {
     boundingBox: {
         yMax: number;
         yMin: number;

package/core/useFont.js

@@ -2,19 +2,15 @@ import { FontLoader } from 'three-stdlib';
 import { suspend, preload, clear } from 'suspend-react';
 
 let fontLoader = null;
-
 async function loader(font) {
   if (!fontLoader) fontLoader = new FontLoader();
   let data = typeof font === 'string' ? await (await fetch(font)).json() : font;
   return fontLoader.parse(data);
 }
-
 function useFont(font) {
   return suspend(loader, [font]);
 }
-
 useFont.preload = font => preload(loader, [font]);
-
 useFont.clear = font => clear([font]);
 
 export { useFont };

package/core/useGLTF.d.ts

@@ -1,5 +1,5 @@
-import { GLTFLoader, GLTF } from 'three-stdlib';
-export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? GLTF[] : GLTF;
+import { GLTFLoader } from 'three-stdlib';
+export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? import("three-stdlib").GLTF[] : import("three-stdlib").GLTF;
 export declare namespace useGLTF {
     var preload: (path: string | string[], useDraco?: string | boolean, useMeshOpt?: boolean, extendLoader?: ((loader: GLTFLoader) => void) | undefined) => undefined;
     var clear: (input: string | string[]) => void;

package/core/useGLTF.js

@@ -4,37 +4,29 @@ import { useLoader } from '@react-three/fiber';
 // @ts-ignore
 let dracoLoader = null;
 let decoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/';
-
 function extensions(useDraco, useMeshopt, extendLoader) {
   return loader => {
     if (extendLoader) {
       extendLoader(loader);
     }
-
     if (useDraco) {
       if (!dracoLoader) {
         dracoLoader = new DRACOLoader();
       }
-
       dracoLoader.setDecoderPath(typeof useDraco === 'string' ? useDraco : decoderPath);
       loader.setDRACOLoader(dracoLoader);
     }
-
     if (useMeshopt) {
       loader.setMeshoptDecoder(typeof MeshoptDecoder === 'function' ? MeshoptDecoder() : MeshoptDecoder);
     }
   };
 }
-
 function useGLTF(path, useDraco = true, useMeshOpt = true, extendLoader) {
   const gltf = useLoader(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
   return gltf;
 }
-
 useGLTF.preload = (path, useDraco = true, useMeshOpt = true, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
-
 useGLTF.clear = input => useLoader.clear(GLTFLoader, input);
-
 useGLTF.setDecoderPath = path => {
   decoderPath = path;
 };

package/core/useHelper.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Object3D } from 'three';
 import { Falsey } from 'utility-types';
-declare type Helper = Object3D & {
+type Helper = Object3D & {
     update: () => void;
     dispose: () => void;
 };
-declare type Constructor = new (...args: any[]) => any;
-declare type Rest<T> = T extends [infer _, ...infer R] ? R : never;
+type Constructor = new (...args: any[]) => any;
+type Rest<T> = T extends [infer _, ...infer R] ? R : never;
 export declare function useHelper<T extends Constructor>(object3D: React.MutableRefObject<Object3D> | Falsey, helperConstructor: T, ...args: Rest<ConstructorParameters<T>>): React.MutableRefObject<Helper | undefined>;
 export {};

package/core/useHelper.js

@@ -6,11 +6,9 @@ function useHelper(object3D, helperConstructor, ...args) {
   const scene = useThree(state => state.scene);
   React.useLayoutEffect(() => {
     let currentHelper = undefined;
-
     if (object3D && object3D != null && object3D.current && helperConstructor) {
       helper.current = currentHelper = new helperConstructor(object3D.current, ...args);
     }
-
     if (currentHelper) {
       // Prevent the helpers from blocking rays
       currentHelper.traverse(child => child.raycast = () => null);
@@ -18,14 +16,13 @@ function useHelper(object3D, helperConstructor, ...args) {
       return () => {
         helper.current = undefined;
         scene.remove(currentHelper);
-        currentHelper.dispose == null ? void 0 : currentHelper.dispose();
+        currentHelper.dispose == null || currentHelper.dispose();
       };
     }
   }, [scene, helperConstructor, object3D, ...args]);
   useFrame(() => {
     var _helper$current;
-
-    return void ((_helper$current = helper.current) == null ? void 0 : _helper$current.update == null ? void 0 : _helper$current.update());
+    return void ((_helper$current = helper.current) == null || _helper$current.update == null ? void 0 : _helper$current.update());
   });
   return helper;
 }

package/core/useIntersect.js

@@ -9,21 +9,18 @@ function useIntersect(onChange) {
   React.useLayoutEffect(() => void (callback.current = onChange), [onChange]);
   React.useEffect(() => {
     const obj = ref.current;
-
     if (obj) {
       // Stamp out frustum check pre-emptively
       const unsub1 = addEffect(() => {
         check.current = false;
         return true;
-      }); // If the object is inside the frustum three will call onRender
-
+      });
+      // If the object is inside the frustum three will call onRender
       const oldOnRender = obj.onBeforeRender;
-
-      obj.onBeforeRender = () => check.current = true; // Compare the check value against the temp value, if it differs set state
-
-
+      obj.onBeforeRender = () => check.current = true;
+      // Compare the check value against the temp value, if it differs set state
       const unsub2 = addAfterEffect(() => {
-        if (check.current !== temp.current) callback.current == null ? void 0 : callback.current(temp.current = check.current);
+        if (check.current !== temp.current) callback.current == null || callback.current(temp.current = check.current);
         return true;
       });
       return () => {

package/core/useKTX2.js

@@ -9,14 +9,14 @@ function useKTX2(input, basisPath = `${cdn}/basis/`) {
   const textures = useLoader(KTX2Loader, IsObject(input) ? Object.values(input) : input, loader => {
     loader.detectSupport(gl);
     loader.setTranscoderPath(basisPath);
-  }); // https://github.com/mrdoob/three.js/issues/22696
-  // Upload the texture to the GPU immediately instead of waiting for the first render
+  });
 
+  // https://github.com/mrdoob/three.js/issues/22696
+  // Upload the texture to the GPU immediately instead of waiting for the first render
   useEffect(() => {
     const array = Array.isArray(textures) ? textures : [textures];
     array.forEach(gl.initTexture);
   }, [gl, textures]);
-
   if (IsObject(input)) {
     const keys = Object.keys(input);
     const keyed = {};
@@ -28,11 +28,9 @@ function useKTX2(input, basisPath = `${cdn}/basis/`) {
     return textures;
   }
 }
-
 useKTX2.preload = (url, basisPath = `${cdn}/basis/`) => useLoader.preload(KTX2Loader, url, loader => {
   loader.setTranscoderPath(basisPath);
 });
-
 useKTX2.clear = input => useLoader.clear(KTX2Loader, input);
 
 export { useKTX2 };

package/core/useMatcapTexture.js

@@ -6,21 +6,16 @@ function getFormatString(format) {
   switch (format) {
     case 64:
       return '-64px';
-
     case 128:
       return '-128px';
-
     case 256:
       return '-256px';
-
     case 512:
       return '-512px';
-
     default:
       return '';
   }
 }
-
 const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
 const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
 function useMatcapTexture(id = 0, format = 1024, onLoad) {
@@ -33,7 +28,6 @@ function useMatcapTexture(id = 0, format = 1024, onLoad) {
     } else if (typeof id === 'number') {
       return matcapList[id];
     }
-
     return null;
   }, [id]);
   const fileName = `${fileHash || DEFAULT_MATCAP}${getFormatString(format)}.png`;

package/core/useNormalTexture.d.ts

@@ -1,5 +1,5 @@
 import { Texture } from 'three';
-declare type Settings = {
+type Settings = {
     repeat?: number[];
     anisotropy?: number;
     offset?: number[];

package/core/useProgress.d.ts

@@ -1,4 +1,4 @@
-declare type Data = {
+type Data = {
     errors: string[];
     active: boolean;
     progress: number;

package/core/useProgress.js

@@ -12,22 +12,18 @@ const useProgress = create(set => {
       progress: (loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded) * 100
     });
   };
-
   DefaultLoadingManager.onLoad = () => {
     set({
       active: false
     });
   };
-
   DefaultLoadingManager.onError = item => set(state => ({
     errors: [...state.errors, item]
   }));
-
   DefaultLoadingManager.onProgress = (item, loaded, total) => {
     if (loaded === total) {
       saveLastTotalLoaded = total;
     }
-
     set({
       active: true,
       item,
@@ -36,7 +32,6 @@ const useProgress = create(set => {
       progress: (loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded) * 100 || 100
     });
   };
-
   return {
     errors: [],
     active: false,

package/core/useTexture.js

@@ -7,15 +7,15 @@ function useTexture(input, onLoad) {
   const gl = useThree(state => state.gl);
   const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input);
   useLayoutEffect(() => {
-    onLoad == null ? void 0 : onLoad(textures);
-  }, [onLoad]); // https://github.com/mrdoob/three.js/issues/22696
-  // Upload the texture to the GPU immediately instead of waiting for the first render
+    onLoad == null || onLoad(textures);
+  }, [onLoad]);
 
+  // https://github.com/mrdoob/three.js/issues/22696
+  // Upload the texture to the GPU immediately instead of waiting for the first render
   useEffect(() => {
     const array = Array.isArray(textures) ? textures : [textures];
     array.forEach(gl.initTexture);
   }, [gl, textures]);
-
   if (IsObject(input)) {
     const keys = Object.keys(input);
     const keyed = {};
@@ -27,9 +27,7 @@ function useTexture(input, onLoad) {
     return textures;
   }
 }
-
 useTexture.preload = url => useLoader.preload(TextureLoader, url);
-
 useTexture.clear = input => useLoader.clear(TextureLoader, input);
 
 export { IsObject, useTexture };

package/core/useTrailTexture.d.ts

@@ -1,5 +1,5 @@
 import { Texture } from 'three';
-declare type TrailConfig = {
+type TrailConfig = {
     size?: number;
     maxAge?: number;
     radius?: number;