Gltf uv map is different than in blender

[HermesDE]

Hello, i am a newby to 3d modeling. I want to render a weapon model with a texture (skin).
When I load the gbl in Blender and apply the texture as material the skin looks like it should:

But in ThreeJS it looks completely scattered:

Here is the code where i load the model and texture. I am using the react library. I hope that is not a problem:

function Model() {
  // Lade GLB-Modell und Textur separat
  const gltf = useLoader(GLTFLoader, "/models/weapon_snip_awp.glb");
  const colorMap = useLoader(
    TextureLoader,
    "/models/2cdfd96589c865cf37309c53a1689b0a_component1_texture1.png"
  );

  // Textur Einstellungen
  colorMap.wrapS = RepeatWrapping; // Wiederholung in X-Richtung
  colorMap.wrapT = RepeatWrapping; // Wiederholung in Y-Richtung
  colorMap.flipY = false; // Textur nicht spiegeln

  // Weise die Textur den Materialien im Modell zu und setze das Material auf DoubleSide
  gltf.scene.traverse((child) => {
    if (child.name === "model") {
      child.material.map = colorMap;
      child.material.needsUpdate = true;
    }
  });

  return <primitive object={gltf.scene} position={[0, 1, 0]} />;
}

I tried different settings and looked through all the threads where people had the same problem but I did not find a solution. Hope someone can help me.

[HermesDE]

Here is the texture and the glb if someone needs that.

weapon_snip_awp.glb (3.9 MB)

[donmccurdy]

The model has multiple meshes with multiple sets of UVs. You’ll need to choose which the texture is supposed to use, e.g. with texture.channel = 0 or texture.channel = 1. Or you can apply the texture in Blender with a Principled BSDF material, set it up as you want, and then export it all together.

I would also recommend setting…

colorMap.colorSpace = THREE.SRGBColorSpace;

… for color maps (but not data maps like normal maps). GLTFLoader will do this automatically if the texture is in the .glb or .gltf file.

[HermesDE]

Changing the texture channel and after that removing the unnecessary uv maps so that only one is present did not work. It still looks the same in ThreeJS.

This is how it should look like. I grabbed the glb and texture from there:
https://3d.cs.money/#build_b10a02e31d93f65bbb03f69f3ba71e5d

[donmccurdy]

How did you get it looking correct in Blender? I’m not finding that easy to do, it’s not clear that either of these UV sets matches the texture. If you have it working in Blender, then I would recommend exporting the working GLB from Blender.

[HermesDE]

It works in Blender without any problem. Just used the texture.png as material and it works out of the box.

I cant export each skin from Blender because there are thousands. It needs to work in ThreeJS
I also tested BabylonJS and its the same issue.

[donmccurdy]

Hm, I think I see the problem. There are two copies of the gun in this file, and they have different UV maps:

The “legacy” mesh appears to have the correct UV map for this texture; the other mesh does not:

I’m not sure why the models are created this way, or whether that’s intentional, but I guess you’ll probably want to remove or hide the unwanted versions.

[HermesDE]

Oh, I also just tested it with another .glb file which worked out of the box, because it doesnt have two different versions.
Yesterday I tested the texture on the “model” model directly. Should have used the “legacy” model but I didnt think that something legacy would work
Anyways, thank you for your support.