three.js - Three.js シャドウが期待どおりではない

Question

この jsfiddleで立方体の下に影を作成しようとしていますが(以下のコード)、影が大きすぎて、正しい形状でもないと思います。この影の原因は何ですか?どうすれば修正できますか?

ありがとう

var initScene, render,
projector, renderer, scene, ground, light, 
camera, box, pointLight;

projector = new THREE.Projector;

scene = new THREE.Scene;

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColorHex(0x000000, 1);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
document.body.appendChild( renderer.domElement );

light = new THREE.DirectionalLight( 0xFFFFFF );
light.position.set( 20, 80, 0 );
light.target.position.copy( scene.position );
light.castShadow = true;

light.shadowCameraLeft = -60;
light.shadowCameraTop = -60;
light.shadowCameraRight = 60;
light.shadowCameraBottom = 60;
light.shadowCameraNear = 1;
light.shadowCameraFar = 2000;
light.shadowBias = 10;
light.shadowMapWidth = light.shadowMapHeight = 2040;
light.shadowDarkness = .7;

scene.add( light );

box = new THREE.Mesh(
    new THREE.CubeGeometry( 5, 5, 40 ), 
    new THREE.MeshLambertMaterial({ 
        color: 0xffffff, 
        opacity: 0.7, 
        transparent: true, 
        depthWrite: false 
}));
box.position.set( 10, 10, 10 );
box.castShadow = true;
scene.add(box);

ground = new THREE.Mesh(
    new THREE.CubeGeometry(1000, 1, 1000),
    new THREE.MeshLambertMaterial({ 
        color: 0xffffff, 
        opacity: 0.3, 
        transparent: true 
}));
ground.receiveShadow = true;
scene.add( ground );

camera = new THREE.PerspectiveCamera(
    35, window.innerWidth / window.innerHeight, 1, 1000
);
camera.position.set( 100, 100, 100 );
camera.lookAt( scene.position );
scene.add( camera );

renderer.render( scene, camera );
scene.simulate();