Monument Water

              
                var camera, scene, renderer;
var geometry, material, mesh;
(function() {

  init();
  animate();

  var displacement = 50;

  function init() {

    var width = window.innerWidth;
    var height = window.innerHeight;
    camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 100009);

    camera.position.z = 1000;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene = new THREE.Scene();

    geometry = new THREE.PlaneGeometry(2000, 2000, 20, 20);

    for (var i = 0; i < geometry.vertices.length; i++) {

      geometry.vertices[i].z = -(25) + Math.random() * 50;

    }
    geometry.computeFaceNormals();

    generateMorphTargets(geometry);

    var ambientLight = new THREE.AmbientLight(0x333333);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(-10, -10, 5).normalize();
    scene.add(directionalLight);

    material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      // wireframe: true,
      morphTargets: true
    });
    material = new THREE.MeshPhongMaterial({
      color: '#1295AB',
      morphTargets: true,
      morphNormals: true,
      // light
      specular: '#7BAEBD',
      shading: THREE.FlatShading,
      // intermediate
      // color: '#00abb1',
      // dark
      emissive: '#006063',
      shininess: 100
    });
    mesh = new THREE.Mesh(geometry, material);

    mesh.rotation.x = 60 * (Math.PI / 180);
    mesh.rotation.z = 45 * (Math.PI / 180);
    mesh.position.z = 100;

    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({
      antialiasing: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

  }

  function generateMorphTargets(geometry) {

    var vertices = [];

    for (var i = 0; i < geometry.vertices.length; i++) {

      vertices.push(geometry.vertices[i].clone());

      vertices[vertices.length - 1].z = -25 + Math.random() * 50;

    }

    geometry.morphTargets.push({
      name: 'target1',
      vertices: vertices
    });

    // geometry.morphTargetsNeedUpdate = true;
    // geometry.updateMorphTargets();

  }

  function animate() {

    var time = Date.now() * 0.001;

    mesh.morphTargetInfluences[0] = (1 + Math.sin(4 * time)) / 2;
    // mesh.morphTargetInfluences[ 0 ] = 1;
    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);
    geometry.computeMorphNormals();

    mesh.rotation.z += 0.0002;

    renderer.render(scene, camera);

  }

})();
              
            

!