paraGeom + attributes

and its top thickness view

HTML

<div id="info">demo page</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script id="myVertexShader" type="x-shader/x-vertex">
    attribute float vertexHeight;
    varying float varyHeight;

    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        varyHeight = vertexHeight;
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    varying float varyHeight;

    void main() {
        float diffuse = 1.0 - varyHeight;
        gl_FragColor = vec4(diffuse, diffuse, diffuse, 1.0);
    }
</script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ff0000
}

JavaScript

var camera, scene, renderer, geometry, controls;
var clock = new THREE.Clock();
var pointLight, meshMaterial, angle = 0;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    // [x,z]: [-100,100]x[-75,75]
    meshFunc = function (u0, v0) {
        return new THREE.Vector3(-100 + 200 * u0, 6 * Math.random(), 75 - 150 * v0);
    };
    geometry = new THREE.ParametricGeometry(meshFunc, 40, 30);
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    meshMaterial = new THREE.ShaderMaterial({
        // uniform not used...
        uniforms: {
            lightpos: {
                type: 'v3',
                value: new THREE.Vector3()
            }
        },
        attributes: {
            vertexHeight: {
                type: 'f',
                value: []
            }
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });

    material = new THREE.MeshPhongMaterial({
        color: 0xff1234,
        wireframe: true,
        side: THREE.DoubleSide,
    });

    mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.add(mesh);

    pointLight = new THREE.PointLight(0xffffff);
    //light.position.set(100, 300, 200);
    scene.add(pointLight);

    var axis = new THREE.AxisHelper(20);
    scene.add(axis);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    document.body.appendChild(renderer.domElement);
    // mesh.geometry.normalsNeedUpdate = true;
    // mesh.geometry.verticesNeedUpdate = true;

}


function animate() {
/*    
    var time = clock.getElapsedTime();

    var nvs =...