title: three.js: Bright edges in shadows
body: <p>It seems that when an object casts and receives shadows you get this bright edge that looks like light bleeding through. Is there any way to overcome this? In the snippet I give here you can see that the shadow from the cylinder on the two cubes doesn't have the issue in the picture, but on the back is where you see the line happening.</p>
  
  <p><a href="https://i.stack.imgur.com/LyRee.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LyRee.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>width = window.innerWidth
  height = window.innerHeight
  
  renderer = new THREE.WebGLRenderer({antialias: true})
  renderer.setClearColor(0xeeeeee)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(width, height)
  document.body.appendChild(renderer.domElement)
  
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 3000)
  camera.position.set(-45, 47, 75)
  controls = new THREE.OrbitControls(camera, renderer.domElement)
  controls.minDistance = 40
  controls.maxDistance = 1300
  material = new THREE.MeshPhongMaterial({color: 0xFF0000, specular: 0x111111, shininess: 75})
  
  scene.add(camera, new THREE.AmbientLight(0xffffff, 0.4))
  light = new THREE.PointLight(0xffffff, 0.8)
  
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFShadowMap
  light.castShadow = true
  light.shadow.mapSize.width = 3072
  light.shadow.mapSize.height = 3072
  light.shadow.camera.left = 500
  
  function shadow(w) {
    w.castShadow = true
    w.receiveShadow = true
  }
  
  camera.add(light)
  light.position.y += 60
  light.position.x += 70
  
  requestAnimationFrame(function animate(){
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  })
  
  b = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20), material)
  shadow(b)
  scene.add(b)
  
  c = new THREE.Mesh(new THREE.CylinderGeometry(5,5,10,32), material)
  c.position.set(3,15,3)
  shadow(c)
  scene.add(c)
  
  d = new THREE.Mesh(new THREE.BoxGeometry(20, 10, 1), material)
  d.position.set(3,15,-5)
  shadow(d)
  scene.add(d)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://threejs.org/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>