Multiple UVs Material for one single mesh. Is it somehow possible?

Hello everyone :-).

I’m trying to apply different UV mapping to a single mesh for their normals and colors.

Let’s say normal map for optimizing and making it easier to design, I prefer to use one UV map arrange. But for the color map I prefer to use another UV map arrange.

It’s possible in Blender, but on Three.JS I’ve found no clue on how to do it.

For example this basketball mesh:

It’s better to design the color mapping in a flat way (upper UV arrange), so it’s easier for someone to draw a design on the Basketball. But to apply normals, roughness, metalness, etc. I find it more convenience to do it as the bottom UV arrange.

How could I tell on Three.JS that the normal/colr/roughness/etc map should use one UV map or the other.

1 Like

The only two textures that use a second set of UVs are .aoMap and .lightMap. If you want to use the default Three.js behavior, you’d have to stick to the same set of UVs for color, normals, rough-metal, etc.

The only way to do what you want is to go “under the hood” and modify the material’s shader code with your own custom shader.

1 Like

Hi @cabada I’m doing a small project and stumble with the same issue, did you manage to solve this?

My particular issue is I need to use a single Texture Atlas image for color, metalness and rough maps, so I need multiple UV mapping to offset the image. Shader noob here.

I didn’t dig up much, but I found out that you have to create custom shaders: three.js docs

But it’s not an option that it exists right away, you would gotta need to write your own custom material.

1 Like

For all the souls seeking answers in the future far ahead - Using multiple UV maps per model .

2 Likes