three.js - Weird effect when using receiveShadow

Question

I'm trying to get receiveShadow to work on a cube. Not only it doesn't work, but when I set cube.receiveShadow = true, the light on the cube shows weird dark borders (links to images below).

There's no other object and I've pretty much only have a cube, a plane, and a spotlight in the scene.

    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);

With castShadow=false
With castShadow=true

Thanks!

question from:https://stackoverflow.com/questions/65845187/weird-effect-when-using-receiveshadow

Answer 1

Thanks, setting the bias to 0 did the trick. both 0.001 and -0.001 cause weird effects where the shadow does not look realistic.