Load a lot of different textures for multiple parts of .fbx

Questions
,
1

Hello. I’m trying to display a weapon model. It has 8 different parts that each need their own base color, heightmap, metallic, normal map and roughness map. So in total 40 different textures. How could I optimally load in all of these textures for each of their respective parts?
Here is an example of what I currently have with just applying a normal map to one of the parts of the gun.

    textureLoader.load("./Eclipse_Low_Body1_Normal.jpg", function (texture) {
        console.log("traversing")
        mesh.traverse(function (child){
            console.log("child", child)
            if (child instanceof THREE.Mesh && child.name == "Body1_low") {
                child.material.normalMap = texture
                child.material.baseColor = 
                child.material.needsUpdate = true
            }
        })
    })

As you can see with my current approach it would take 40 separate textureLoader.load() calls.

2

Maybe you can use the following approach to load all textures for a single part.

const [ diffuseMap, normalMap ] = await Promise.all( [
    loader.loadAsync( './Eclipse_Low_Body1_Diffuse.jpg' ),
    loader.loadAsync( './Eclipse_Low_Body1_Normal.jpg' ),
] );

const part = mesh.getObjectByName( 'Body1_low' );
part.material.map = diffuseMap;
part.material.normalMap = normalMap;

Put this code in an async function and create one for each mesh part. This might structure the code a bit better than your current approach.

If you want to load 40 textures, you definitely needs 40 separate load calls.