Question

我有一个简单的场景，一个立方体和一个定向灯，启用了阴影。立方体投射和接收阴影。但是立方体右侧的阴影很奇怪。在shadowcamera中间，阴影变得更暗。为什么呢？

以下是示例：

以下代码：

var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;

var camera, scene;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);


    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
    camera.position.set(500, 500, -1000);
    camera.lookAt({ x: 0, y: 0, z: 0 });
    scene = new THREE.Scene();

    // LIGHTS
    scene.add(new THREE.AmbientLight(0x666666));

    var light;

    light = new THREE.DirectionalLight(0xdfebff, 1.75);
    light.position.set(100, 50, 20);
    light.position.multiplyScalar(1.3);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = light.shadowMapHeight = 2048;

    var d = 200;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowCameraFar = 500;
    light.shadowDarkness = 0.5;

    //light.shadowBias = 0.001;

    scene.add(light);

    var box = new THREE.Mesh(new THREE.CubeGeometry(1000, 500, 100), new THREE.MeshLambertMaterial({ color: 0xFF0000 }));
    box.castShadow = true;
    box.receiveShadow = true;
    scene.add(box);

    // RENDERER
    webglRenderer = new THREE.WebGLRenderer();
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    //webglRenderer.shadowMapSoft = true;
    webglRenderer.shadowMapType = THREE.PCFSoftShadowMap;
    //webglRenderer.sortObjects = false;
    //webglRenderer.setFaceCulling(THREE.CullFaceNone);
    //webglRenderer.autoClear = false;
    //webglRenderer.shadowMapCullFace = THREE.CullFaceNone;

    container.appendChild(webglRenderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    webglRenderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    var timer = Date.now() * 0.0002;
    //camera.position.x = Math.cos(timer) * 1000;
    //camera.position.z = Math.sin(timer) * 1000;
    requestAnimationFrame(animate);
    render();
}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

更新：改变了提琴手代码，现在光线在立方体外面，光线在立方体周围旋转。现在我的问题更加明显了。当光线方向矢量几乎垂直于阴影上的立方体法线时，光影相机中间会有一条尖锐的线条。

新的提琴手代码：http://jsfiddle.net/gbwojcg6/2/

Answer 1

当前设置场景的方式，光源位于对象内部。所以你可以做几件事。

将灯光移动到物体外
减少相机的巨大价值
使用负阴影偏见light.shadowBias = -0.01;

updated fiddle

Answer 2

在r67之前接近问题是three.js，新版本解决了我的问题（在shadowcamera中间的阴影）

三个奇怪的阴影

2 个答案: