Best way to see normal map effect everywhere

Hey all,

What is the best way to always see a normal map effect?
Currently I have a scene with an ambient light, and a directional light as the sun.
The material which is lightened by the sun shows the normal map effect, but anything in the shadow looks flat.

The material is MeshPhongMaterial with a color and a normalMap applied to it.
What is the best way to solve this? Add a couple of directional lights around the object?

Yes. What you are looking at is probably more of a presentational challenge, doesn’t really involve programming materials or normal maps (ofc you could just put the normal maps mixed with diffuse color everywhere, but that may look really poor.)

Read a bit about 3-light studio setup :


It lets you showcase focused object in their best light - highlighting different areas on different sides (for inspiration, most of art showcases on Blenderartists show 3-light setup in one way or another.)

1 Like

Cheers, I will look into that, thanks for pointing me in the right direction!

FYI: Notice that point lights in Blender are able to have a size which is not possible in three.js and most other realtime 3D engines. In this context, point lights are so called punctual lights and thus infinitely small.

In general, a “small” light source creates by definition sharp shadows. When a light source becomes “bigger”, it creates smoother and softer shadows. Photographers can influence this process with soft boxes and DCC tools like Blender are able to replicate such effects with size settings. In three.js the only way to achieve such an effect is with RectAreaLight although this type of light is way more expensive than a simple point light. And thus not used in most 3D applications.

Hence, it can be quite frustrating to replicate a lighting setup from Blender in three.js. You should be aware of the above restrictions and not have false expectations^^.

1 Like