Change texture for GLTF sometimes does not work

[steventthreejs]

Hi Three.js Team,

I loaded GLTF model, traverse all the meshes objects and find mesh objects to change their texture. see the code:
const loader = new GLTFLoader().setPath( ‘…/three.js/examples/models/gltf/SH108/’ );
loader.load( ‘SH108_02.glb’, function ( gltf ) {
gltf.scene.traverse( function ( child ) {

							if ( child.isMesh ) {
                                                                
                                                                //console.log(child);
                                                                if (child.name==="SH108_Centered_on_Front")
                                                                {
                                                                 //Load new texture
                                                                 console.log(child); 
                                                                 console.log(child.material.map.image.height);  
                                                                 console.log(child.material.map.image.width);
                                                                 textureLoader.load("12345_2.png",
                                                                 function ( texture ) { 
                                                                 //child.material.map.dispose();    
                                                                 texture.flipY =false;  
                                                                 console.log("Done[Front]!");
                                                                 child.material.map = texture;
                                                                 texture.needsUpdate = true;
                                                                 //child.material.needsUpdate = true; 
                                                                 //child.material.map.needsUpdate = true; 
                                                                 
                                                                 //
                                                                 
                                                                 
                                                                 render();
                                                                 },
                                                                 function ( xhr ) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded[Front]");} ,
                                                                 function ( err ) {console.log("An error happened" + error);}                                                                    
                                                                 );
                                                                }else if (child.name==='SH108_Branding_Area_Cap')
                                                                {
                                                                 console.log(child);  
                                                                 console.log(child.material.map.image.height);  
                                                                 console.log(child.material.map.image.width);
                                                                 
                                                                 textureLoader.load("cap_1.png",
                                                                 function ( texture )
                                                                 { 
                                                                    console.log("Done[cap]!");
                                                                    texture.flipY =false;  
                                                                    //child.material.map.dispose();
                                                                    child.material.map = texture;
                                                                    texture.needsUpdate = true;
                                                                    //child.material.needsUpdate = true; 
                                                                    //child.material.map.needsUpdate = true;
                                                                    
                                                                    // 
                                                                    
                                                                    
                                                                    render();
                                                                 },
                                                                 function ( xhr ) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded[Cap]");} ,
                                                                 function ( err ) {console.log("An error happened" + error);} 
                                                                 ); 
                                                                }
                                                                
                                                                //bindEvent(child);
							}

As you can see, I changed texture for “SH108_Branding_Area_Cap” and “SH108_Centered_on_Front”.
I have two issues:

1. change texture for “SH108_Branding_Area_Cap” sometimes does not show.
   

   

2. changed texture of “SH108_Centered_on_Front” has a white gap.
   

   

please help,

Thanks in advance.

[Lawrence3DPK]

Try putting your texture loader outside/before the gltf loader and make var references to them to be used in the gltf loader? Does the white gap persist if you move closer to the model?

[steventthreejs]

Thanks for suggestion. I will try your idea.
the white gap persists when I move closer to the model.

[Lawrence3DPK]

If you make use of the loading manager you can have both gltf loader and texture loader load all assets and then run your init() function when manager.onload() fires ensuring textures and models are all loaded before anything else happens

[Mugen87]

Consider to rewrite your code like so:

child.material.map = textureLoader.load("12345_2.png");
child.material.map.flipY =false;

You should not manually set needsUpdate to true when loading a texture with TextureLoader.

[steventthreejs]

Thanks for your suggestion.
I tried what you suggested, but it does not work.

[Mugen87]

I forgot to mention that you also have to set the encoding texture property to THREE.sRGBEncoding if you exchange color textures of glTF assets.

[steventthreejs]

Thanks, I will try your suggestion.