Fill three.js scene with a grid

Since ThreeJS r57 onwards, there is a helper called GridHelper using which you can easily draw a nice grid, just like any other geometric object.

GridHelper takes 2 parameters. First one is the size of the grid and the 2nd one is the size of the step between 2 lines

Below is the code to draw the grid on the scene, with the size = 100 and step = 10

var grid = new THREE.GridHelper(100, 10);
scene.add(grid);

In your case, you can avoid having a method called drawGrid and directly replace that with the above two lines code, or you can add these above two lines of code with in the drawgrid method.

A live example is available here in the following link

Grid Helper Example

You can draw a grid like this.

// each square
var planeW = 50; // pixels
var planeH = 50; // pixels 
var numW = 50; // how many wide (50*50 = 2500 pixels wide)
var numH = 50; // how many tall (50*50 = 2500 pixels tall)
var plane = new THREE.Mesh(
    new THREE.PlaneGeometry( planeW*numW, planeH*numH, planeW, planeH ),
    new THREE.MeshBasicMaterial( {
        color: 0x000000,
        wireframe: true
    } )
);

scene.add(plane);