title: Three.js what causes shadow acne and how to fix it
body: <p>In order to let all shadows be rendered, I set <code>shadow.camera.top</code> / <code>bottom</code> / <code>left</code> / <code>right</code> to the directional light (casting shadow), but it causes shadow acne. 
  I try to use <code>shadow.bias</code> but still not right. What causes shadow acne and how to fix it?</p>
  
  <p><a href="https://i.stack.imgur.com/ixiWD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ixiWD.png" alt="enter image description here"></a></p>
  
  <p>Here is my code.</p>
  
  <pre class="lang-js prettyprint-override"><code>light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 38, 82, 1 );
  light.castShadow = true;
  // light.shadow.bias = -0.001;
  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;
  light.shadow.camera.near = 0.1;  // same as the camera
  light.shadow.camera.far = 1000;  // same as the camera
  light.shadow.camera.top = 120;
  light.shadow.camera.bottom = -120;
  light.shadow.camera.left = 120;
  light.shadow.camera.right = -120;
  scene.add( light );
  </code></pre>
  
  <p>Thanks!!</p>