Gltf color and texture map applying both at same time

Questions
, ,
1

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.

color-tshirt-cartoon

color-tshirts
color-tshirts1147×929 56.6 KB

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;
            });
            console.log(texture);

            new GLTFLoader().load('./tshirt1.gltf', function(gltf){
                gltf.scene.traverse(function (child) {                    
                    if (child.isMesh) {
                        //child.material.color.set(0xffffff);
                        child.material.map = texture;
                        child.material.map.needsUpdate = false;
                    }
                });
                obj = gltf.scene.children[0];;
                gltf.scene.position.set(0,0,0);                
                scene.add(gltf.scene);

                render();
            });

and

$('.color li button').on('click', function(){
            const color = $(this).data('background');
            obj.traverse(function (node) {                
                if (node.isMesh) {
                    node.material.color.set(parseInt('0x'+color));
                }
            });
            obj.updateMatrix();
        });

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

Thanks

2

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

3

Image is uv map prepared through blender shading

image
image1920×1080 148 KB

image
image1920×1080 468 KB

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?

4

Sticker must be separated mesh;

image
image1538×363 87.9 KB

1 Like
5

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
6

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
7

let me try it :slight_smile:

8

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