How to enable shadows in Three.js

How do you enable shading in Three.js?

Various examples have shown it should be as simple as assigning THREE.FlatShading to your material, but when I do this, my shape has no shading at all.

My JS:

CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;

var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
    camera = new THREE.PerspectiveCamera( 70, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
    camera.position.z = 400;
    scene = new THREE.Scene();

    var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );

    var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
    material.shading = THREE.FlatShading;
    for(var i=0; i<material.length; i++){
        material[i].shading = THREE.FlatShading;
    }

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    // light
    //scene.add( new THREE.AmbientLight( 0x404040 ) );
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 400, 400, 400 );
    scene.add( light );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
    container = document.getElementById( 'accelgyro_canvas' );
    container.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
    camera.aspect = window.ierWidth / window.ierHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.ierWidth, window.ierHeight );
}
function animate() {
console.log('animate')
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render( scene, camera );
}

And this renders by cube as:

I've tried adjusting the light angles, adding/removing ambient light, changing which object I add the FlatShading to and nothing seems to help.

How do I fix this?