From eb4475934c2df4dc7972057ca44ac885f681b321 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Wed, 13 Nov 2024 10:08:14 +0100 Subject: [PATCH] simplified types --- src/core/Texture.tsx | 47 +++++++++++++++++++++----------------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/src/core/Texture.tsx b/src/core/Texture.tsx index e36c2b747..4affbe7ad 100644 --- a/src/core/Texture.tsx +++ b/src/core/Texture.tsx @@ -4,24 +4,23 @@ import { Texture as _Texture, TextureLoader } from 'three' import { useLoader, useThree } from '@react-three/fiber' import { useEffect, useLayoutEffect, useMemo } from 'react' +type Composite = T | T[] | Record + +type Input = Composite +type Output = Composite<_Texture> + +// @deprecated: no more used export const IsObject = (url: unknown): url is Record => url === Object(url) && !Array.isArray(url) && typeof url !== 'function' -type TextureArray = T extends string[] ? _Texture[] : never -type TextureRecord = T extends Record ? { [key in keyof T]: _Texture } : never -type SingleTexture = T extends string ? _Texture : never +// @deprecated: use ReturnType instead +export type MappedTextureType = Output +export function useTexture(input: Input, onLoad?: (texture: Output) => void) { + const gl = useThree((state) => state.gl) -export type MappedTextureType> = - | TextureArray - | TextureRecord - | SingleTexture + const strOrArr = Array.isArray(input) || typeof input === 'string' -export function useTexture>( - input: Url, - onLoad?: (texture: MappedTextureType) => void -): MappedTextureType { - const gl = useThree((state) => state.gl) - const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input) + const textures = useLoader(TextureLoader, strOrArr ? input : Object.values(input)) // https://github.com/mrdoob/three.js/issues/22696 // Upload the texture to the GPU immediately instead of waiting for the first render @@ -29,31 +28,29 @@ export function useTexture { if ('initTexture' in gl) { if (Array.isArray(textures)) { - for (const texture of textures) { - gl.initTexture(texture) - } + for (const texture of textures) gl.initTexture(texture) } else { gl.initTexture(textures) } } }, [gl, textures]) - const mappedTextures = useMemo(() => { - if (IsObject(input)) { - const keyed = {} as MappedTextureType + const compositeTextures = useMemo(() => { + if (strOrArr) { + return textures + } else { + const keyed = {} as Record // remap the `textures` to their `input` keys let i = 0 for (const key in input) keyed[key] = textures[i++] return keyed - } else { - return textures as MappedTextureType } - }, [input, textures]) + }, [input, strOrArr, textures]) useLayoutEffect(() => { - onLoad?.(mappedTextures) - }, [mappedTextures, onLoad]) + onLoad?.(compositeTextures) + }, [compositeTextures, onLoad]) - return mappedTextures + return compositeTextures } useTexture.preload = (url: string | string[]) => useLoader.preload(TextureLoader, url)