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.
I used modified BoxGeometry and MeshStandardMaterial.
See TerrainCutout class: youthful-meadow-0swsm - CodeSandbox
It’s just a rough example/option, not the ultimate solution:
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.
This solution is quite good.however if the bottom of BoxGeometry is not a square, for example shape from geojson, the top faces of the BoxGemetry have totally deffient size form each other,then vertexes of geometry will not be equal spacing to next vertex.
