ThreeJs 奇怪的阴影

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);
}

更新： 更改了提琴手代码，现在光在立方体之外，并且光围绕立方体旋转。 现在我的问题更加明显。当光照方向向量几乎垂直于阴影上的立方体法线时，光照shadowCamera的中间有一条锐线。

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

Answer 1

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

1. 将灯光移到对象之外
2. 大大降低相机的价值
3. 使用负阴影偏差light.shadowBias = -0.01;

updated fiddle

Answer 2

这似乎是 r67 之前的 three.js 的问题，新版本修复了我的问题（shadowcamera 中间的阴影较暗）