Texture displays as color-smudge on GLB Model

Questions
1

Hi everyone,

I’m trying to load a texture onto a mesh from a GLB model, but the model just takes on a smudged color that roughly resembles the texture’s color.

Here is an illustration of what I mean:

WhatsApp Image 2023-10-18 at 22.49.23
WhatsApp Image 2023-10-18 at 22.49.23900×1600 80.6 KB

I’m loading the pattern as a texture like this:

const pattern = useLoader(
  TextureLoader,
  '/fabric-textures/pattern.png'
)

I know that this is properly working because I can see that the proper image is loaded in the console and also because the pattern displays correctly on the cube in the bottom (<meshStandardMaterial map={pattern} />).

The model itself, however, reacts very differently:

<mesh
  geometry={nodes.K_Front.geometry}
  material={materials.Hoodie_Body}
  map={pattern}
/>

Looking at the pattern in the console, it looks okay to me and I don’t see what could be changed:

Screenshot 2023-10-19 at 11.28.21
Screenshot 2023-10-19 at 11.28.21786×1226 111 KB

Things I Tried

To fix this, I tried several things:

  • I tried, extensively, to scale and rotate both the scale and the model
  • tried adjusting the .mapping property
  • tried to apply the texture directly to the material
  • tried to set up a separate meshStandardMaterial on the model’s meshes and apply the texture to that
  • tried to apply the texture to a different type of map

All of these things lead me to conclude that the problem lies in the model itself, but I’m not very strong with Blender, so I’m not really sure what would have to be adjusted for this to work properly.

Thanks for your help! I’m thankful for any ideas you might have.

2

Do you use tone Mapping in your renderer? if yes try pattern.toneMapped = false;
Aditionally the light also has influence on the color of the texture.
If it’s possible to provide a codesandbox i can try it myself.

3

Thanks for the suggestion! I tried setting it to false, but it’s still displaying in the same way as before.

4

Hey hey,
did you tried to repeat the texture ? maybe the model has a huge uvMap, so try to set a repated values so you can take some result, but i prefere to do this from blender so you can take a great result

5

Was the texture originally designed for this model?

Most GLB models have a UV mapping that defines how textures will wrap onto it. Any textures used within the GLB were designed for that UV mapping. If you bring in a random texture from somewhere else, it’s unlikely to wrap correctly.

You may want to open the GLB in Blender and find a YouTube tutorial for “UV unwrapping in Blender” – that will be a better way to apply a texture to a model, then you can export it all to a new GLB.