How to load multiple texture into one GLTF object?

Questions
, , ,
1

For context, I have the following JSON for GLTF:

{
    "asset" : {
        "generator" : "Khronos glTF Blender I/O v1.7.33",
        "version" : "2.0"
    },
    "scene" : 0,
    "scenes" : [
        {
            "name" : "Scene",
            "nodes" : [
                0
            ]
        }
    ],
    "nodes" : [
        {
            "mesh" : 0,
            "name" : "pPlatonic1",
            "rotation" : [
                0.7071068286895752,
                0,
                0,
                0.7071067094802856
            ],
            "scale" : [
                0.17861565947532654,
                0.11743072420358658,
                0.11743072420358658
            ],
            "translation" : [
                0,
                0.13854923844337463,
                0
            ]
        }
    ],
    "materials" : [
        {
            "doubleSided" : true,
            "name" : "blinn2.001",
            "normalTexture" : {
                "index" : 0,
                "scale" : 0.699999988079071
            },
            "pbrMetallicRoughness" : {
                "baseColorTexture" : {
                    "index" : 1
                },
                "metallicRoughnessTexture" : {
                    "index" : 2
                }
            }
        }
    ],
    "meshes" : [
        {
            "name" : "Mesh.001",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1,
                        "TEXCOORD_0" : 2
                    },
                    "indices" : 3,
                    "material" : 0
                }
            ]
        }
    ],
    "textures" : [
        {
            "sampler" : 0,
            "source" : 0
        },
        {
            "sampler" : 0,
            "source" : 1
        },
        {
            "sampler" : 0,
            "source" : 2
        }
    ],
    "images" : [
        {
            "mimeType" : "image/jpeg",
            "name" : "color1_normal",
            "uri" : "color1_normal.jpg"
        },
        {
            "mimeType" : "image/jpeg",
            "name" : "base_color",
            "uri" : "base_color.jpg"
        },
        {
            "mimeType" : "image/jpeg",
            "name" : "metallic",
            "uri" : "metallic.jpg"
        }
    ],
    "accessors" : [
        {
            "bufferView" : 0,
            "componentType" : 5126,
            "count" : 2202,
            "max" : [
                0.9936853647232056,
                1.506652593612671,
                1.1891857385635376
            ],
            "min" : [
                -0.9936853647232056,
                -1.506652593612671,
                -2.3883655071258545
            ],
            "type" : "VEC3"
        },
        {
            "bufferView" : 1,
            "componentType" : 5126,
            "count" : 2202,
            "type" : "VEC3"
        },
        {
            "bufferView" : 2,
            "componentType" : 5126,
            "count" : 2202,
            "type" : "VEC2"
        },
        {
            "bufferView" : 3,
            "componentType" : 5123,
            "count" : 12432,
            "type" : "SCALAR"
        }
    ],
    "bufferViews" : [
        {
            "buffer" : 0,
            "byteLength" : 26424,
            "byteOffset" : 0
        },
        {
            "buffer" : 0,
            "byteLength" : 26424,
            "byteOffset" : 26424
        },
        {
            "buffer" : 0,
            "byteLength" : 17616,
            "byteOffset" : 52848
        },
        {
            "buffer" : 0,
            "byteLength" : 24864,
            "byteOffset" : 70464
        }
    ],
    "samplers" : [
        {
            "magFilter" : 9729,
            "minFilter" : 9987
        }
    ],
    "buffers" : [
        {
            "byteLength" : 95328,
            "uri" : "color1.bin"
        }
    ]
}

As you can see, the GLTF JSON loads three images and applies all of them as textures. I’m not familiar with Blender or 3D design in general, but I need to change all three of the textures by an event trigger to a different group of texture files. How do I do it after I loaded the model with GLTFLoader() with TextureLoader() ? Thanks in advance!

2

The gltfLoader output the models already mapped (one material per mesh, try to avoid Blender multi-material multi-textures madness) You can switch them with custom ones when loading is finished. Here is some universal function, it sort the content, should work for most files.

gltfLoader.load( gltfURL, function (gltf) {
	
	const content = gltf.scene;
	
	//get all children inside gltf file
	content.traverse( function ( child ) {
		//get the meshes
		if ( child.isMesh ) {
			// only replace texture if a texture map exist
			if (child.material.map){
			//replace the map with another THREE texture
			child.material.map = myTexture;
			//update
			child.material.map.needsUpdate = true;
			}
		}
	}
}

Then you may add more filters to check names of the meshes/textures
to pinpoint wich textures belong to what models.

3

Can you explain how to load into myTexture if the texture files to change are also separated into three files like the GLTF? For example, color2_normal.jpg, base_color2.jpg, and metallic2.jpg. I could ask a friend to combine the material into one, but I would like to know how to tackle this when I don’t have the freedom to do so.

4

If you need to replace texture normals and add shader features

1.load textures separately inside an array/object
2.load 3D models without texture or use dummy texture (keep the UV tag)
3.create new material inside your gltf traversing like bellow

basic exemple, you obviously may write it in a better way

if ( child.isMesh && child.name == "model01" ) {
	//use customized MeshStandardMaterial for this mesh
	let tempMaterial = new THREE.MeshStandardMaterial({ map: texture[0], normalMap: texture[1] });
	child.material = tempMaterial;
}
5

I think I’ve got it now. Thanks for the help!