Hello,
I am currently working on rendering a model using the MeshStandardMaterial in Three.js. However, I’ve encountered an issue where the smooth shading effect on the normals disappears after I add a normal map.
Here is a screenshot without the normal map applied:
And here is a screenshot after applying the normal map:
Attached are my texture files and model files for reference:
metal0.zip (7.3 MB)
sphere.obj (106.2 KB)
Could anyone help me understand why this is happening and how I might fix it?
Thank you in advance for your assistance!
Due to file size limitations, I haven’t uploaded the displacement, roughness, and metalness maps.
I’m not sure, but that sorta makes sense to me… in that… if you create a tangent space normal map for the surface, the smooth normals should be encoded in the normal map, and then also having smooth normals on the mesh itself would conflict with the normals coming from the map. The wouldn’t combine properly. But this is just a guess…
Thank you for your response. I understand what you’re suggesting about the potential conflict between the mesh’s smooth normals and the normals encoded in the tangent space normal map. To test this, I uploaded my textures to the Three.js editor and the result looked correct – the smooth shading appeared as expected with the normal map applied. However, when I use the same textures in my own code, the issue persists. This leads me to believe that there may be something specific in my implementation that’s causing the problem. Could there be a difference in how the Three.js editor applies the normal maps compared to a custom implementation?
Additionally, here’s a screenshot of the model as it appears in the Three.js editor, where the normal map seems to be working correctly with the smooth shading:
1 Like
You can export the scene/project from the threejs editor and look at the javascript it generates. It can spit out a whole standalone version of the scene+html etc.
Maybe looking at the exported app will give you more insight?
Thank you very much for your suggestion. I’ve managed to identify the issue—it was caused by setting the normal map’s color space to sRGBColorSpace. When I switched it to NoColorSpace, the problem was resolved. However, I’m still struggling to understand why the smooth shading of the model is affected by the color space setting of the normal map. It’s quite perplexing.
1 Like
