How to prevent self-transparent twice

I am making a strategy game and trying to implement a Fog of War with this example:

As it is a 3D terrain with some mountain, I implement as following:

  1. Create a THREE.PlaneBufferGeometry
  2. Adjust the height for each vertex on the Geo for the terrain height
  3. Use alphaMap to display the fog

which is fine for no-transparency, and got this

However, when I try to create the semi-transparent fog, the self-transparency part got darken.

In the orange-circle, the fog’s color is double(front and back-side), and it looks darken. Even worse, the yellow-circle seems tripled (front, back, front).

Is there any way to prevent the self-transparency, let’s say just render the closer transparent part. Or, is there other suggestion for implementing a Fog of War?

Thank you so much.

I add a simple code to demonstrate my question:
How can make the overlap-square have the same color as it surrounding?