Displacement map / terrain: close sides

Questions
1

I am creating a system that modifies a terrain using water flow in real-time.

The terrain is created using a displacement map.
Everything works fine, but I’d like to close the sides of the map (see image) so it looks like a cutout from a real terrain.

Any idea how this can be done ? The program renders the terrain and water flow in real time, I’d like to keep the speed up.

I could set the edges of the displacement map to 0, but then the texture map is stretched along the height and that looks less than nice. A separate texture for the sides is prefered.

My first thought was to use a boxgeometry and apply the displacement map on the top, but the displacement map doesn’t affect the vertices on the sides, so that doesn’t work well.

Any help is welcome!

regards
Matthijs

image
image926×464 61 KB

2

Hi!
Do you apply that displacement to a PlaneGeometry or a set of points with triangulation?

1 Like
3

I used modified BoxGeometry and MeshStandardMaterial.
See TerrainCutout class: youthful-meadow-0swsm - CodeSandbox
It’s just a rough example/option, not the ultimate solution:

изображение
изображение1920×1080 117 KB

3 Likes
4

Hi,

that is what I need indeed, thanks! I curently apply the displacement map to a planegeometry.

Now I just need to try and understand what you did there. That will take me some time… :slightly_smiling_face:

5

Hi, I am new to three.js. in your example, if I assign a texture to the 6 faces, the top and bottom are ok but the side’s texture is all vertically stretched, how can I fix that?
tnx in advance.