[SOLVED] How to apply a texture to an imported GLTF model in three.js?

How to apply a texture to an imported GLTF model in three.js?

I am currently trying to map a texture in three.js on a imported GLTF model. I tried the texture on a cube and the result is what I want, but when I try to apply the same texture to the imported model, the texture doesn't seem to apply and there is only a change in color without any of the texture's details : picture .You can see on this picture that at the bottom, the cube has more details than the vest.

Here is the code for the cube :

const textureLoader = new THREE.TextureLoader();
const tilesBaseColor = textureLoader.load('Fabric_Knitted_006_basecolor.jpg');
const plane2 = new THREE.Mesh(new THREE.BoxGeometry(3,3,3),
new THREE.MeshStandardMaterial(
  {
    map: tilesBaseColor,
  }
));
plane2.position.y = 3;
plane2.rotation.x = 0;
scene.add(plane2);

Here is the code for the vest :

const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.flipY = false;
const gltfLoader = new GLTFLoader();
gltfLoader.load('prom_suit/scene.gltf', (gltf) => {
  gltf.scene.scale.set(0.1*gltf.scene.scale.x, 0.1*gltf.scene.scale.y,0.1*gltf.scene.scale.z);
  const model = gltf.scene;
  const mesh = gltf.scene.getObjectByName('Object_212');
  mesh.material.map = newTexture2;
  mesh.material.needsUpdate = true;
  scene.add(model);

Thanks in advance

The code for the vest does make a change, since the color turns into the color of the texture, but the details don't seem to apply.

Solution

The cube has a simple UV mapping. Texture can be applied correctly. However, GLTF model have a more complex UV mapping.

UV source: https://threejs.org/examples/?q=uv#misc_uv_tests

You can try to adjust the scale,

const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.wrapS = texture.wrapT = THREE.RepeatWrapping
newTexture2.repeat.set(20, 20);

I strongly recommend to use Blender for handling the gltf model, instead of using three js function, eg. shader material etc.