阴影中的伪像,使用标准的MeshPhongMaterial

时间:2016-06-17 16:39:42

标签: javascript three.js shadow

我有关于阴影的问题。 这是我面临的问题的图像:

An image is waaay better than a thousand words

enter image description here

我无法理解为什么那里有那些线,它应该是完全点亮的!我不明白为什么实际的阴影看起来非常平滑,边界对于我正在尝试做的事情来说已经足够好了,但后来我把这些线条遍布整个地方。

我的灯光配置:

var dirLight = new THREE.DirectionalLight(0xfeffaf, 1);
dirLight.position.set(dimensions.middlePoint.x, 
    dimensions.middlePoint.y + ( dimensions.lengthY / 2),
    dimensions.middlePoint.z + dimensions.lengthZ);
dirLight.target.position.set(
    dimensions.middlePoint.x, 
    dimensions.middlePoint.y, 
    dimensions.minZ);
dirLight.castShadow = true;
dirLight.shadowDarkness = 0.4;
dirLight.shadowMapWidth = 1024;
dirLight.shadowMapHeight = 1024;
dirLight.shadowCameraNear = 1;
dirLight.shadowCameraFar = dimensions.lengthY * 2;
dirLight.shadowCameraLeft = - dimensions.lengthX / 2;
dirLight.shadowCameraRight = dimensions.lengthX / 2;
dirLight.shadowCameraTop = dimensions.lengthY / 2;
dirLight.shadowCameraBottom = -dimensions.lengthY / 2;
dirLight.shadowBias = 0.0000005;
scene.add(dirLight);

然后是我的渲染配置:

threeRender = new THREE.WebGLRenderer({ antialias: true });
threeRender.shadowMap.enabled = true;
threeRender.shadowMap.renderReverseSided = false;
threeRender.shadowMapSoft = true;
threeRender.shadowMapType = THREE.PCFSoftShadowMap;

请让我知道如何解决这个问题,并指出我正确的方向来解决它。非常感谢你。

1 个答案:

答案 0 :(得分:3)

增加shadowBias的价值。这件神器被称为阴影痤疮:

enter image description here

有关详细信息,请参阅this link