three.jsuv-mapping

Three js texture is not aligned with UV


I am trying to apply texture to exported from blender model with unwraped UV, however the texture is not mapped corretly.

I have exported a UV layot from blender and marked one island in red to check the texture offset

gltfLoader.load('v3.glb',
(file) => {
    bowtie_Mesh = file.scene.children.find((child) =>  child.name === 'bowtie003');
    bowtie_Mesh.material = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('uv 2.png')
    })

    scene.add(bowtie_Mesh)
});

The screenshot of the uv offset


Solution

  • The problem was in flipped Y axis. Adding texture.flipY = false solves the problem

    const uvTex = new THREE.TextureLoader().load('uv 2.png')
    uvTex.encoding = THREE.sRGBEncoding;
    uvTex.flipY = false;
    
    gltfLoader.load('v3.glb',
    (file) => {
        bowtie_Mesh = file.scene.children.find((child) =>  child.name === 'bowtie003');
        bowtie_Mesh.material = new THREE.MeshBasicMaterial({
            map: uvTex
        })
    
        scene.add(bowtie_Mesh)
    });