阴影贴图出现在错误的地方

Question

我正在尝试使用three.js中的内置阴影贴图插件。在最初的困难之后，我有一个或多或少可接受的图像与最后一个故障。那个是阴影出现在一些（全部？）表面上，正常为0,0,1。以下是相同型号的图片。

three.js所

Preview.app（Mac）

用于设置阴影的代码：

    var shadowLight = new THREE.DirectionalLight(0xFFFFFF);
    shadowLight.position.x = cx + dmax/2;
    shadowLight.position.y = cy - dmax/2;
    shadowLight.position.z = dmax*1.5;
    shadowLight.lookAt(new THREE.Vector3(cx, cy, 0));
    shadowLight.target.position.set(cx, cy, 0);
    shadowLight.castShadow = true;
    shadowLight.onlyShadow = true;
    shadowLight.shadowCameraNear    =  dmax;
    shadowLight.shadowCameraFar     =  dmax*2;
    shadowLight.shadowCameraLeft    = -dmax/2;
    shadowLight.shadowCameraRight   =  dmax/2;
    shadowLight.shadowCameraBottom  = -dmax/2;
    shadowLight.shadowCameraTop     =  dmax/2;
    shadowLight.shadowBias          =  0.005;
    shadowLight.shadowDarkness      =  0.3;
    shadowLight.shadowMapWidth      =  2048;
    shadowLight.shadowMapHeight     =  2048;
    // shadowLight.shadowCameraVisible = true;
    scene.add(shadowLight);

更新：这里有一个实例：http://jsbin.com/okobum/1/edit

Answer 1

您的代码看起来很好。您只需要使用shadowLight.shadowBias参数即可。这总是有点棘手。 （请注意，偏差参数可以是负数。）

编辑：收紧你的影子相机近和远的飞机。这将有助于减少阴影痤疮和peter-panning。例如，您的实时链接设置为shadowLight.shadowCameraNear = 3*dmax;。这对我有用。

您还可以尝试在桌面上添加深度（如果它尚未存在）。

您可以尝试设置renderer.shadowMapCullFrontFaces = false。这将剔回脸部而不是前脸。