使用receiveShadow时的奇怪效果

Question

我正在尝试让 receiveShadow 处理多维数据集。不仅不起作用，而且当我设置 cube.receiveShadow = true 时，立方体上的灯光会显示出奇怪的深色边框（链接到下面的图片）。

没有其他对象，我在场景中几乎只有一个立方体、一个平面和一个聚光灯。

    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

谢谢！

Answer 1

谢谢，将偏差设置为 0 就可以了。 0.001 和 -0.001 都会导致阴影看起来不真实的奇怪效果。