Why do shadows penetrate my materials in three.js?

Question

Why do shadows penetrate my materials in three.js?

I have a three.js script that displays a 3D model. I use DirectionalLightto cast a shadow on this model.

What I see is the effect of a power-law gradient effect against the model, as if the model consists of many submodels, each of which has its own small shadow.

Below is a screenshot:

Why is this happening and how can I prevent it?

Some fragments of code - there is a lot going on in this scene, so I tried to simply highlight the important parts:

Camera and directional light source:

// Camera
camera = new THREE.PerspectiveCamera( 30, (window.innerWidth / window.innerHeight), 1, 10000 );
camera.position.x = 1000;
camera.position.y = 50;
camera.position.z = 1500;
scene.add( camera );

// LIGHTS
var lightFront = new THREE.DirectionalLight( 0xffffff, 0.7 );
lightFront.position.x = 120;
lightFront.position.y = 120;
lightFront.position.z = 150;
lightFront.castShadow = true;

lightFront.shadow.camera.left = -6;
lightFront.shadow.camera.right = 6;
scene.add( lightFront );

Material is THREE.Mesh, with:

material.normalScale = new THREE.Vector2( 1, 1 );
material.castShadow = true;
material.receiveShadow = false;
material.shininess = 100;

Renderer has the following:

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.soft = true;
renderer.shadowMap.bias = 0.0039;
renderer.shadowMap.darkness = 0.5;
renderer.shadowMap.width = 1024;
renderer.shadowMap.height = 1024;