Texture from Base64 data render white on object

Questions
1

Hi, I am trying to load base64 data from canvas and assign it to glb object mesh, all worked but the texture shows only white color instead colorful image.

I checked by downloading that image data it shows colorful image that is assigning.
Aslo when I am creating texture from giving direct url saved from downloaded image it shows colors.

here is my sample code

                const image = new Image();
                image.onload = () => {
                    console.log("Image onload fired....");
                    const texture = new THREE.Texture(image);
                    texture.encoding = THREE.sRGBEncoding // added later to check
                    texture.needsUpdate = true; // Indicate that the texture needs to be updated
                    if (callback) {
                        console.log("Texure call back fired...");
                        callback(texture); 
                    }
                };
                image.src = iconData;

Can any one guide what am I missing or have proper way to achieve?

2

Your code looks right… what is in the callback fn?

3

Loading a texture and assigning are both in different function. Creating Texture passed to function that assign texture to 3d model.
I am bit confuse about 3d Model, I am not aware about that designing part. Need to figure it out if design creating problem!

4

Just to throw some debugging into the mix, did you try to view the iconData base64 in a b64 validator? You can paste your b64 string in here to see a visual representation of the image data…

5

As I see, base64 is not compact and large images may not optimally (despite optically) resolve. My project uses centre-weighted voronoi to pre-compress the uint. Will you console.log the image dimensions and chunk buffer?

Deferred accolades,
8Sk Me