THREE.PlaneGeometry doesn't get rendered

Question

I've tried playing around with the tutorial from aerotwist. Everything went well, until I messed with THREE.PlaneGeometry, as the code below:

var $container = $('#container');
var WIDTH = $container.width(), HEIGHT = $container.height();
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var scene = new THREE.Scene();
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);

// create the mesh's material
var meshMaterial = new THREE.MeshBasicMaterial({color:0xCC0000});
var mesh = new THREE.Mesh(new THREE.CubeGeometry(100,100,1,1),meshMaterial);

// add the mesh to the scene
scene.add(mesh);
scene.add(camera);
renderer.render(scene, camera);

When I change the line from

var mesh = new THREE.Mesh(new THREE.CubeGeometry(100,100,1,1),meshMaterial);

to

var mesh = new THREE.Mesh(new THREE.PlaneGeometry(100,100,1,1),meshMaterial);

or

var mesh = new THREE.Mesh(new THREE.PlaneGeometry(100,100),meshMaterial);

Then nothing is rendered. What is wrong?

Answer 1

It's possible that its not double sided or that you can't see it on its current angle, check this js fiddle of plane rotating and play around with that one for practice.

EDIT:

Looks like the plane faces down so the camera can't see it, I changed the mesh.rotation.x to prove it does render.

See - updated example