Не работает тень в three js

Не могу настроить тень. Что не так?

window.onload = function(){
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);

var renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
camera.position.set(0, 0, 1000);
var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(50, 500, 22);
light.target.position.set(300, 400, 200);
light.castShadow = true;
scene.add(light);
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add(helper);
var geometry = new THREE.SphereGeometry(200, 12, 12);
var material = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});
for (var i = 0; i < geometry.faces.length; i++) {
    geometry.faces[i].color.setRGB(Math.random(),Math.random(),Math.random());
}
var mesh = new THREE.Mesh(geometry,material);
mesh.receiveShadow = true;               
mesh.castShadow = true;
       scene.add(mesh);
//var geometry2 = new THREE.BoxGeometry( 10000, 50, 10000, 1, 1, 1);
var geometry2 = new THREE.PlaneGeometry(10000,10000,1,1);
var material2 = new THREE.MeshLambertMaterial( {color: 0x00ee00} );
var plane2 = new THREE.Mesh( geometry2, material2 );
plane2.receiveShadow = true;
plane2.castShadow = true;
plane2.rotation.x = -Math.PI / 2;
plane2.position.y = -400;
   scene.add( plane2 );
   function loop(){
      renderer.render(scene,camera);
      requestAnimationFrame(function(){loop();});
   }
     loop();
   }