Baked texturemap not displaying correctly

Questions
1

Hi, I’ve exported my 3D model from blender (gltf), baked a texturemap, to get more realistic looking shading in Threejs, but it seems to go wrong when I apply the texturemap to the glb model.

texturemap
texturemap1189×447 322 KB

Left is a screenshot from blender, right is a screenshot from the running website.

I had a previous website that I made last year, then I got it working perfectly, but now I can’t get it right, I dont know wich step i forgot.

Anyone that can help pointing me in the right direction to a solution?

2

It looks like the wrong uv map has either been baked or applied in three js, can you check to see if you only have one uv map in blender?

3

I followed this tutorial, that shows I needed to add a “bake” UV map to each object before baking the textures, but that does seem to behave strangely in threejs.

But when I don’t add these additional UVmaps, the view in Blender is distorted after baking

texturemap
texturemap1153×447 33.7 KB

(left: before bake, right: after baking)

Wallpaper + floor is distorted. I’m sure there was a time this was easy, I just forgot the correct steps :confused:

4

what version of three.js are you on? older versions had some limitations with how many UV sets were supported, and how different textures on the same material needed to share UV offset/repeat/rotation.

1 Like
5

according to package.json “three”: “^0.141.0”

But this is the same version as my other threejs website with texturemaps, and there it works. I just can’t seem to find what I’m doing differently now vs then.

6

Got a step further:

  • select each item in the scene and add second UV map (and highlight it)
  • select all items → edit mode → Smart UV project to create a texturemap with all items in 1 image
  • bake
  • select each item again, 1 by 1 → remove second UV map
  • Select all items → edit mode → Smart UV project again
  • Select each item once again and link the texturemap to the color attribute in blender.
  • export the glb & texturemap

Then, in Threejs on the website, it finally looks like it should.

By the love of God, I can’t remember that I had to do all these steps before, to get to this result. Is this texturemapping changed in Blender 4.0? The last time I was working in 3.5 I think

texturemap.fw
texturemap.fw831×595 202 KB

(result in ThreeJs website)

1 Like
7

In three.js versions prior to r150, there was a limitation that .aoMap and .lightMap use the 2nd UV set, and all other textures use the 1st UV set. Blender has no knowledge of that, so it could be something as simple as Blender using a 2nd or 3rd UV set where three.js needed it to use the 1st perhaps. I’m not sure if anything has changed in Blender though.

2 Likes
8

texture.flipY=false;

9

flipY was allready set to false

1 Like
10

K just checking… :slight_smile: Glad you got it sorted!