Rendering custom geometry in Three.js

Rendering custom geometry in Three.js

I am trying to draw a quad between four vertices in the space using
three.js. I have written the following code but it doesn't work:
var a = { x:10,
y:10}
var b = {x:50,
y:50}
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y - 60, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.faces.push( new THREE.Face3(0,1,2) );
geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
where am I making a mistake? By the way, to render quads, can I use Face4
or do I have to use Face3? Is there any good source for learning webgl
features all in one place? Three.js documentation is very well organized
and complete.