Textures issue with gltb model and react three js

Hi guys,

I have an issue on my texture applied on a gltb model created with blender. I’m programmatically applying a MeshStandardMaterial to all model nodes with a simple texture. Here a screenshot of my issue:

These arctifact appears only on some meshes of the model. The designer told to me that she use the “decimate modifier” in order to lighten the model… anyone can help me ?

Thank you a lot.

Can you provide te model?
For me that looks like wrong UVs on the mesh (Maybe caused by the decimate modifier).
Also if you provide some code of how you apply the texture someone could help you better!

Greetings Tom

Hi,
Yes of course! Thank you for your answer!

Here the model:

model.glb (5.2 MB)

And here the code:

    useEffect(() => {
        scene.traverse(o => {

            /* if(modelName === "poltrona_alisha.glb" && o.type === "Mesh" && (o.name === "Cylinder" || o.name === "Cylinder004" || o.name === "Cylinder006" || o.name === "Cylinder007")){
                o.material.map = footTexture
            } */
            if (modelName === "poltrona_alisha.glb" && o.type === "Mesh") {

                if (o.name === "Cylinder" || o.name === "Cylinder004" || o.name === "Cylinder006" || o.name === "Cylinder007") {
                    //o.material.map = footTexture
                    o.material = new MeshStandardMaterial({ map: footTexture, side: DoubleSide })
                    console.log(o.scale)
                    /* const originalMeasure = o.scale.x;
                    o.scale.setX(originalMeasure+ (originalMeasure * 0.5) ) */
                }
                else {
                    o.material = new MeshStandardMaterial({ map: texture, side: DoubleSide })
                }
            }
            else if (o.type === "Mesh") {
                console.log("puff mesh", o)
                if (o.name.includes("Cube")) {
                    o.material = new MeshStandardMaterial({ map: footTexture, side: DoubleSide })
                }
                else {
                    o.material = new MeshStandardMaterial({ map: texture, side: DoubleSide })
                }

            }
            if (o.type === "Mesh" && o.name === "cuciture") {
                console.log("object", o)
                o.material = new MeshStandardMaterial({ color: seamColor })
            }
        })
    }, [scene, seamColor, modelName, texture])

Sorry for the bad code, clearly this is not for production, is only a test.

As i thought, the model is not properly UV unwrapped. Without proper UV mapping its hard to get the texture on the model. You should contact your designer to fix that. I think that happened when she used the decimate modifier on it. Or she did not set up the UV beforehand.

Here is the model with a not perfect but better mapping:
model-fix.glb (5.3 MB)

Thank you a lot!

I already contacted the designer and send to her this discussion. You said that your model is not perfect… i don’t see any imperfection :rofl:!!

Be careful there are!! In some parts the texture on the main object does not fit perfectly i just smartUV unwrapped it in Blender.

1 Like

Here is a slightly better version, have fun!!:slight_smile:

model-fix.glb (5.3 MB)

1 Like

Again, thank you very much