Mesh becomes white on applying texture

Questions
, , ,
1

I am working on 3D configurator that allows user to change color, add texture(country flags in our case) to meshes and apply text on the 3D model. However, I have encountered a problem that is hindering the process. When I apply color to a mesh and then add a texture to it, the texture gets loaded but the mesh color changes to white. I have set the materials transparency to true but its not working.

Screenshot 2024-04-23 013649
Screenshot 2024-04-23 013649469Ɨ518 44.4 KB

The red color here was applied to the whole mesh but after loading the flag, the mesh becomes white. Help me fix this bug please.

2

Curious about this part - why would you need transparency?

Itā€™s a bit hard to help without seeing the code, Iā€™d assume youā€™re overriding the color material accidentally.

4

const loadFlag = async (src) => {

var obj = glove.getObjectByName(selectedPart);
loadedTexture = await createTextureFromImage(src);
obj.material = new THREE.MeshBasicMaterial({ map: loadedTexture, transparent: true, roughness: 2, side: THREE.DoubleSide});

}

//var rotFactor=0;
const createTextureFromImage = async (imageUrl) => {
return new Promise((resolve, reject) => {
const canvas = document.createElement(ā€˜canvasā€™);
const texture = new THREE.CanvasTexture(canvas);

    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.NearestMipMapNearestFilter;
    texture.mapping = THREE.EquirectangularReflectionMapping;
    texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
    texture.flipY = false;
    texture.colorSpace = THREE.SRGBColorSpace;
  

    new THREE.ImageLoader().load(imageUrl, image => {
        const ctx = canvas.getContext('2d');
        //console.log(canvas.width, canvas.height)
        canvas.width = image.width;
        canvas.height = image.height;
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var ratio = 1;
        if(image.height < image.width){
            ratio = 4;
        }
        if(selectedPart === 'p5'){
            ctx.drawImage(
                image,
                image.width/8 + moveHorizontalFactor,
                image.height/2 + moveVerticalFactor,
                image.width * scaleFactor,
                image.height * scaleFactor / ratio
                // scale factor = 0 to 1
            );
            //texture.rotation = 1.571;
        }
        else{
            ctx.drawImage(
                image,
                moveHorizontalFactor,
                moveVerticalFactor,
                canvas.width * scaleFactor,
                canvas.height * scaleFactor 
                // scale factor = 0 to 1
            );
        }

     texture.needsUpdate = true;
        //console.log(texture)
        resolve(texture);
    }, undefined, reject);
});

};

Here is the code, if i donā€™t set the transparency to true, the mesh becomes black maybe because im using canvas texture to map the flag

5

Hey buddy! Thanks for sharing the code. I guess you are missing the alphaMap for this generated texture. Also, check if you are not replacing the color with a default color when you set the texture. You need both texture map and color in this case.

You can also get the selected color and paint the textured background in a hidden canvas and use context.globalCompositeOperation = ā€œdestination-overā€; This way you donā€™t need to deal with transparency.

I hope it helps :wink:

1 Like