Loading external textures onto a fbx model

Questions
,
1

I have downloaded an FBX asset, and just loading its fbx file doesn’t seem to create a texture. However, there were some images that came with the download. How do I force threejs to use those images as textures in an fbxloader? (I have a base color map, height map, metallic map, normal map and roughness map)

2

Can you please check the browser console for HTTP 404 errors?

The loader probably identifies the texture definition and wants to load them from the backend. However, the textures might be located in a wrong directory.

1 Like
3

Since the fbx file has the proper UV coordinates, all you need to do is create a new material in each of the “meshes” of the 3d model, using the textures we have downloaded.

        const baseColorMap = await textureLoader.loadAsync("m134_handheld_m134_BaseColor.png");
        const heightMap = await textureLoader.loadAsync("m134_handheld_m134_Height.png");
        const metallicMap = await textureLoader.loadAsync("m134_handheld_m134_Metallic.png");
        const normalMap = await textureLoader.loadAsync("m134_handheld_m134_Normal.png");
        const roughnessMap = await textureLoader.loadAsync("m134_handheld_m134_Roughness.png");
        const minigunMaterial = new THREE.MeshStandardMaterial({
          map: baseColorMap, 
          displacementMap: heightMap,
          metalnessMap: metallicMap,
          normalMap: normalMap,
          roughnessMap
        });

        for (let child of minigunModel.children) {
          child.material = minigunMaterial;
        };
4

Thanks! I didn’t see any errors… But I have found a fix!