Texture has UVs but applies as solid color

Questions
,
1

Hello,

Sorry if this question is duplicated but I’ve been searching online and can’t see to understand whats going on.

After Loading an GLB model I want to replace its original texture to a mesh, problem is that it loads as a solid color; Mesh geometry seems to have the UV values.

What am I doing wrong?

How is the texture being replaced:

loadingManager.onLoad = function () {
            console.log(model);
            let fabricTexture = new THREE.TextureLoader().load('/catalog/fabrics/524843.jpg');
            model.children[2].children[0].material.map= fabricTexture;
          
          
        }

Geometry properties:

image
image755×549 24.2 KB

2

Try this:

loadingManager.onLoad = function () {
            console.log(model);
            let fabricTexture = new THREE.TextureLoader().load('/catalog/fabrics/524843.jpg');
            model.children[2].children[0].material.map= fabricTexture;
            model.children[2].children[0].material.map.needsUpdate=true;          
        }

Can you send screen?

3

@Chaser_Code
Tried with this and same issue:

image
image600×860 27.4 KB

Also got this new messages

image

Any ideas?

4

Repeating texture:

loadingManager.onLoad = function () {
            console.log(model);
            let fabricTexture = new THREE.TextureLoader().load('/catalog/fabrics/524843.jpg');
            fabricTexture .wrapS=fabricTexture.wrapT=THREE.RepeatWrapping;            
            model.children[2].children[0].material.map= fabricTexture;
            model.children[2].children[0].material.map.needsUpdate=true;          
        }
5

@Chaser_Code Thank you for your reply!

Now I can see the texture but it looks like this:

image
image614×618 49 KB

I guess its because isn’t seamless?

here its the original texture file:

texture
texture1200×1200 238 KB

6

Try texture scale:

loadingManager.onLoad = function () {
            console.log(model);
            let fabricTexture = new THREE.TextureLoader().load('/catalog/fabrics/524843.jpg');
            fabricTexture.wrapS=fabricTexture.wrapT=THREE.RepeatWrapping; 
            fabricTexture.repeat.set(0.01,0.01);
            model.children[2].children[0].material.map= fabricTexture;
            model.children[2].children[0].material.map.needsUpdate=true;          
        }
7

@Chaser_Code This made it work like a charm!

Modified the texture scale to fit my model in a better way.

loadingManager.onLoad = function () {
            console.log(model);
            let fabricTexture = new THREE.TextureLoader().load('/catalog/fabrics/524843.jpg');
            fabricTexture.wrapS=fabricTexture.wrapT=THREE.RepeatWrapping; 
            fabricTexture.repeat.set(0.1,0.1);
            model.children[2].children[0].material.map= fabricTexture;
            model.children[2].children[0].material.map.needsUpdate=true;          
        }
1 Like