Random Terrain THREE.js

random terrain with perlin noise

by Konstantin Cryman

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

<script type="text/javascript">
/*
 * A speed-improved perlin and simplex noise algorithms for 2D.
 *
 * Based on example code by Stefan Gustavson ([email protected]).
 * Optimisations by Peter Eastman ([email protected]).
 * Better rank ordering method by Stefan Gustavson in 2012.
 * Converted to Javascript by Joseph Gentle.
 *
 * Version 2012-03-09
 *
 * This code was placed in the public domain by its original author,
 * Stefan Gustavson. You may use it as you see fit, but
 * attribution is appreciated.
 *
 */

(function(global){
  var module = global.noise = {};

  function Grad(x, y, z) {
    this.x = x; this.y = y; this.z = z;
  }
  
  Grad.prototype.dot2 = function(x, y) {
    return this.x*x + this.y*y;
  };

  Grad.prototype.dot3 = function(x, y, z) {
    return this.x*x + this.y*y + this.z*z;
  };

  var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0),
               new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1),
               new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)];

  var p = [151,160,137,91,90,15,
  131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
  190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
  88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
  77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
  102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
  135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
  5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
  223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
  129,22,39,253, 19,98,108,110,79,113,224,232,178,185,...

CSS

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

var camera, controls, scene, renderer;

init();
render();

function ctreateNoise( _noise, width, height, scale, seed, startX, startY ){
    console.log( _noise );
    var width = width || 100;
    var height = height || 100;
    var scale = scale || 1;
    var seed = seed || Math.random();
    var startX = startX || 0;
    var startY = startY || 0;
    
    _noise.seed( seed );
    
    var pixels = [];
    
    for( var YY = 0; YY < height; YY++ ){
    		for( var XX = 0; XX < width; XX++ ){
        		pixels.push( parseFloat(_noise.simplex2( (startX+XX)*scale, (startY+YY)*scale ).toFixed(6) ) );
        }
    }
    
    return {
    	data: pixels,
      width: width,
      height: height,
      scale: scale,
      startX: startX,
      startY: startY
    };
};

   
var world = {
    seed: 0.15922414237675842,
    width: 51,
    height: 51,
    scale: 0.04,
    noise: noise,
    heightFactor: 250,
    getData: ( x, y ){
      return ctreateNoise( this.noise, this.width, this.height, 0.02, this.seed, x, y  )
    },
    applyWorldToGeometry: function( geometry, worldOffsetX, worldOffsetY ){
    		var worldData = this.getData( worldOffsetX, worldOffsetY );
        for( var i = 0; i < geometry.vertices.length; i++ ){
            geometry.vertices[i].z = this.heightFactor * (imd.data[i] );
        }
    }
};


var worldGeo = new THREE.PlaneGeometry( 2500, 2500, world.width-1, world.height-1 );

function init() {
    
    
    // renderer
    renderer = new THREE.WebGLRenderer( { antialias: false } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    
    container = document.getElementById( 'container' );
    container.appendChild( renderer.domElement );
    
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 16000 );
    camera.position.z = 700;
    camera.position.y = 0;
    scene.add( camera );
    
    controls = new THREE.OrbitControls( camera );
   ...