Threejs - Shadows

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<!--
  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_DECK_FLOOR = new DeckDefaults(15);

  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_FRAMING = new DeckDefaults(10);
  
  -->

CSS

body {
  margin:0;
}

JavaScript

var objects = [];
  var scene = new THREE.Scene();
  scene.add( new THREE.AmbientLight( 0x404040 ) );

  var width = window.innerWidth;
  var height = window.innerHeight;

  var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
  var renderer = new THREE.WebGLRenderer();

  renderer.setSize( width, height );
  renderer.setClearColor( 0xcccccc, 1 );
  
  // ## 1 - renderer
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.BasicShadowMap;

  document.body.appendChild( renderer.domElement );
  scene.add(camera);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.screenSpacePanning = true;

  setToFullOrbit(controls)
  camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
  // fix first frame render issue going invisible
  camera.lookAt(new THREE.Vector3(0,0,0));

  var axisHelper = new THREE.AxesHelper();
  scene.add(axisHelper);

  var grid = new THREE.GridHelper(fti(12), 12);
  //scene.add(grid);

  // ---- playground here
	
  // ## 2 - lights
  // lights
  //var dirLight = new THREE.SpotLight('rgb(255,255,255)', 1);
  var dirLight = new THREE.DirectionalLight('rgb(255,255,255)', 1);
  // dirLight.position.set( 5, 7, - 1 );
  dirLight.position.set( 5, 50, - 1 );
  dirLight.lookAt( scene.position );
  // each light needs to set the correct properties for the shadow's camera
  dirLight.castShadow = true;
  // the light's camera projection needs to encompass the area of which shadow will appear
  dirLight.shadow.camera.near = 1;
  dirLight.shadow.camera.far = 100;
  dirLight.shadow.camera.right = 15;
  dirLight.shadow.camera.left = - 15;
  dirLight.shadow.camera.top = 15;
  dirLight.shadow.camera.bottom = - 15;
  // shadow quality
  dirLight.shadow.mapSize.width = 1024;
  dirLight.shadow.mapSize.height = 1024;
  scene.add( dirLight );
  scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

  // ## 3 - recieving object
  var mat = new THREE.MeshPhongMaterial({color:0xcccccc,...