three.js所平面不投射陰影

Question

我堆疊平面上更大的飛機頂部球體，如下面的圖像

從WebGL的檢查中所看到的，似乎一切3個物體的陰影貼圖繪製，但只有球體有效地出現在陰影貼圖，導致小飛機從來沒有投對大

陰影下面是現場施工

renderer.shadowMap.enabled = true 

camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 5000); 
camera.position.z = 600; 
window.controls = new THREE.OrbitControls(camera, renderer.domElement); 


light = new THREE.SpotLight(0xffffff, 1, 0, Math.PI/2); 
light.position.set(1, 1000, 1); 
light.castShadow = true; 
light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(50, 1, 1, 5000)); 

scene.add(light); 

var planeGeometry = new THREE.PlaneGeometry(innerWidth * 0.5, innerHeight * 0.5, 10, 10); 
var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial({ color: 0xffcccc })); 
plane.rotation.x = -Math.PI/2; 
plane.castShadow = true; 
plane.receiveShadow = true; 
scene.add(plane); 


var sphere = new THREE.SphereGeometry(100, 16, 8); 
var spheremesh = new THREE.Mesh(sphere, new THREE.MeshPhongMaterial()); 
spheremesh.position.y = 200; 
spheremesh.castShadow = true; 
spheremesh.receiveShadow = true; 
scene.add(spheremesh); 

var planeGeometry1 = new THREE.PlaneGeometry(innerWidth, innerHeight, 10, 10); 
var plane1 = new THREE.Mesh(planeGeometry1, new THREE.MeshPhongMaterial()); 
plane1.position.y = -250; 
plane1.rotation.x = -Math.PI/2; 
plane1.castShadow = true; 
plane1.receiveShadow = true; 
scene.add(plane1); 

Answer 1

默認情況下，three.js在生成陰影貼圖時剔除正面。

renderer.shadowMap.renderReverseSided = true; // default is true 

這意味着只有背面（從光的角度看）投射陰影。剔除你的飛機的前臉不會留下任何影子。

所以一種選擇是用具有深度的薄BoxGeometry替換你的PlaneGeometry。

第二個選項是設置

renderer.shadowMap.renderSingleSided = false; // default is true 

在這種情況下，你的飛機會產生陰影，但有可能是自陰影假象，因爲你有兩個plane.castShadow = true和plane.receiveShadow = true。

通常，第一個選項是最佳選項。

three.js r.86