title: three.js DirectionalLight and shadow cut off
body: <p>As per the screenshot, shadows cast onto the THREE.PlaneGeometry(250, 380, 1, 1) below are cut off.</p>
  
  <p><a href="https://i.stack.imgur.com/D9MyT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D9MyT.png" alt="scene"></a></p>
  
  <h2>Steps I've taken to enable shadows</h2>
  
  <pre><code>renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  </code></pre>
  
  <p>..</p>
  
  <pre><code>camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
  </code></pre>
  
  <p>..</p>
  
  <pre><code>mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
  mainLight.position.set(50, 50, 50);
  mainLight.castShadow = true;
  mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
  mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
  mainLight.shadow.camera.near = 1;
  mainLight.shadow.camera.far = 1000;
  mainLight.shadow.camera.fov = 100;
  scene.add(mainLight);
  </code></pre>
  
  <p>..</p>
  
  <pre><code>plane.receiveShadow = true;
  </code></pre>
  
  <p>..</p>
  
  <pre><code>model.castShadow = true;
  model.receiveShadow = true;
  </code></pre>
  
  <hr>
  
  <p>I've played with different values like the shadow camera FOV and far plane values...</p>
  
  <p>Is this a caveat with using DirectionalLight? I need even lighting across all of my models, as opposed to SpotLight.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/10912143/three-js-shadow-cutoff">three.js shadow cutoff</a> but it simply suggested using a SpotLight instead and gave no explanation as to why that changes anything.</p>
  
  <p>When I do use a SpotLight, I suddenly lose shadows on ground plane altogether. </p>
  
  <p>--
  Thanks</p>