阴影贴图出现在错误的地方 [英] Shadow map appearing on wrong place

问题描述

我正在尝试使用three.js 中的内置阴影贴图插件.在最初的困难之后，我或多或少地接受了最后一个故障的图像.那个是出现在一些(所有?)表面上的阴影，法线为 0,0,1.下面是同型号的图片.

I'm trying to make use of the built-in shadow map plugin in three.js. After initial difficulties I have more or less acceptable image with one last glitch. That one being shadow appearing on top some (all?) surfaces, with normal 0,0,1. Below are pictures of the same model.

三个.js

Preview.app (Mac)

Preview.app (Mac)

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

And the code used to setup shadows:

    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/编辑

UPDATE: And a live example over here: http://jsbin.com/okobum/1/edit

推荐答案

您的代码看起来不错.您只需要使用 shadowLight.shadowBias 参数即可.这总是有点棘手.(请注意，bias 参数可以为负.)

Your code looks fine. You just need to play with the shadowLight.shadowBias parameter. This is always a bit tricky. (Note that the bias parameter can be negative.)

收紧近平面和远平面的阴影相机.这将有助于减少阴影痤疮和彼得-平移.例如，您的实时链接，设置 shadowLight.shadowCameraNear = 3*dmax;.这对我有用.

Tighten up your shadow-camera near and far planes. This will help reduce both shadow acne and peter-panning. For example, your live link, set shadowLight.shadowCameraNear = 3*dmax;. This worked for me.

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

You can also try adding depth to your table tops, if it's not already there.

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

You can try setting renderer.shadowMapCullFrontFaces = false. This will cull back faces instead of front ones.

这篇关于阴影贴图出现在错误的地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！