When i apply image to the canvas it gets rotated and pasted on the mesh in the model

Questions
1

when i apply a texture uploaded using fabric canvas into the model, the texture gets rotated and applied

  1. initial when the model is loaded

    image
    image1254×869 125 KB

  2. after upload of picture and application

image
image1408×839 112 KB

// Set texture parameters
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;


// Apply the texture to the model's material
if (model) {
    // Traverse the model to find the mesh named "heel"
    model.traverse((child) => {
        if (child.isMesh && child.name === 'heel_quarter_side2') {
            child.material.map = texture;
            child.material.needsUpdate = true;
            console.log('Texture applied to the mesh named "heel"');
        }
    });
} else {
    console.log('Model is not loaded yet');
}
2

Try setting texture.flipY to true.

3

yes I tried it and yet its the same result

image
image1195×832 50.8 KB

I also cross checked if the UV mapping is upside down in blender and it isnt.

image
image1455×825 57.9 KB

UV mapping of the mesh

function applyTextureToModel() {
    const canvas1 = canvas.lowerCanvasEl;
    const texture = new THREE.CanvasTexture(canvas1);

    // Set texture parameters
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.flipY = true;
    

    // Apply the texture to the model's material
    if (model) {
        // Traverse the model to find the mesh named "heel"
        model.traverse((child) => {
            if (child.isMesh && child.name === 'heel_quarter_side2') {
                child.material.map = texture;
                child.material.needsUpdate = true;
                console.log('Texture applied to the mesh named "heel"');
            }
        });
    } else {
        console.log('Model is not loaded yet');
    }
}
4

Add needsUpdate afterwards in texture, not in the material:

child.material.map = texture;
child.material.map.flipY = true;
child.material.map.needsUpdate = true;