# Gltf uv map is different than in blender

**URL:** <https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272>\
**Category:** Questions\
**Tags:** textures\
**Created:** [October 25, 2024, 9:36pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272 "2024-10-25T21:36:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![HermesDE](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hermesde/32/53054_2.png) [@HermesDE](https://discourse.threejs.org/u/HermesDE)\
**Post date:** [October 25, 2024, 9:36pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/1 "2024-10-25T21:36:26Z")

</div>

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:

 ![Screenshot 2024-10-25 232449](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/b/7b241f7a4b30789181a23f1d09515a558b5ca10c.jpeg)

But in ThreeJS it looks completely scattered:

 ![Screenshot 2024-10-25 233403](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/ee9215c34753a257a348dcf550c2d25e443f3e45.png)

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

```javascript
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.

---

<div class="post-metadata">

**Author:** ![HermesDE](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hermesde/32/53054_2.png) [@HermesDE](https://discourse.threejs.org/u/HermesDE)\
**Post date:** [October 25, 2024, 9:38pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/2 "2024-10-25T21:38:34Z")

</div>

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

 ![2cdfd96589c865cf37309c53a1689b0a_component1_texture1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/7/87e39da5e25bb1f92bfd1b92829de9fa69659aab.jpeg)  
[weapon\_snip\_awp.glb](https://discourse.threejs.org/uploads/short-url/zhlL4rcqzF5Du7NSVzkGpWtZet3.glb) (3.9 MB)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 25, 2024, 10:10pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/3 "2024-10-25T22:10:49Z")

</div>

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…

```javascript
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.

---

<div class="post-metadata">

**Author:** ![HermesDE](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hermesde/32/53054_2.png) [@HermesDE](https://discourse.threejs.org/u/HermesDE)\
**Post date:** [October 26, 2024, 10:24am UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/4 "2024-10-26T10:24:36Z")

</div>

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](https://3d.cs.money/#build_b10a02e31d93f65bbb03f69f3ba71e5d)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 26, 2024, 10:25pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/5 "2024-10-26T22:25:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HermesDE](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hermesde/32/53054_2.png) [@HermesDE](https://discourse.threejs.org/u/HermesDE)\
**Post date:** [October 27, 2024, 4:38pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/6 "2024-10-27T16:38:54Z")

</div>

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

 ![Screenshot 2024-10-27 173429](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/b/0b5dedceda6377676d0249f1b65bd5e4a73a0db9.png)  
 ![Screenshot 2024-10-27 173521](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/6/9699c2454bcdb60beb6f89dc4c667ddcab53f221.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [October 27, 2024, 5:01pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/7 "2024-10-27T17:01:51Z")

</div>

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

 ![CleanShot 2024-10-27 at 12.59.59@2x](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/3/f30de9503c90b4782fb2607c8391a6dec956160d.png)

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

 ![CleanShot 2024-10-27 at 12.58.53@2x](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/7/37ccb165687dfd03f72f6507579f369c41b1612d.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![HermesDE](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hermesde/32/53054_2.png) [@HermesDE](https://discourse.threejs.org/u/HermesDE)\
**Post date:** [October 27, 2024, 5:15pm UTC](https://discourse.threejs.org/t/gltf-uv-map-is-different-than-in-blender/73272/8 "2024-10-27T17:15:05Z")

</div>

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. 😄