0

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

三.js 三.js

Preview.app (Mac)

预览.app

以及用于设置阴影的代码：

    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

4

1 回答 1

0

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

编辑：收紧你的阴影相机近平面和远平面。这将有助于减少阴影粉刺和彼得潘。例如，您的实时链接 set shadowLight.shadowCameraNear = 3*dmax;。这对我有用。

如果还没有，您也可以尝试增加桌面的深度。

你可以试试设置renderer.shadowMapCullFrontFaces = false。这将剔除背面而不是正面。

于 2012-10-17T17:11:10.063 回答