title: Weird effect when using receiveShadow
body: <p>I'm trying to get <strong>receiveShadow</strong> to work on a cube. Not only it doesn't work, but when I set <strong>cube.receiveShadow = true</strong>, the light on the cube shows weird dark borders (links to images below).</p>
  <p>There's no other object and I've pretty much only have a cube, a plane, and a spotlight in the scene.</p>
  <pre><code>    let geometry = new THREE.BoxGeometry(5,5,5);
      let material = new THREE.MeshLambertMaterial({color: 0x11bb22});
      let cube = new THREE.Mesh(geometry, material);
      cube.castShadow = true;
      //cube.receiveShadow = true
      scene.add(cube);
  
      light = new THREE.SpotLight(0xffffff, 2, 100, Math.PI/4, 0.1, 0);
      light.position.y = 10;
      light.castShadow = true;
      light.shadow.bias = 0.001;
      light.shadow.mapSize.width = 2048;
      light.shadow.mapSize.height = 2048;
      scene.add(light);
  
      renderer = new THREE.WebGLRenderer();
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFShadowMap;
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  </code></pre>
  <p><a href="https://i.stack.imgur.com/gfkAB.png" rel="nofollow noreferrer">With castShadow=false</a><br />
  <a href="https://i.stack.imgur.com/qJrW1.png" rel="nofollow noreferrer">With castShadow=true</a></p>
  <p>Thanks!</p>