THREE.js (r60) PointLight not reflected by a special plane object (heightmapped from image)

I have a complex app using THREE.js (r60) which adds a special plane object to the main scene. The plane geometry is determined by heightmapping from an internally-supplied base64 uri image (size 16x16, 32x32 or 64x64 pixels). The scene has two static lights (ambient and directional) and one moveable point light which switches on and off.

In the complex app the point light is not reflected by the plane object. (Point light is toggled by pressing "R" key or button).

I have made a first JSFiddle example using THREE.js latest version (r70) where the lights work fine.

[Update] I have now made a second JSFiddle example using the older THREE.js library (r60) it also works OK.

I suspect the problem in the complex app (r60) may have something to do with system capacity and or timing/sequencing. Capacity is definitely an issue because other simpler scene objects (boxes and cylinders) show individual responses or non-responses to the point light which vary from one run of the app to the next, seemingly depending on the overall level of system activity (cpu, memory usage). These simpler objects may reflect in one run but not in the next. But the heightmapped plane object is consistently non-reflective to the point light. These behaviors are observed on (i) a Win7 laptop and (ii) an Android Kitkat tablet.

The heightmapping process may be part of the cause. I say this because when I comment out the heightmapped plane and activate a simple similar plane object (with randomly assigned z-levels) the latter plane behaves as expected (i.e. it reflects point light).

I guess that the usual approach now would be to upgrade my complex app to r70 (not a trivial step) and then start disabling chunks of the app to narrow down the cause. However it may be that the way in which heightmapping is implemented (e.g. with a callback) is a factor in explaining the failure of the heightmapped plane to reflect point light.

[RE-WRITTEN] So I would be grateful if anyone could take a look at the code in the correctly-working, previously-cited, (r70) JSFiddle example and point out any glaring design faults which (if applied in more complex, heavilly-loaded apps) might lead to failure of the height-mapped plane to reflect point light.

Full code (javascript, not html or css) of the (r70) JSFiddle:-

//... Heightmap from Image file 
//... see http://ift.tt/1Aq9Htw

var camera, scene, renderer;
var lpos_x = -60,lpos_y = 20,lpos_z = 100;
var mz = 1;
var time = 0, dt = 0;
var MyPlane, HPlane;

base64_imgData = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAASAAAATgAAAAAAAAB4AAAAAQAAAHgAAAABUGFpbnQuTkVUIHYzLjUuMTAA/9sAQwANCQoLCggNCwsLDw4NEBQhFRQSEhQoHR4YITAqMjEvKi4tNDtLQDQ4RzktLkJZQkdOUFRVVDM/XWNcUmJLU1RR/9sAQwEODw8UERQnFRUnUTYuNlFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFR/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19Z8SXdu5KOMKxBAFOi1uTUdNJguxFcAchv6Vz2so/mzKc8sc8VX8MyQjUVWYNweCO9AEsOuX8s+xrqWQh8DJ4rsJCphSN3Czsm7ArG1bT7fSFe7EZJzuX3J6VQsdRnvryJ2+/wooA6O501JY7yRh0U8Vyg1WzsghhsAkqnBO4nd713t8NsEqIhJfqRXEahotxPJlISDnOaANzWvL1rR4JiTG6ryorG0C2aDUI02lhu6kVZ02wvLVSpYtu65yRXQaZYvDL5rhRx2oA//2Q==";

init();
animate();

//==================================================================

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10);
    camera.position.x = 1300;
    camera.position.y = 400;
    camera.position.z = 0;
    camera.lookAt(0, 0, 0);
    scene.add(camera);    

    scene.add(new THREE.AmbientLight(0x001900));

    SunLight = new THREE.DirectionalLight(0xff0000,.3,20000);//...color, intensity, range.
    SunLight.position.set(0, 3000, -8000);
    scene.add(SunLight);

    //POINT LIGHT
    PL_color = 0x0000ff;
    PL_intensity = 10;
    PL_range_to_zero_intensity = 1200;
    PL = new THREE.PointLight(PL_color, PL_intensity, PL_range_to_zero_intensity);
    scene.add(PL);
    PL_pos_x = -100;
    PL_pos_y = -100;
    PL_pos_z = 120;
    PL.position.set(PL_pos_x, PL_pos_y, PL_pos_z);

    //INDICATOR SPHERE
    var s_Geometry = new THREE.SphereGeometry(5, 20, 20);
    var s_Material = new THREE.MeshBasicMaterial({
        color: 0xaaaaff
    });
    i_Sphere = new THREE.Mesh(s_Geometry, s_Material);
    i_Sphere.position.set(PL_pos_x, PL_pos_y, PL_pos_z);
    scene.add(i_Sphere);


    //Plane02
    var Plane02Geo = new THREE.PlaneGeometry(50, 50); //...   
    var Plane02Material = new THREE.MeshPhongMaterial({
        side: THREE.DoubleSide
    }, {
        color: 0xaaaaaa
    });

    Plane02 = new THREE.Mesh(Plane02Geo, Plane02Material);
    Plane02.position.set(0, 0, -120);
    scene.add(Plane02);

    //PEAS

    xxx = SOW_F_Make_peas();

    //RENDERER
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);

    // controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    xxx = SOW_F_Make_Heightmap_Object_from_Image_File(scene, camera);

    } //...EOFunction Init

//==================================================================

function animate() {
    dt = 0.1;
    time += dt;

    if (time < 10000) {
        requestAnimationFrame(animate);

        //move point light & indicator sphere

        speed = 16;
        if (Math.abs(PL_pos_z) > 400) mz = (-1)* mz;

        PL_pos_x += 0.01 * speed * mz;
        PL_pos_y += 0.05 * speed * mz;
        PL_pos_z -= 0.2 * speed * mz;

        PL.position.set(PL_pos_x, PL_pos_y, PL_pos_z);
        i_Sphere.position.set(PL_pos_x, PL_pos_y, PL_pos_z);

        renderer.render(scene, camera);
    } else alert("Time=" + time + "Finished");

}
//==================================================================




function SOW_F_Make_Heightmap_Object_from_Image_File(givenScene, givenCamera) {

    //... Read a Heightmap from a coloured image file 
    //... into a (pre-defined global) plane object called HPlane


    MyImage = new Image();

    MyImage.onload = function () {

        var MyPlane_width = 1000;//6000; //...MyPlane width or height are in scene units and do not have to match image width or height
        var MyPlane_height = 1000;//6000;

        var MyPlane_w_segs = MyImage.naturalWidth - 1; //... important that this mapping is correct for texture 1 pixel :: 1 segment.
        var MyPlane_h_segs = MyImage.naturalHeight - 1; //... important that this mapping is correct for texture 1 pixel :: 1 segment.
        var Hgeometry = new THREE.PlaneGeometry(MyPlane_width, MyPlane_height, MyPlane_w_segs, MyPlane_h_segs);


        //var texture = THREE.ImageUtils.loadTexture( '/images/Tri_VP_Texturemap.jpg' );
        var texture = THREE.ImageUtils.loadTexture( base64_imgData );

        //... Choose texture or color
        //var Hmaterial = new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide} );//....fails 

        var Hmaterial = new THREE.MeshPhongMaterial( { 
            color: 0x111111 , side: THREE.DoubleSide } ); //... works OK

        HPlane = new THREE.Mesh(Hgeometry, Hmaterial);

        //...get Height Data from Image

        var scale = 0.6;//1//6; //0.25;      
        var Height_data = DA_getHeightData(MyImage, scale);

        //... set height of vertices
        X_offset = 0;
        Y_offset = 0;
        Z_offset = -100; //...this will (after rotation) add to the vertical height dimension (+ => up).

        for (var iii = 0; iii < HPlane.geometry.vertices.length; iii++) {
            //HPlane.geometry.vertices[iii].x = X_offset; 
            //HPlane.geometry.vertices[iii].y = Y_offset; 

            HPlane.geometry.vertices[iii].z = Z_offset + Height_data[iii];

        }  

//----------------------------------------------------------------------

//... Must do it in this order...Faces before Vertices
//... see WestLangley's response in  http://ift.tt/1BsLF3S


        HPlane.rotation.x = (-(Math.PI) / 2); //... rotate MyPlane -90 degrees on X
        //alert("Rotated");

        HPlane.geometry.computeFaceNormals(); //... for Lambert & Phong materials
        HPlane.geometry.computeVertexNormals(); //... for Lambert & Phong materials

/*        
        HPlane.updateMatrixWorld();
        HPlane.matrixAutoUpdate = false;
        HPlane.geometry.verticesNeedUpdate = true;
*/
        givenScene.add(HPlane);
        HPlane.position.set(0, -150, 0);//... cosmetic

        //return HPlane; //... not necessary, given that HPlane is global.

    } ;  //... End of MyImage.onload = function ()  



    //===============================================================

    //... *** IMPORTANT ***

    //... Only NOW do we command the script to actually load the image source

    //... This .src statement will load the image from file into MyImage object 
    //... and invoke the pre-associated MyImage.OnLoad function

    //... cause cross-origin problem: MyImage.src = '/images/Tri_VP_Heightmap_64x64.jpg'; //...if image file is local to this html file.

    MyImage.src = base64_imgData;//... uses image data provided in the script to avoid Cross-origin file source restrictions.

} //... End of function SOW_F_Make_Heightmap_Object_from_Image_File

//===========================================================================

function DA_getHeightData(d_img, scale) {

    //... This is used by function SOW_F_Make_Heightmap_Object_from_Image_File.

    //if (scale == undefined) scale=1;

    var canvas = document.createElement('canvas');
    canvas.width = d_img.width; //OK
    canvas.height = d_img.height;
    var context = canvas.getContext('2d');

    var size = d_img.width * d_img.height;
    var data = new Float32Array(size);

    context.drawImage(d_img, 0, 0);

    for (var ii = 0; ii < size; ii++) {
        data[ii] = 0;
    }

    var imgData = context.getImageData(0, 0, d_img.width, d_img.height); 

    var pix = imgData.data; //... Uint(8) UnClamped Array[1024] for a 16x16 = 256 pixel image = 4 slots per pixel.

    var jjj = 0;

    //... presumably each pix cell can have value 0 to 255
    for (var iii = 0; iii < pix.length; iii += 4) {
        var all = pix[iii] + pix[iii + 1] + pix[iii + 2]; 
        //... I guess RGBA and we don't use the fourth cell (A, = Alpha channel)
        jjj++;
        data[jjj] = all * scale / 3; //...original code used 12 not 3 ??? and divided by scale.
        //console.log (iii, all/(3*scale), data[jjj]);
    }

    return data;

} //... end of function DA_getHeightData(d_img,scale)

//==================================================================================================

function SOW_F_Get_A_Plane(givenScene, givenCamera) {

    //...MyPlane width or height are in scene units and do not have to match image width or height
    var MyPlane_width = 1000;
    var MyPlane_height = 1000;

    var MyPlane_w_segs = 64; //... 
    var MyPlane_h_segs = 64; //... 

    geometry = new THREE.PlaneGeometry(MyPlane_width, MyPlane_height, MyPlane_w_segs, MyPlane_h_segs);

    //var material = new THREE.MeshLambertMaterial( { color: 0xeeee00, side: THREE.DoubleSide} ); 

    var material = new THREE.MeshPhongMaterial({
        color: 0xeeee00,side: THREE.DoubleSide
    }); //... OK

    MyPlane = new THREE.Mesh(geometry, material);

    givenScene.add(MyPlane);

    MyPlane.rotation.x = (-(Math.PI) / 2); //  rotate it -90 degrees on X
    MyPlane.position.set(0, 100, 0);

    MyPlane.geometry.computeFaceNormals(); //...for Lambert & Phong materials
    MyPlane.geometry.computeVertexNormals(); //...for Lambert & Phong materials
    /*
    MyPlane.geometry.verticesNeedUpdate = true;
    MyPlane.updateMatrixWorld();
    MyPlane.matrixAutoUpdate = false;
    */

} //... EOF SOW_F_Get_A_Plane
//====================================================================

function SOW_F_Make_peas()
{
//----------------- Make an array of spheres -----------------------

Pea_geometry = new THREE.SphereGeometry(5,16,16);
//Pea_material = new THREE.MeshNormalMaterial({ shading: THREE.SmoothShading});
Pea_material = new THREE.MeshPhongMaterial({ color: 0xaa5522});

        // global... 
        num_peas = 1200;

        for (var iii = 0; iii < num_peas; iii++) 
        {
            //...now global 
            ob_Pea = new THREE.Mesh(Pea_geometry, Pea_material);

            ob_Pea.position.set(
            400 * Math.random() - 150, 
            300 * Math.random() - 150, 
            1200 * Math.random() - 150);        

            scene.add(ob_Pea);//TEST

        }

}