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

UPDATE: изменил код скрипач, теперь свет находится вне куба, и свет вращается вокруг куба. Теперь моя проблема еще более заметна. Когда вектор направления света почти перпендикулярен к кубу, нормальному по тени, в середине света shadowCamera есть острая линия.

новый код скрипача: http://jsfiddle.net/gbwojcg6/2/

Answer 1

швы быть проблема с three.js до r67, новая версия исправить мою проблему (темная тень в середине shadowcamera)

Answer 2

Путь у вас есть сцена создана в настоящее время, источник света находится внутри объекта. Итак, есть несколько вещей, которые вы можете сделать.

1. движение свет вне объекта
2. уменьшить очень большое значение камеры далеко
3. использовать негативную тень смещения light.shadowBias = -0.01;

updated fiddle