In Three.js DirectionalLight not cast shadow to plane - three.js

Question

I can't cast shadow to a plane with directional light in three.js r79.
I have tried every thing, but never worked.
I added a CameraHelper to scene, and all things were inside the area by yellow lines around.But it just doesn't work...
Here's the screen shot:
code:
function init(canvas) {
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas,
//alpha: true
});
//renderer.setClearColor(0x777777);
renderer.shadowMap.enabled = true;
renderer.shadowMap.soft = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.needsUpdate = true;
renderer.setSize(innerWidth, innerHeight);
renderer.autoClear = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
const scene = new THREE.Scene();
const pCamera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 2000);
pCamera.position.x = 300;
pCamera.position.y = -200;
pCamera.position.z = 50;
pCamera.lookAt({x: 0, y: 0, z: -200});
scene.add(pCamera);
//const controls = new THREE.OrbitControls(pCamera, canvas);
//controls.maxPolarAngle = Math.PI * 0.5;
//controls.minDistance = 1000;
//controls.maxDistance = 7500;
const directLight = new THREE.DirectionalLight(0xffffff, 1);
directLight.position.x = 400;
directLight.position.y = 2000;
directLight.position.z = 500;
directLight.castShadow = true;
directLight.shadow.camera.far = 300;
directLight.shadow.camera.near = 100;
directLight.shadow.mapSize.width = 1024;
directLight.shadow.mapSize.height = 1024;
directLight.shadow.bias = 0.0039;
const d = 100;
directLight.shadow.camera.left = -d;
directLight.shadow.camera.right = d;
directLight.shadow.camera.top = -d;
directLight.shadow.camera.bottom = d;
scene.add(directLight);
const cameraHelper = new THREE.CameraHelper(directLight.shadow.camera);
scene.add(cameraHelper);
const cube = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50), new THREE.MeshLambertMaterial({color: 0xcc0000}));
cube.position.z = -200;
cube.castShadow = true;
scene.add(cube);
const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshLambertMaterial({color: 0x22ff11}));
plane.receiveShadow = true;
plane.position.z = -215;
scene.add(plane);
scene.add(new THREE.AmbientLight(0x212223, 0.1));
return function () {
renderer.render(scene, pCamera);
};
}