Threejs: Draw quad mesh

Question

I am working on project where the app needs to show quad elements in wifeframe ( quad elements count could be in thousands) and also be able to pick the quad elements. I used 2 face3 to generate a quad, this results in a diagonal edge between the trias. What is a good solution to create quad element

squareGeometry = new THREE.Geometry(); 
squareGeometry.vertices.push(new THREE.Vector3(-1.0,  1.0, 0.0)); 
squareGeometry.vertices.push(new THREE.Vector3( 1.0,  1.0, 0.0)); 
squareGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0)); 
squareGeometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0)); 
squareGeometry.faces.push(new THREE.Face3(0, 1, 2)); 
squareGeometry.faces.push(new THREE.Face3(0, 3, 2));

material = new THREE.MeshBasicMaterial({color: 0x999999, specular: 0x101010, side: THREE.DoubleSide, wireframe: true});
mesh = new THREE.Mesh( squareGeometry, material );
scene.add(mesh)

Update : The suggestions on Three.JS wireframe material - all polygons vs. just edges helps to create wireframe for hard edges. How about for shared edges. Below is a image with four QUAD elements, as seen only the free edges/hard edges are shown in wireframe Note : I am using JsonLoader to load a Json file which has QUAD faces and vertices defining them

Is going towards custom shader a better option to hide the diagonal lines?

4 Quad Shaded

var material = new THREE.MeshPhongMaterial( {
    color: 0xeee000, 
    opacity: 0.5,
    transparent: true,
    side: THREE.DoubleSide,
    shading: THREE.FlatShading,
    polygonOffset: true,
    polygonOffsetFactor: 1, 
    polygonOffsetUnits: 1
} );
mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

var geo = new THREE.EdgesGeometry( mesh.geometry); 
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 1 } );
var wireframe = new THREE.LineSegments( geo, mat );
mesh.add( wireframe );