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），看看會發生什麼。