Hello
I tried using displacementMap
in a mesh with planeBufferGeometry
and meshStandardMaterial
. The height is proper and when using wireframe mode I can see all vertices moved up correctly. However the shading looks as if all the faces have the same starting normals and react to light exactly the same:
I expected the result of shading to be similar as when flatShading
is enabled:
Is this the correct result? How can I achieve similar “shadowed” areas with smooth shading?
Here is a jsfddle:
https://jsfiddle.net/y7ps2dfc/
That’s because all your normals are still pointing in the same direction after you apply the heightmap, kind of like this:
You need to add a normalMap to the material as well, so the normals all point away from their respective faces, as in this example: https://en.wikipedia.org/wiki/Normal_(geometry)#/media/File:Surface_normals.svg
When you apply .flatShading
, the normals are automatically calculated in the fragment shader, but with smooth shading, you need to tell Three.js which way you want the normals to point.
2 Likes
Thank you for clarifying. I was hoping it was possible to set some flag to recalculate normals, but I guess this will do fine. Thanks for help