Why doesn't lighting work on three.js?

Question

three.js

I started learning three.js, and the first problems appeared.
Here's what happens in the browser:

And the code itself:

$(function () {
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45,
    window.innerWidth / window.innerHeight,
    0.1, 1000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xEEEEEE, 1)
  renderer.setSize(window.innerWidth, window.innerHeight);

  // Добавляем Оси 
  var axes = new THREE.AxisHelper( 20 );
  scene.add(axes);

  // Создаём, настраиваем и добавляем плоскость
  var planeGeometry = new THREE.PlaneGeometry(60,20);
  var planeMaterial = new THREE.MeshLambertMaterial(
    {color: 0xffffff});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5*Math.PI;
  plane.position.x = 15;
  plane.position.y = 0;
  plane.position.z = 0;
  scene.add(plane);

  // Создаём, настраиваем и добавляем куб и сферу
  var cubeGeometry = new THREE.CubeGeometry(4,4,4);
  var cubeMaterial = new THREE.MeshLambertMaterial(
    {color: 0xff0000});
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = -4;
  cube.position.y = 3;
  cube.position.z = 0;
  scene.add(cube);

  var sphereGeometry = new THREE.SphereGeometry(4,20,20);
  var sphereMaterial =new THREE.MeshLambertMaterial(
    {color: 0x7777ff, wireframe: true});
  var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 20;
  sphere.position.y = 4;
  sphere.position.z = 2;
  scene.add(sphere);

  // Позиция камеры и рендеринг
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);
  $('#WebGL-output').append(renderer.domElement);
  renderer.render(scene, camera);

  // Добовляем освещение
  var spotLight = new THREE.SpotLight( 0xffffff );
  spotLight.position.set(-40, 60, -10);
  scene.add(spotLight);
});