Problem to load wood texture in GLB Model

Questions
,
1

Hello,

I am trying to load a texture from a png but when it loads it has no detail it is just color.

var loader = new THREE.GLTFLoader(manager);
loader.load(MODEL_PATH,
function (gltf) {
theModel = gltf.scene;
let txt = new THREE.TextureLoader().load(“textura/madera.png”);
var new_mtl = new THREE.MeshBasicMaterial( { map: txt } );
gltf.scene.traverse( function( object ) {

if ( object.isMesh ) object.material.map = txt;

} );
scene.add(theModel)

}

, undefined, function (error) {
console.error(error);
});
}

The png texture:

madera
madera1600×1172 854 KB

The Result

Captura
Captura726×467 10.9 KB

2

Hey,

can you provide the model? Does it has UV-coordinates for mapping the texture and have they been exported?

3

Here the model.

badeja.glb (997.6 KB)

4

the model does not contain uv information. Thats why there will be no texture mapping.

If you created that model please check if you exported its UV-coordinates.

If you just got it from somewhere I suggest you inspect the model within Blender or other 3D software (C4D will not work beause you cannot open .glb files) to apply decent uv-information since this is often problematic to do by code. It is easier with uv-editing tools.

A quick hack would be deleting the wood plate from the model and replace it with an THREE.BoxGeometry. Generated primitives come with proper uv coordinates.

by the way… your model file looks like this, which is bit different than in your screenshot:

grafik
grafik1173×533 47.3 KB

and by another way: your texture is pretty big for this use case. Which is ok… but maybe you can go with a smaller area of the whole image depending on how much will go on in your scene.

5

Sorry but i ´m new with blender and threejs.

We created that model when export from blender I mark UV.

Captura
Captura266×629 36.9 KB

6

Yes, export them.

BUT does your model actually have uvs to be exported?
If not you should have a look at Blenders documentation on how to apply uv information or how to keep them alive while editing your geometries :slight_smile:

7

Ok, i try now have this:

Captura.PNG
Captura.PNG1586×1016 187 KB

thanks.

8

looks like the right direction.
I would just fit this wooden plane into the uv coordinates from 0 to 1 in both directions. And then in THREE.JS work with map.repeat.x and map.repeat.y to handle the mapping depending on the size you want your texture to appear. When using map.repeat you should add something like this

map.wrapS = map.wrapT = THREE.MirrorRepeatWrapping
9

it looks better

Captura

now I’m going to see if I put the metal sides.

Thanks.