Wrong UV unwrap -decal -textures load flip(Photos are loaded upside down)

Hi
I load images on 3d models layers by decal .But in some layers it appears flip.
Can you help me what is reason ? in my code or 3d model.

check this video please:


and this is my code :slight_smile:

async function addNewDecal(decalMaterial, imageFile, normalTextureURL, id) {

        const newMesh = activeMeshRef.current
        newMesh.geometry.computeBoundingBox();
        var boundingBox = newMesh.geometry.boundingBox;
        var position = new THREE.Vector3();
        position.subVectors(boundingBox.max, boundingBox.min);
        position.multiplyScalar(0.5);
        position.add(boundingBox.min);
        position.applyMatrix4(newMesh.matrixWorld);
        const meshSize = getMeshSize(newMesh);
        let newDecal = new DecalGeometry(activeMeshRef.current, position, new THREE.Euler(0, 0, 0), meshSize);
        newDecal.name = id
        console.log('new decal>>',newDecal)
        selectedDecalID.current = id
        const decalMesh = new THREE.Mesh(newDecal, decalMaterial);
        decalMesh.name = id
        scene.current.add(decalMesh);
            })
        
    }
function imageTextureManager(file, normalTextureURL, id) {
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load(file)
        texture.encoding = THREE.sRGBEncoding;
        const normalTexture = textureLoader.load(normalTextureURL);
        normalTexture.wrapS = THREE.RepeatWrapping;
        normalTexture.wrapT = THREE.RepeatWrapping;
        normalTexture.repeat.set(5, 5);
        const decalMaterial = new THREE.MeshStandardMaterial(
            {
                normalMap: normalTexture,
                normalScale: new THREE.Vector2(0.3, 0.3),
                map: texture,
                transparent: true,
                depthTest: true,
                depthWrite: false,
                polygonOffset: true,
                polygonOffsetUnits: 1,
                polygonOffsetFactor: -4,
            });

        decalMaterial.map.encoding = THREE.sRGBEncoding;
        decalMaterial.needsUpdate = true;

        addNewDecal(decalMaterial, file, normalTextureURL, id)
        tick()

    }

and this is 3d models that I am working with>>

5.glb (2.7 MB)
4.glb (2.7 MB)
2.glb (2.7 MB)

I understood one thing.
When we load texture on geometry in other sides should be like a mirror.
I tested plane geometry and decal geometry.They are the same.The texture should appear flip in other parts but it appears on one side and the other sides look right


I think the geometry’s position or uv attributes are mirrored on the back face of the hoodie’s model, you can check/correct that with blender or other softwares.

Not ideal, but as a quick fix you can try to flip the texture on the x axis:

normalTexture.repeat.set(-5, 5);

use a threejs texture property called “flipY”. Default is true, so it to false

Hi, Parisa. I can see your problem. Its possible to fix it in code. But it would be just a hack which can work for this case (few parts of the model have a right texture map).
The right way to do this unwrapping it correctly. Download Blender software, Load your 3d model, go to UV unwrap, select all the faces on back side of the mesh. Hit S+X+ (-1). Repeat the same for all improper mesh in your model. and then export. It will work.

so . It is not stable .
My program load different 3d models from server .

glb2-5.glb (2.7 MB)

can you check this?
what is Sleeve problems that appear image double