I have export model from blender and view it in threejs viewer ( windows, visual studio, online websites ), the rendered model in threejs has all the texture wrong

Questions
, ,
1

I will tell you guys, the things that I have done so far:

The following is the render that I have created in blender:
image

The following are the nodes that i have used to achieve the render:

image
image1366×768 177 KB

The following is the render when we export the above render to “gltf” and open it with some 3D viewer:

image
image1366×768 103 KB

I know the correct process to add texture to object so it loads correctly in threejs, is as follows:

  1. We initially don’t have to worry about threejs at all, we can setup all the nodes and get the render as we want in blender
  2. Then when we are satisfied with the render, then we are going to “bake” the texture into an “image texture” by using “active select” and also exporting necessary things like “tangents”
  3. To cross check, we can disconnect all nodes from the principle bsdf and connect the image texture that we just baked and connect it to “base color”, and render should look as it was
  4. If you are satisfied till here, then we are going to just export by using the add on and selecting the necessary information to export and we are done!

I have followed this method and did not end up with blender render and then i followed the latter part mentioned video and still it doesn’t work

The latter part being the following:

  1. Add a sphere
  2. Use the pre-existing normal, roughness, and base color maps using the “node wrangler” add on
  3. Then just export using gltf exporter and we are done!

Even this works for the youtuber, in the following link ~ but for me it does not

But even when i follow the above process, i still get issues! why is that the case! I am at end of my witts. I have followed this tutorial: Blender materials export to GLB/GLTF - YouTube

Also, i have another question: at the timestamp where the video starts, why does she not bake anything but still everything works well, but when i do that it doesn’t work?

What is wrong with the process I am following?

Please and Thank You!

2

I have found the solution using the discord group of this community. The mis-interpretation, by threejs, in mapping was happening due to how the gltf file works. I was changing all the values in the mapping node but not all of them are supported by the gltf file

I had changed the rotation on x,y,z but gltf only supports z + scale on x,y,z it only supports on x and y

You can check the documentation here: glTF 2.0 — Blender Manual

The best way to solve this is to: not change anything in the “mapping node”, but just use it to access the uv map in shader editor in blender and make all the changes in the UV editor itself