lighting from point light has strange artifacts on my models in three.js

Question

Consider this simplistic house 3d model. It has a simple Cube unwrap applied with a few tiled textures.

When I add a point light in front of it, the house looks normal, but the surrounding ground (which is part of a large terrain mesh) is not lit.

Inside the house mesh, the lighting is applied funny, somehow relating to the vertices instead of calculating and adding color correctly. Notice how the lighting is not spread evenly, but you can actually see a polygon there:

I think this is the reason why the huge terrain mesh is ignoring the light, because the polygons are very huge and there are only a few vertices. It seems the light needs a vertex nearby in order for it to show.

Here is a part of the huge terrain mesh without light:

I add a light:

Notice how the light placement is not directly next to a vertex:

When I place the light close to a vertex, the effect suddenly becomes super intense

When I place the light in the middle there is barely an effect

How can I make my models have even light everywhere, regardless of the size of the model and the amount of vertices it has?

Answer 1

Found it eventually thanks to @WestLangley

I was using MeshLambertMaterial before, now I switched to a PhongMaterial and set material.perPixel to true.

Also don't forget to set material.needsUpdate to true if you are dynamically adding lights! (as was the case with me)

Answer 2

You have to stop doing per-vertex lighting and start doing per-fragment lighting. You need a fragment shader that takes the position and normal of the point, as well as the light position/direction, and performs the various lighting calculations.