ThreeJs strange shadows - three.js

Question

I have simple scene with one cube and one directional light with shadows enabled.
Cube cast and receive shadow. But shadows on right side of the cube ara strange. In middle of shadowcamera shadow gets darker. Why?
Here is example:
code below:
var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;
var camera, scene;
var canvasRenderer, webglRenderer;
var container, mesh, geometry, plane;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.set(500, 500, -1000);
camera.lookAt({ x: 0, y: 0, z: 0 });
scene = new THREE.Scene();
// LIGHTS
scene.add(new THREE.AmbientLight(0x666666));
var light;
light = new THREE.DirectionalLight(0xdfebff, 1.75);
light.position.set(100, 50, 20);
light.position.multiplyScalar(1.3);
light.castShadow = true;
light.shadowCameraVisible = true;
light.shadowMapWidth = light.shadowMapHeight = 2048;
var d = 200;
light.shadowCameraLeft = -d;
light.shadowCameraRight = d;
light.shadowCameraTop = d;
light.shadowCameraBottom = -d;
light.shadowCameraFar = 500;
light.shadowDarkness = 0.5;
//light.shadowBias = 0.001;
scene.add(light);
var box = new THREE.Mesh(new THREE.CubeGeometry(1000, 500, 100), new THREE.MeshLambertMaterial({ color: 0xFF0000 }));
box.castShadow = true;
box.receiveShadow = true;
scene.add(box);
// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
//webglRenderer.shadowMapSoft = true;
webglRenderer.shadowMapType = THREE.PCFSoftShadowMap;
//webglRenderer.sortObjects = false;
//webglRenderer.setFaceCulling(THREE.CullFaceNone);
//webglRenderer.autoClear = false;
//webglRenderer.shadowMapCullFace = THREE.CullFaceNone;
container.appendChild(webglRenderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
var timer = Date.now() * 0.0002;
//camera.position.x = Math.cos(timer) * 1000;
//camera.position.z = Math.sin(timer) * 1000;
requestAnimationFrame(animate);
render();
}
function render() {
camera.lookAt(scene.position);
webglRenderer.render(scene, camera);
}
UPDATE:
changed fiddler code, now light is outside cube, and light is rotating around cube.
Now my problem is even more visible. When light direction vector is almost perpendicular to cube normal on shadow there is sharp line in the middle of light shadowCamera.
new fiddler code: http://jsfiddle.net/gbwojcg6/2/

Answer 1

The way you have your scene set up currently, the light source is inside the object.
So there are several things you can do.
move the light outside the object
reduce the very big value of camera far
use a negative shadow bias light.shadowBias = -0.01;
updated fiddle

Answer 2

It seams to be an issue with three.js prior r67, new version fix my problem (darker shadow in the middle of shadowcamera)