Can we change GLB texture map at runtime?

Hello guys, is it possible we can change texture map of GLB model at run time like normal map, roughness map without importing any image and one thing more if I run my GLB model with below code

gltf.scene.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                //console.log(gltf.scene.children[0].children);
                console.log(child.material);
                //console.log(child.material.normalMap)
                if (child.material.normalMap){
                    console.log('Normal map exist');
                }
                if(child.material.alphaMap){
                    console.log('Alpha map exist');
                }
                if(child.material.aoMap){
                    console.log('AO map exist');  
                }
                if(child.material.bumpMap){
                    console.log('Bump map exist');
                }
                if(child.material.emissiveMap){
                    console.log('Emissive map exist');
                }
                if(child.material.roughnessMap){
                    console.log('Roughness map exist');
                }
                if(child.material.metalnessMap){
                    console.log('Metalness map exist');
                }
                else{
                    console.log('normal map not');
                }

                //console.log(child.material.type);
            }
        })

It returns me following output

and can we use UUID of texture maps in textureLoader or something like that?
Like in below image all texture maps have different UUID’s

https://threejs.org/examples/webgl_materials_channels.html

Like above example but I didn’t find any source code for that I just need that for reference purpose only. Please guide me or any reference. @donmccurdy @Mugen87 @seanwasere . Thanks for your time.

console.log the map property
MeshStandardMaterial#map – three.js docs (threejs.org)

i.e.,

if(child.material.map){
    console.log('is this is what you are looking for?');
}
1 Like

But how i pass normal map or roughness map to this, I am not loading externally. @seanwasere

You can put the normal map or roughness map just like put map.

This may help to you texture loader

1 Like

I don’t have PNG images or JPG, I just need if I load GLB model how can I access that normal map or roughness map of GLB so I change dynamically. @aswwwcom

Oh I miss understand the topic.

        const image = child.material.map.image;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.height = image.height;
        canvas.width = image.width;
        if (ctx) ctx.drawImage(image, 0, 0);
        console.log(canvas.toDataURL());

I can access with this. I think normal map or roughness map can show like this

1 Like

After running your code snippet it gives this result -

what does it mean? @aswwwcom

If you have a suitable texture already in memory, you should be able to just replace it.

Example below, creates a blue texture 128x128 and when the glb is loaded, it replaces the existing materials map for each child it finds when traversing.

const canvas = document.createElement('canvas')
canvas.width = 128
canvas.height = 128
const context = canvas.getContext('2d')
context.fillStyle = '#0000ff'
context.fillRect(0, 0, 128, 128)

const texture = new THREE.CanvasTexture(canvas)

const loader = new GLTFLoader()
loader.load(
    "./your-model.glb",
    function (glTF) {
        glTF.scene.traverse(function (child) {
            if (child.isMesh) {
                child.material.map = texture
            }
        })
        scene.add(glTF.scene)
    }
)

that is base64 string of image
you can use base64 viewer to look that string to image.

1 Like

That’s the point I don’t want to create new texture, just suppose I have your-model.glb in that model I have 2 texture maps normal map, roughness map with that I have created dat.gui drop down in which I have two options normalMap and roughnessMap by clicking drop down button I want my GLB texture map will change. That’s my query @seanwasere @aswwwcom

like in GLB model there are 36 textures images how I differentiate with this? @aswwwcom

have you tried just changing the existing texture with the texture that you want?

1 Like

After load you need to add point for access to mesh, material. Raw code:

var mesh=[];
gltf.scene.traverse(function (child) {
if (child instanceof THREE.Mesh) {
mesh[child.name]=object;
}
}
mesh["car"].material.map=mesh["car"].material.roughnessMap;
mesh["car"].material.map.needsUpdate=true;
1 Like

Maby you have to make imageBitmap list or dictionary.

I can’t steel under stand the qurey.

Is this example may help? example

1 Like

I didn’t find anything how I can access GLB texture maps it returns me only UUID of every map…

That’s what I need but see line no. 133 it loads PNG texture maps externally this is main issue. I want to change texture maps which are used in GLB model… @aswwwcom

in your original post, you console logged the child.material. This shows it is a meshstandardmaterial, so you have all the properties of it, and you can edit them using code. And the texture, is the map property. You can just swap it with another texture, if you have a suitable texture to replace it with

1 Like

how I can swap with TextureLoader()? or something else?
@seanwasere

Then I think

mesh.material.map = mesh.material.normalMap
mesh.material.needsUpdate = true;

how about this

1 Like

what is the object in this case? @Chaser_Code