title: smooth terrain from height map three js
body: <p>I am currently trying to create some <strong>smooth</strong> terrain using the PlaneBufferGeometry of three.js from a height map I got from Google Images:</p>
  
  <p><a href="https://forums.unrealengine.com/filedata/fetch?id=1192062&amp;d=1471726925" rel="nofollow noreferrer">https://forums.unrealengine.com/filedata/fetch?id=1192062&amp;d=1471726925</a></p>
  
  <p>but the result is kinda choppy..</p>
  
  <p>(Sorry, this is my first question and evidently I need 10 reputation to post images, otherwise I would.. but here's an even better thing: a <a href="http://frame.puppis.uberspace.de/" rel="nofollow noreferrer">live demo</a>! left click + drag to rotate, scroll to zoom)</p>
  
  <p>I want, like i said, a smooth terrain, so am I doing something wrong or is this just the result and i need to smoothen it afterwards somehow?</p>
  
  <p>Also here is my code:</p>
  
  <pre><code>const IMAGE_SRC = 'terrain2.png';
  const SIZE_AMPLIFIER = 5;
  const HEIGHT_AMPLIFIER = 10;
  
  var WIDTH;
  var HEIGHT;
  
  
  var container = jQuery('#wrapper');
  var scene, camera, renderer, controls;
  var data, plane;
  
  image();
  // init();
  
  function image() {
      var image = new Image();
      image.src = IMAGE_SRC;
      image.onload = function() {
          WIDTH = image.width;
          HEIGHT = image.height;
  
          var canvas = document.createElement('canvas');
          canvas.width = WIDTH;
          canvas.height = HEIGHT;
          var context = canvas.getContext('2d');
  
  
          console.log('image loaded');
          context.drawImage(image, 0, 0);
          data = context.getImageData(0, 0, WIDTH, HEIGHT).data;
  
          console.log(data);
  
          init();
      }
  }
  
  function init() {
  
      // initialize camera
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 100000);
      camera.position.set(0, 1000, 0);
  
      // initialize scene
      scene = new THREE.Scene();
  
      // initialize directional light (sun)
      var sun = new THREE.DirectionalLight(0xFFFFFF, 1.0);
      sun.position.set(300, 400, 300);
      sun.distance = 1000;
      scene.add(sun);
  
      var frame = new THREE.SpotLightHelper(sun);
      scene.add(frame);
  
      // initialize renderer
      renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0x000000);
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.append(renderer.domElement);
  
      // initialize controls
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = .05;
      controls.rotateSpeed = .1;
  
      // initialize plane
      plane = new THREE.PlaneBufferGeometry(WIDTH * SIZE_AMPLIFIER, HEIGHT * SIZE_AMPLIFIER, WIDTH - 1, HEIGHT - 1);
      plane.castShadow = true;
      plane.receiveShadow = true;
  
      var vertices = plane.attributes.position.array;
      // apply height map to vertices of plane
      for(i=0, j=2; i &lt; data.length; i += 4, j += 3) {
          vertices[j] = data[i] * HEIGHT_AMPLIFIER;
      }
  
      var material = new THREE.MeshPhongMaterial({color: 0xFFFFFF, side: THREE.DoubleSide, shading: THREE.FlatShading});
  
      var mesh = new THREE.Mesh(plane, material);
      mesh.rotation.x = - Math.PI / 2;
      mesh.matrixAutoUpdate  = false;
      mesh.updateMatrix();
  
      plane.computeFaceNormals();
      plane.computeVertexNormals();
  
      scene.add(mesh);
  
      animate();
  }
  
  function animate() {
      requestAnimationFrame(animate);
  
      renderer.render(scene, camera);
      controls.update();
  }
  </code></pre>