Loading multiple textures with useTexture

[Code47X]

I'm using the useTexture hook to load in a collection of textures. Currently I've been loading each texture individually like so, which seems to work fine:

const MetalicCube = () => {
  const colorMap = useTexture('/Textures/Metal007_2K_Color.jpg');
  const normalMap = useTexture('/Textures/Metal007_2K_Normal.jpg');
  const metalnessMap = useTexture('/Textures/Metal007_2K_Metalness.jpg');
  const roughnessMap = useTexture('Textures/Metal007_2K_Roughness.jpg');
  const displacementMap = useTexture('Textures/Metal007_2K_Displacement.jpg');

  return (<div />)
}

I've checked out the useTexture examples, and TypeScript shows it can return an array of textures, but I'm not quite following the syntax. It seems like useTexture will only accept a single string as an argument. TS won't accept an array of strings as an argument. I've tried pointing it to the folder containing the textures, but no luck.

From Example:
const [texture1, texture2] = useTexture([texture1, texture2])

Just trying to figure out if there is a better way to load all the textures, or if using useTexture individually for each is the correct way. Thanks.

[drcmda]

yes it should work like that. useLoader does for sure. could you look into it and fix it? maybe the types are off.

[Code47X]

Checked it out, and I believe the typing is slightly off. It looks like the conditional type would always evaluate to string. I can throw up a quick PR. This fix worked fine for me.

Current:
useTexture(url: string extends any[] ? string[] : string): Texture | Texture[];

Fixed for me:
useTexture<T extends string | string[]>(url: T): Texture | Texture[];

[joshuaellis]

@drcmda when using useLoader I get the following error:

Type 'Texture' must have a '[Symbol.iterator]()' method that returns an iterator.

For this code:

 const [matcap1, matcap2] = useLoader(TextureLoader, ['matcap-1.png', 'matcap-2.png'])

Using @Code47X's TS example in useTexture get's the same error.

[Code47X]

@joshuaellis Not sure if this helps you at all, but when I was messing with source code for useTexture I had to pass in a generic useLoader<Texture[]>(TextureLoader, [t1.png, t2.png]) in order to make it work with multiple textures.

[joshuaellis]

Kind of helps me, I was under the impression the Types were implied through the generics, hopefully @drcmda can offer some insight.

[Code47X]

I was also under the assumption that the types were implied initially. Checking out the source, it seems the return type and the input type check if the generic extends an array. It looks like when useLoader is called without a generic it defaults to a non-array input and LoaderResult. Is it designed this way on purpose, or is this a bug?

export function useLoader<T>(
  Proto: new () => LoaderResult<T>,
  input: T extends any[] ? string[] : string,
  extensions?: Extensions,
  onProgress?: (event: ProgressEvent<EventTarget>) => void
): T

type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>

[joshuaellis]

The solution will be:

export function useTexture<T extends string | string[]>(url: T): T extends any[] ? Texture[] : Texture {
  return useLoader(TextureLoader, url)
}

assuming pmndrs/react-three-fiber#917 is approved. Could change depending on that PR.

[Code47X]

@joshuaellis I saw your pr (pmndrs/react-three-fiber#930) to fix useLoader was merged in. Nice work, I learned a lot about conditional return types and function signatures just reading through it.

Are you planning on fixing the typing for the useTexture hook yourself, or would you like me to make a pr?

[joshuaellis]

@Code47X thank you, but I must honest, it was @stephencorwin who really came up with the plan with the conditionals & your suggestion too for handling the string correctly, I just put the two together.

I hope to finish #223 this evening, so keep an eye out for the issue being closed, I think the PR is nearly there tbh.

[joshuaellis]

fixed in #231