Directional light shadow of boxes is not rendered on plane mesh - three.js

Question

The following light is added to my scene:
var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 1000, 1000, 1000 );
light.castShadow = true;
light.shadow = new THREE.DirectionalLightShadow(
new THREE.OrthographicCamera(
-100, 100,
100, -100, -500, 500 ) );
light.shadow.bias = - 0.00022;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
The plane is as follows:
var planeGeometry = new THREE.PlaneGeometry( 200, 200 );
planeGeometry.rotateX( - Math.PI / 2 );
var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 1;
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = 0;
plane.receiveShadow = true;
scene.add( plane );
The boxes are:
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
for ( var i = 0; i < 20; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.scale.x = Math.random() * 5 + 1;
object.scale.y = Math.random() * 5 + 1;
object.scale.z = Math.random() * 5 + 1;
object.position.x = Math.random() * 30;
object.position.y = object.scale.y / 2.0;
object.position.z = Math.random() * 60;
object.castShadow = true;
object.receiveShadow = true;
scene.add( object );
}
Directional light shadow of boxes is not rendered on plane mesh. Could you pls help what do I wrong? Please refer to the following screenshot.

Answer 1

Some of the shadow map properties have been renamed in the recent versions.
Setting up the renderer for shadow maps (and choosing the more computational expensive shadow map type):
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
Setting up the light (notice how it also works with THREE.PointLight):
var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 12, 0 );
light.castShadow = true; // default false
light.shadow.mapSize.width = 1024; // default 512
light.shadow.mapSize.height = 1024; // default 512
light.shadow.camera.near = 2; // default 0.5
light.shadow.camera.far = 100; // default 500
scene.add( light );

Answer 2

For plane material use var planeMaterial = new THREE.MeshLambertMaterial();
( ShadowMaterial works from r77 https://github.com/mrdoob/three.js/issues/1791)
var renderer = new THREE.WebGLRenderer( {antialias:true, alpha: true } );
renderer.shadowMap.enabled = true; // enable shadows rendering
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // to antialias the shadow
var light_target = new THREE.Object3D(); // believe me
light_target.position.set(0,0,0); // not necessary, but to be clear
var light = new THREE.DirectionalLight( 0xffffff,1.5,1000) );
light.position.set(1000, 1000, 1000);
light.target = light_target;
light.castShadow = true;
light.shadowMapWidth = 2048*2; // px of the rendered shadow texture
light.shadowMapHeight = 2048*2; // px of the rendered shadow texture
var d = 100; /// your plane is 200x200 and we targeted its center
var distance = light.position.distanceTo(light_target.position);
light.shadowCameraLeft = -d;
light.shadowCameraRight = d; light.shadowCameraTop = d; light.shadowCameraBottom = -d; light.shadowCameraNear = distance-d; light.shadowCameraFar = distance+d; light.shadowBias = -0.001;
light.shadowDarkness = 0.5;
scene.add( light ); // you missed this!