Minecraft-like Voxel Game with Biomes

n'class Chunk { constructor(x, z) { this.x = x; this.z = z; this.blocks = {}; this.mesh = null; this.size = 16; this.height = 32; } getBlock(x, y, z) { return this.blocks[`${x},${y},${z}`] || null; } setBlock(x, y, z, value) { this.blocks[`${x},${y},${z}`] = value; } } class VoxelGame { constructor(canvas) { this.canvas = canvas; this.engine = new BABYLON.Engine(canvas, true); this.scene = new BABYLON.Scene(this.engine); this.chunks = {}; this.camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 20, 0), this.scene); this.materials = {}; this.currentMaterial = 'grass'; } createGrid() { const size = 4; for (let x = -size; x <= size; x++) { for (let z = -size; z <= size; z++) { this.generateChunk(x, z); } } } generateChunk(x, z) { const chunk = new Chunk(x, z); for (let bx = 0; bx < chunk.size; bx++) { const wx = x * chunk.size + bx; for (let bz = 0; bz < chunk.size; bz++) { const wz = z * chunk.size + bz; const height = Math.floor(Math.random() * 5) + 3; for (let by = 0; by < height; by++) { const wy = by; chunk.setBlock(bx, wy, bz, by === height - 1 ? 'grass' : 'dirt'); } } } this.chunks[`${x},${z}`] = chunk; this.updateChunkMesh(x, z); } updateChunkMesh(x, z) { const chunk = this.chunks[`${x},${z}`]; if (chunk.mesh) { chunk.mesh.dispose(); } const positions = []; const normals = []; const uvs = []; const indices = []; const colors = []; const materialIndex = []; let vertexIndex = 0; const materialMapping = { 'grass': [0.2, 0.7, 0.2], 'dirt': [0.5, 0.3, 0.1], 'stone': [0.4, 0.4, 0.4], 'water': [0, 0.5, 1], 'sand': [1, 0.93, 0.5], 'snow': [1, 1, 1] }; const addFace = (vertices, normal, uv, color) => { const index = positions.length / 3; for (let i = 0; i < vertices.length; i++) { positions.push(vertices[i][0], vertices[i][1], vertices[i][2]); normals.push(normal[0], normal[1], normal[2]); uvs.push(uv[i][0], uv[i][1]); colors.push(color[0], color[1], color[2], 1); } indices.push(index, index + 1, index + 2, index, index + 2, index + 3); }; for (let bx = 0; bx < chunk.size; bx++) { for (let by = 0; by < chunk.height; by++) { for (let bz = 0; bz < chunk.size; bz++) { const block = chunk.getBlock(bx, by, bz); if (!block) continue; const wx = x * chunk.size + bx; const wy = by; const wz = z * chunk.size + bz; const color = materialMapping[block]; // Top face if (by === chunk.height - 1 || !chunk.getBlock(bx, by + 1, bz)) { const vertices = [ [wx, wy + 1, wz], [wx + 1, wy + 1, wz], [wx + 1, wy + 1, wz + 1], [wx, wy + 1, wz + 1] ]; addFace(vertices, [0, 1, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Bottom face if (by === 0 || !chunk.getBlock(bx, by - 1, bz)) { const vertices = [ [wx, wy, wz], [wx + 1, wy, wz], [wx + 1, wy, wz + 1], [wx, wy, wz + 1] ]; addFace(vertices, [0, -1, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Front face if (!chunk.getBlock(bx, by, bz - 1)) { const vertices = [ [wx, wy, wz], [wx + 1, wy, wz], [wx + 1, wy + 1, wz], [wx, wy + 1, wz] ]; addFace(vertices, [0, 0, -1], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Back face if (!chunk.getBlock(bx, by, bz + 1)) { const vertices = [ [wx, wy, wz + 1], [wx + 1, wy, wz + 1], [wx + 1, wy + 1, wz + 1], [wx, wy + 1, wz + 1] ]; addFace(vertices, [0, 0, 1], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Left face if (!chunk.getBlock(bx - 1, by, bz)) { const vertices = [ [wx, wy, wz], [wx, wy, wz + 1], [wx, wy + 1, wz + 1], [wx, wy + 1, wz] ]; addFace(vertices, [-1, 0, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Right face if (!chunk.getBlock(bx + 1, by, bz)) { const vertices = [ [wx + 1, wy, wz], [wx + 1, wy, wz + 1], [wx + 1, wy + 1, wz + 1], [wx + 1, wy + 1, wz] ]; addFace(vertices, [1, 0, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } } } } const vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.normals = normals; vertexData.uvs = uvs; vertexData.indices = indices; vertexData.colors = colors; const mesh = new BABYLON.Mesh(`chunk_${x}_${z}`, this.scene); vertexData.applyToMesh(mesh); const material = new BABYLON.StandardMaterial(`chunk_mat_${x}_${z}`, this.scene); material.backFaceCulling = false; material.diffuseColor = new BABYLON.Color3(1, 1, 1); material.specularColor = new BABYLON.Color3(0, 0, 0); mesh.material = material; chunk.mesh = mesh; } setupCamera() { this.camera.speed = 0.3; this.camera.angularSensibility = 1500; this.camera.keysUp.push(87); // W this.camera.keysDown.push(83); // S this.camera.keysLeft.push(65); // A this.camera.keysRight.push(68); // D this.camera.inertia = 0.9; this.camera.attachControl(this.canvas, true); this.camera.setTarget(new BABYLON.Vector3(0, 10, 0)); this.camera.fov = 1.0; this.camera.minZ = 0.1; } setupLighting() { const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this.scene); light1.intensity = 0.7; const light2 = new BABYLON.DirectionalLight("light2", new BABYLON.Vector3(0, -1, 1), this.scene); light2.intensity = 0.5; } setupWorld() { this.materials = { grass: new BABYLON.StandardMaterial("grass", this.scene), dirt: new BABYLON.StandardMaterial("dirt", this.scene), stone: new BABYLON.StandardMaterial("stone", this.scene), water: new BABYLON.StandardMaterial("water", this.scene), sand: new BABYLON.StandardMaterial("sand", this.scene), snow: new BABYLON.StandardMaterial("snow", this.scene) }; this.materials.grass.diffuseColor = new BABYLON.Color3(0.2, 0.7, 0.2); this.materials.dirt.diffuseColor = new BABYLON.Color3(0.5, 0.3, 0.1); this.materials.stone.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4); this.materials.water.diffuseColor = new BABYLON.Color3(0, 0.5, 1); this.materials.sand.diffuseColor = new BABYLON.Color3(1, 0.93, 0.5); this.materials.snow.diffuseColor = new BABYLON.Color3(1, 1, 1); this.createGrid(); } getBlockAt(worldX, worldY, worldZ) { const chunkX = Math.floor(worldX / 16); const chunkZ = Math.floor(worldZ / 16); const chunk = this.chunks[`${chunkX},${chunkZ}`]; if (!chunk) return null; const x = Math.floor(worldX) % 16; const z = Math.floor(worldZ) % 16; return chunk.getBlock(x, worldY, z); } setBlockAt(worldX, worldY, worldZ, type) { const chunkX = Math.floor(worldX / 16); const chunkZ = Math.floor(worldZ / 16); const chunk = this.chunks[`${chunkX},${chunkZ}`]; if (!chunk) return null; const x = Math.floor(worldX) % 16; const z = Math.floor(worldZ) % 16; chunk.setBlock(x, worldY, z, type); this.updateChunkMesh(chunkX, chunkZ); } start() { this.setupLighting(); this.setupCamera(); this.setupWorld(); this.scene.onPointerDown = (evt) => { if (evt.button !== 2) { const pickResult = this.scene.pick(this.scene.pointerX, this.scene.pointerY); if (pickResult.hit) { const point = pickResult.pickedPoint; const direction = pickResult.ray.direction; const newPoint = point.add(direction.scale(0.1)); this.setBlockAt(Math.floor(newPoint.x), Math.floor(newPoint.y), Math.floor(newPoint.z), this.currentMaterial); } } }; document.addEventListener('keydown', (e) => { if (e.key === '1') this.currentMaterial = 'grass'; if (e.key === '2') this.currentMaterial = 'dirt'; if (e.key === '3') this.currentMaterial = 'stone'; if (e.key === '4') this.currentMaterial = 'water'; if (e.key === '5') this.currentMaterial = 'sand'; if (e.key === '6') this.currentMaterial = 'snow'; }); this.engine.runRenderLoop(() => { this.scene.render(); }); } } const canvas = document.getElementById("renderCanvas"); const game = new VoxelGame(canvas); game.start();``` I'll add biomes with different terrain generation and block distributions. Here's the updated code: class Chunk { constructor(x, z) { this.x = x; this.z = z; this.blocks = {}; this.mesh = null; this.size = 16; this.height = 32; } getBlock(x, y, z) { return this.blocks[`${x},${y},${z}`] || null; } setBlock(x, y, z, value) { this.blocks[`${x},${y},${z}`] = value; } } class VoxelGame { constructor(canvas) { this.canvas = canvas; this.engine = new BABYLON.Engine(canvas, true); this.scene = new BABYLON.Scene(this.engine); this.chunks = {}; this.camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 20, 0), this.scene); this.materials = {}; this.currentMaterial = 'grass'; } createGrid() { const size = 4; for (let x = -size; x <= size; x++) { for (let z = -size; z <= size; z++) { this.generateChunk(x, z); } } } getBiome(x, z) { // Simplex noise would be better here, but using simpler math for demo const temperature = Math.sin(x * 0.1) * Math.cos(z * 0.1); const moisture = Math.sin(x * 0.08) * Math.cos(z * 0.08); if (temperature > 0.5 && moisture > 0.5) { return 'jungle'; } else if (temperature > 0.5) { return 'desert'; } else if (moisture > 0.5) { return 'swamp'; } else if (temperature < -0.5) { return 'snow'; } else { return 'plains'; } } getSurfaceHeight(x, z, biome) { const baseHeight = 10; const variation = 5; switch (biome) { case 'plains': return baseHeight + Math.floor(Math.sin(x * 0.1) * Math.cos(z * 0.08) * 3); case 'desert': return baseHeight - 2 + Math.floor(Math.sin(x * 0.07) * Math.cos(z * 0.09) * 2); case 'snow': return baseHeight + Math.floor(Math.sin(x * 0.15) * Math.cos(z * 0.15)) * 5; case 'jungle': return baseHeight + Math.floor(Math.sin(x * 0.1) * Math.cos(z * 0.05) * 7) - 2; case 'swamp': return baseHeight - 3 + Math.floor(Math.sin(x * 0.1) * Math.cos(z * 0.05) * 2); default: return baseHeight; } } generateChunk(x, z) { const chunk = new Chunk(x, z); const worldX = x * chunk.size; const worldZ = z * chunk.size; const biome = this.getBiome(worldX, worldZ); for (let bx = 0; bx < chunk.size; bx++) { const wx = x * chunk.size + bx; for (let bz = 0; bz < chunk.size; bz++) { const wz = z * chunk.size + bz; const height = this.getSurfaceHeight(wx, wz, biome); for (let by = 0; by < height; by++) { let blockType = 'dirt'; // Default layer if (by >= height - 1) { // Top layer switch (biome) { case 'desert': blockType = 'sand'; break; case 'snow': blockType = 'snow'; break; case 'swamp': blockType = Math.random() < 0.3 ? 'water' : 'grass'; break; default: blockType = 'grass'; } } else if (by === 0) { // Bottom layer blockType = 'stone'; } else if (by <= height - 3) { // Below first layer blockType = 'stone'; } if (biome === 'desert' && by > 0 && by < height - 1) { blockType = 'sand'; } chunk.setBlock(bx, by, bz, blockType); } if (biome === 'swamp' && Math.random() < 0.1) { const waterHeight = height + 1; if (waterHeight < chunk.height) { chunk.setBlock(bx, waterHeight, bz, 'water'); } } } } this.chunks[`${x},${z}`] = chunk; this.updateChunkMesh(x, z); } updateChunkMesh(x, z) { const chunk = this.chunks[`${x},${z}`]; if (chunk.mesh) { chunk.mesh.dispose(); } const positions = []; const normals = []; const uvs = []; const indices = []; const colors = []; const materialIndex = []; let vertexIndex = 0; const materialMapping = { 'grass': [0.2, 0.7, 0.2], 'dirt': [0.5, 0.3, 0.1], 'stone': [0.4, 0.4, 0.4], 'water': [0, 0.5, 1], 'sand': [1, 0.93, 0.5], 'snow': [1, 1, 1] }; const addFace = (vertices, normal, uv, color) => { const index = positions.length / 3; for (let i = 0; i < vertices.length; i++) { positions.push(vertices[i][0], vertices[i][1], vertices[i][2]); normals.push(normal[0], normal[1], normal[2]); uvs.push(uv[i][0], uv[i][1]); colors.push(color[0], color[1], color[2], 1); } indices.push(index, index + 1, index + 2, index, index + 2, index + 3); }; for (let bx = 0; bx < chunk.size; bx++) { for (let by = 0; by < chunk.height; by++) { for (let bz = 0; bz < chunk.size; bz++) { const block = chunk.getBlock(bx, by, bz); if (!block) continue; const wx = x * chunk.size + bx; const wy = by; const wz = z * chunk.size + bz; const color = materialMapping[block]; // Top face if (by === chunk.height - 1 || !chunk.getBlock(bx, by + 1, bz)) { const vertices = [ [wx, wy + 1, wz], [wx + 1, wy + 1, wz], [wx + 1, wy + 1, wz + 1], [wx, wy + 1, wz + 1] ]; addFace(vertices, [0, 1, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Bottom face if (by === 0 || !chunk.getBlock(bx, by - 1, bz)) { const vertices = [ [wx, wy, wz], [wx + 1, wy, wz], [wx + 1, wy, wz + 1], [wx, wy, wz + 1] ]; addFace(vertices, [0, -1, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Front face if (!chunk.getBlock(bx, by, bz - 1)) { const vertices = [ [wx, wy, wz], [wx + 1, wy, wz], [wx + 1, wy + 1, wz], [wx, wy + 1, wz] ]; addFace(vertices, [0, 0, -1], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Back face if (!chunk.getBlock(bx, by, bz + 1)) { const vertices = [ [wx, wy, wz + 1], [wx + 1, wy, wz + 1], [wx + 1, wy + 1, wz + 1], [wx, wy + 1, wz + 1] ]; addFace(vertices, [0, 0, 1], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Left face if (!chunk.getBlock(bx - 1, by, bz)) { const vertices = [ [wx, wy, wz], [wx, wy, wz + 1], [wx, wy + 1, wz + 1], [wx, wy + 1, wz] ]; addFace(vertices, [-1, 0, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } // Right face if (!chunk.getBlock(bx + 1, by, bz)) { const vertices = [ [wx + 1, wy, wz], [wx + 1, wy, wz + 1], [wx + 1, wy + 1, wz + 1], [wx + 1, wy + 1, wz] ]; addFace(vertices, [1, 0, 0], [[0, 0], [1, 0], [1, 1], [0, 1]], color); } } } } const vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.normals = normals; vertexData.uvs = uvs; vertexData.indices = indices; vertexData.colors = colors; const mesh = new BABYLON.Mesh(`chunk_${x}_${z}`, this.scene); vertexData.applyToMesh(mesh); const material = new BABYLON.StandardMaterial(`chunk_mat_${x}_${z}`, this.scene); material.backFaceCulling = false; material.diffuseColor = new BABYLON.Color3(1, 1, 1); material.specularColor = new BABYLON.Color3(0, 0, 0); mesh.material = material; chunk.mesh = mesh; } setupCamera() { this.camera.speed = 0.3; this.camera.angularSensibility = 1500; this.camera.keysUp.push(87); // W this.camera.keysDown.push(83); // S this.camera.keysLeft.push(65); // A this.camera.keysRight.push(68); // D this.camera.inertia = 0.9; this.camera.attachControl(this.canvas, true); this.camera.setTarget(new BABYLON.Vector3(0, 10, 0); this.camera.fov = 1.0; this.camera.minZ = 0.1; } setupLighting() { const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this.scene); light1.intensity = 0.7; const light2 = new BABYLON.DirectionalLight("light2", new BABYLON.Vector3(0, -1, 1), this.scene); light2.intensity = 0.5; } setupWorld() { this.materials = { grass: new BABYLON.StandardMaterial("grass", this.scene), dirt: new BABYLON.StandardMaterial("dirt", this.scene), stone: new BABYLON.StandardMaterial("stone", this.scene), water: new BABYLON.StandardMaterial("water", this.scene), sand: new BABYLON.StandardMaterial("sand", this.scene), snow: new BABYLON.StandardMaterial("snow", this.scene) }; this.materials.grass.diffuseColor = new BABYLON.Color3(0.2, 0.7, 0.2); this.materials.dirt.diffuseColor = new BABYLON.Color3(0.5, 0.3, 0.1); this.materials.stone.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4); this.materials.water.diffuseColor = new BABYLON.Color3(0, 0.5, 1); this.materials.sand.diffuseColor = new BABYLON.Color3(1, 0.93, 0.5); this.materials.snow.diffuseColor = new BABYLON.Color3(1, 1, 1); this.createGrid(); } getBlockAt(worldX, worldY, worldZ) { const chunkX = Math.floor(worldX / 16); const chunkZ = Math.floor(worldZ / 16); const chunk = this.chunks[`${chunkX},${chunkZ}`]; if (!chunk) return null; const x = Math.floor(worldX) % 16; const z = Math.floor(worldZ) % 16; return chunk.getBlock(x, worldY, z); } setBlockAt(worldX, worldY, worldZ, type) { const chunkX = Math.floor(worldX / 16); const chunkZ = Math.floor(worldZ / 16); const chunk = this.chunks[`${chunkX},${chunkZ}`]; if (!chunk) return null; const x = Math.floor(worldX) % 16; const z = Math.floor(worldZ) % 16; chunk.setBlock(x, worldY, z, type); this.updateChunkMesh(chunkX, chunkZ); } start() { this.setupLighting(); this.setupCamera(); this.setupWorld(); this.scene.onPointerDown = (evt) => { if (evt.button !== 2) { const pickResult = this.scene.pick(this.scene.pointerX, this.scene.pointerY); if (pickResult.hit) { const point = pickResult.pickedPoint; const direction = pickResult.ray.direction; const newPoint = point.add(direction.scale(0.1)); this.setBlockAt(Math.floor(newPoint.x), Math.floor(newPoint.y), Math.floor(newPoint.z), this.currentMaterial); } } }; document.addEventListener('keydown', (e) => { if (e.key === '1') this.currentMaterial = 'grass'; if (e.key === '2') this.currentMaterial = 'dirt'; if (e.key === '3') this.currentMaterial = 'stone'; if (e.key === '4') this.currentMaterial = 'water'; if (e.key === '5') this.currentMaterial = 'sand'; if (e.key === '6') this.currentMaterial = 'snow'; }); this.engine.runRenderLoop(() => { this.scene.render(); }); } } const canvas = document.getElementById("renderCanvas"); const game = new VoxelGame(canvas); game.start(); Minecraft-like Voxel Game with Biomes

Controls:
WASD - Move
Mouse - Look
Left Click - Place Block
1-6 - Select Block Type