Procedural Terrain

by Bhimesh Chauhan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js"></script>

CSS

body{
	margin:0;
	background-color: #152930;
}

JavaScript

var colorsArr = [{
  name: 'darkwarm',
  values: ['152930', '0D1C0E', 'EBC335', 'F2461C', 'D72827', 'D72827']
}, {
  name: 'pwinks',
  values: ['FF540D', 'E82C0C', 'EE0000', 'E80C7A', 'FF0DFF', '992222']
}, {
  name: 'rainbow',
  values: ['58C1DA', '30A135', 'EBC335', 'F2461C', 'D72827', 'CCCCCC']
}, {
  name: 'blackblue',
  values: ['333333', '666666', '66F2EB']
}, {
  name: 'yellows',
  values: ['99F2E9', 'F2E85E', '736834', 'F2DD72', 'A6953F']
}];
var tm=0,dm = 0;
//
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


camera.position.set(0,0,80);

//
var geometry = new THREE.PlaneGeometry( 1000, 1000, 100, 100 );
geometry.dynamic  = true;

var dMaterial = new THREE.MeshPhongMaterial({
  color:0xE80C7A, 
  shininess:8, 
  specular:0xFF540D, 
  shading: THREE.FlatShading
});
// dMaterial.wireframe=true;
var plane = new THREE.Mesh( geometry, dMaterial );
plane.rotation.x=5;
scene.add( plane );
for (i=0;i<plane.geometry.vertices.length;i++){
  plane.geometry.vertices[i].z = randNum(10);
  plane.geometry.vertices[i].scl = 0;
  plane.geometry.vertices[i].inc = randNum(8);
  plane.geometry.vertices[i].seed = randNum(15);
}
var spotlight = new THREE.PointLight(0xffffff);

spotlight.position.set(-20,30,55);

scene.add(spotlight);

//
var render = function () {
  requestAnimationFrame( render );

  update();

  renderer.render(scene, camera);
};

render();

function update(){
  var inc;
  for (i=0;i<plane.geometry.vertices.length;i++){
    plane.geometry.vertices[i].inc+=0.051;
    inc = plane.geometry.vertices[i].inc;
    plane.geometry.vertices[i].scl = Math.cos(inc)*plane.geometry.vertices[i].seed;
    plane.geometry.vertices[i].z=plane.geometry.vertices[i].scl;
  }
  // camera.rotation.y+=.0051;
 ...