In this explanation, we will focus on solving the problem for a single axis, specifically the x-axis. Once that is understood, the process can be easily applied to the y-axis (referred to as z in three.js).
Firstly, it is important to ensure that the perlin noise generator uses the same random seed for each block. This consistency guarantees that blocks share the same underlying perlin noise map, facilitating smooth transitions between them.
The next step involves establishing a clear mapping between your block units and the input values for the perlin noise function. For instance, if your block's x-coordinate ranges from -512 to 512 units, each x vertex should have a corresponding height value obtained by passing in values from -0.5 to 0.5 into the noise function, like so:
vertextHeight = perlin(vertexX / 1024, vertextY / 1024)
Subsequently, the second block should be positioned to align its edge with the first block. For example, if the x position of the second block is 1024 units greater than the first block, it would range from 512 to 1536 units. Hence, block0 has an x offset of 0, while block1 has an x offset of 1024, based on a block width or size of 1024 units in three.js.
Lastly, apply the same offsets to the noise function but adjusted according to the established mapping. In this scenario, 512 becomes 0.5 and 1536 becomes 1.5, illustrated as follows:
size = 1024;
vertextHeight = perlin((vertexX + offsetX) / size, (vertextY + offsetY) / size)`
As a result, the x-value provided to the noise function at the boundary between block0 and block1 remains consistent, thereby producing identical height values.