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
