Three.js阴影不如预期

Question

我试图在this jsfiddle（代码如下）的立方体下创建一个阴影，但阴影变得太大了，我也不认为是正确的形状。什么导致这个阴影，我该如何解决它？

感谢

var initScene, render, 
projector, renderer, scene, ground, light, 
camera, box, pointLight; 

projector = new THREE.Projector; 

scene = new THREE.Scene; 

renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColorHex(0x000000, 1); 
renderer.shadowMapEnabled = true; 
renderer.shadowMapSoft = true; 
document.body.appendChild(renderer.domElement); 

light = new THREE.DirectionalLight(0xFFFFFF); 
light.position.set(20, 80, 0); 
light.target.position.copy(scene.position); 
light.castShadow = true; 

light.shadowCameraLeft = -60; 
light.shadowCameraTop = -60; 
light.shadowCameraRight = 60; 
light.shadowCameraBottom = 60; 
light.shadowCameraNear = 1; 
light.shadowCameraFar = 2000; 
light.shadowBias = 10; 
light.shadowMapWidth = light.shadowMapHeight = 2040; 
light.shadowDarkness = .7; 

scene.add(light); 

box = new THREE.Mesh(
    new THREE.CubeGeometry(5, 5, 40), 
    new THREE.MeshLambertMaterial({ 
     color: 0xffffff, 
     opacity: 0.7, 
     transparent: true, 
     depthWrite: false 
})); 
box.position.set(10, 10, 10); 
box.castShadow = true; 
scene.add(box); 

ground = new THREE.Mesh(
    new THREE.CubeGeometry(1000, 1, 1000), 
    new THREE.MeshLambertMaterial({ 
     color: 0xffffff, 
     opacity: 0.3, 
     transparent: true 
})); 
ground.receiveShadow = true; 
scene.add(ground); 

camera = new THREE.PerspectiveCamera(
    35, window.innerWidth/window.innerHeight, 1, 1000 
); 
camera.position.set(100, 100, 100); 
camera.lookAt(scene.position); 
scene.add(camera); 

renderer.render(scene, camera); 
scene.simulate(); 

Answer 1

出于某种原因，我不能去拨弄但是从我看到你的立方体是（10,10,10），大小5，你的光在（20,80， 0）。我的第一个猜测是你的光线非常接近立方体。尝试将灯光移动到（200,200,0），看看会发生什么。