glTF model not loaded properly

Questions
,
21

Yeah, three.js just never uses any tangents that were used to generate the normal map.

22

So is there any solution to this problem?

23

Yes, you can write your own ShaderMaterial or inject the normal mapping code into existing materials.

For example, you can grab the GLSL from the issue above and plug it into some material.

gltf.traverse( o=> o.material.onBeforeCompile = your_obc
24

A quick fix for the issue would be to modify the material after loading:

gltf.scene.traverse((o) => {
  if (o.isMesh) o.material.normalScale.y *= -1;
});

Per https://github.com/mrdoob/three.js/issues/15428#issuecomment-448414156, we can probably get a better fix into a future version by supporting stored tangents.

1 Like
25

Thankyou @donmccurdy for the fix and it worked and thankyou @pailhead for the medium link.
I like to learn more about shaders. can you provide me with any resource or link to the resource and do I need to learn math for learning shaders?

Thankyou for your time @Mugen87 @donmccurdy @pailhead