Three.js Demos A collection of Three.js Demos

Random Terrain

Fractal noise-based terrain generation with vegetation and biomes.

What this code does

- Fractal Noise: layered Perlin-style noise generates realistic height variations.
- Biome Coloring: height-based vertex colors simulate water, grass, rock, and snow.
- Seeded Generation: reproducible terrains using pseudorandom number generation.
- Vegetation Placement: procedurally placed trees and rocks based on terrain height.
- Noise Parameters: octaves, persistence, lacunarity control terrain complexity.
- Terrain Presets: rolling hills, rugged mountains, desert dunes, alien landscapes.

JavaScript (plain)

const scene = new THREE.Scene()
scene.background = new THREE.Color(0x87ceeb)
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(0, 50, 50)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

// Simple noise function

function noise(x, y) {
  const n = Math.sin(x * 0.1) * Math.cos(y * 0.1) * 10 +
            Math.sin(x * 0.05) * Math.cos(y * 0.05) * 20
  return n
}

// Generate terrain
const geometry = new THREE.PlaneGeometry(100, 100, 64, 64)
const vertices = geometry.attributes.position.array

for (let i = 0; i < vertices.length; i += 3) {
  const x = vertices[i]
  const y = vertices[i + 1]
  vertices[i + 2] = noise(x, y)
}

geometry.attributes.position.needsUpdate = true
geometry.computeVertexNormals()

const material = new THREE.MeshLambertMaterial({ color: 0x4a7c59 })
const terrain = new THREE.Mesh(geometry, material)
terrain.rotation.x = -Math.PI / 2
scene.add(terrain)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()
← Back