Gltf color and texture map applying both at same time

i have locally prepared a screen with tshirt gltf modal. clicking upon html button i replace modal material color, i laso place a cartoon image over the chest of object through textureloader and mapping on child.
there is a problem when i click upon button and change color of sobject, it some how affects the cartoon image color tones. following are the images of different colors placement on gltf.


following is the code which i use to load gltf and click on button to replace its color.

const texture = new THREE.TextureLoader().load( './t-shirt.002.png', function(value){
                value.flipY = false;
                value.encoding = THREE.sRGBEncoding;

            new GLTFLoader().load('./tshirt1.gltf', function(gltf){
                gltf.scene.traverse(function (child) {                    
                    if (child.isMesh) {
               = texture;
               = false;
                obj = gltf.scene.children[0];;



$('.color li button').on('click', function(){
            const color = $(this).data('background');
            obj.traverse(function (node) {                
                if (node.isMesh) {

kindly advice how can I fix this issue? my requirement is replacing color of gltf it does not affect on chest sticker.


Maybe into blender crop sticker and make it like individual mesh. You will have 2 meshes cloth and sticker. Cloth will be with hole to prevent z-fighting of pixels

Image is uv map prepared through blender shading

color of gltf is replaced node.material.color.set(parseInt(‘0x’+color)); (whatever the hex value button gives)…

what i understood by your reply is i need to move sticker a bit z forwad in order to overlap?

Sticker must be separated mesh;

1 Like

i need to check with such example which give a shape of cloth wrinkles and sticker must be separated…

hay thanks for your efforts and response… always thankful to you.

1 Like

The default three.js materials (like THREE.MeshStandardMaterial) use the material base color and base color texture by multiplying them together, which is why you’re seeing the result you originally were here. A separate mesh, or a decal, both seem like good solutions.

1 Like

let me try it :slight_smile:

What I did to achive the result. i’ve placed two gltf objects. one texture is tShirt cloth colors and second contain sticker (transparent: true). my button action only apply on first tshirt which only change its color.
i know it sound beginer, but as soon i got a grip i’ll use other methods.

Thanks for your response and help