# How to load multiple texture into one GLTF object?

**URL:** <https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075>\
**Category:** Questions\
**Tags:** texture-loader, gltf-loader, textures, gltf\
**Created:** [July 7, 2022, 10:50am UTC](https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075 "2022-07-07T10:50:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevin\_s](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kevin_s/32/27836_2.png) [@kevin\_s](https://discourse.threejs.org/u/kevin_s)\
**Post date:** [July 7, 2022, 10:50am UTC](https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075/1 "2022-07-07T10:50:35Z")

</div>

For context, I have the following JSON for GLTF:

```javascript
{
    "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!

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [July 7, 2022, 11:17am UTC](https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075/2 "2022-07-07T11:17:41Z")

</div>

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.

```javascript
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.

---

<div class="post-metadata">

**Author:** ![kevin\_s](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kevin_s/32/27836_2.png) [@kevin\_s](https://discourse.threejs.org/u/kevin_s)\
**Post date:** [July 8, 2022, 2:20am UTC](https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075/3 "2022-07-08T02:20:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [July 8, 2022, 10:32am UTC](https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075/4 "2022-07-08T10:32:19Z")

</div>

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

```javascript
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;
}

```

---

<div class="post-metadata">

**Author:** ![kevin\_s](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kevin_s/32/27836_2.png) [@kevin\_s](https://discourse.threejs.org/u/kevin_s)\
**Post date:** [July 11, 2022, 4:12am UTC](https://discourse.threejs.org/t/how-to-load-multiple-texture-into-one-gltf-object/40075/5 "2022-07-11T04:12:29Z")

</div>

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