My goal is to create a world that generates infinitely, similar to how Minecraft operates, using chunks that appear and disappear based on the player's location. I am utilizing a plane that generates points through a combination of Perlin and Simplex noise.
However, when I load these points into the world, all the chunks end up looking the same. This happens because I am using the same geometry for each one. I've attempted to use object.matrixAutoUpdate = false; and object.updateMatrix();, but it hasn't made a difference. I also tried assigning different geometries to each chunk, but this caused a drop in performance whenever new chunks were loaded.
Below is the complete code snippet:
function updateChunk() {
// Clear chunks
while(ground.children.length > 0){
ground.children[0].geometry.dispose()
ground.remove(ground.children[0]);
}
let size = (game.chunk.render * 2) + 1
let sX = (Math.floor(plane.position.x / 1000) * 1000) - Math.floor((size / 2) * 1000)
let sY = (Math.floor(plane.position.z / 1000) * 1000) - Math.floor((size / 2) * 1000)
ground.position.set(sX, 0, sY)
for(let y = 0; y < size; y++) {
for(let x = 0; x < size; x++) {
let g = new THREE.Mesh(geometry.clone(), material);
let startX = ((sX / 1000) + x) * 100
let startY = ((sY / 1000) + y) * 100
let currentChunk = createChunk(startX, startY)
//Setup Terrain
for(let y2 = 0; y2 < 101;y2++) {
for(let x2 = 0; x2 < 101; x2++) {
g.geometry.vertices[(y2 * 101) + x2].z = currentChunk[x2 + ',' + y2]
}
}
g.rotation.x = Math.PI / -2
g.position.set(x * 1000, 0, y * 1000)
g.matrixAutoUpdate = false;
g.updateMatrix();
ground.add( g );
}
}
}
function createChunk(startX, startY) {
let chunk = []
for(let y = 0; y < 101; y++) {
for(let x = 0; x < 101; x++) {
chunk[x + ',' + y] = Math.abs(noise.perlin2((x + startX) / 100, (y + startY) / 100)) * 200;
}
}
return chunk
}