Three.js Ebene nicht Schatten wirft

Question

ich ein Flugzeug und eine Kugel auf einer größeren Ebene Stapeln, wie im folgenden Bild zu sehen

Von WebGL Inspektor, es scheint alles drei Objekt in der ShadowMap gezogen, sondern nur die Kugel effektiv in der ShadowMap erscheinen, wodurch das kleinere Flugzeug zu werfen nie einen Schatten auf dem größeren

Hier ist die Szene Bau

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

Standardmäßig werden bei der Erstellung von Shadow Maps Frontblenden von three.js entfernt.

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

Das bedeutet nur Rückseiten (aus der Sicht des Lichts) werfen Schatten. Wenn Sie die Vorderseite Ihres Flugzeugs ausheben, bleibt nichts mehr übrig, um einen Schatten zu werfen.

So eine Möglichkeit ist, Ihre PlaneGeometry durch eine dünne BoxGeometry zu ersetzen, die Tiefe hat.

Eine zweite Option ist

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

In diesem Fall setzen soll, wird Ihr Flugzeug einen Schatten werfen, aber es kann selbst Shadowing Artefakte sein, da Sie beide plane.castShadow = true und plane.receiveShadow = true haben.

In der Regel ist die erste Option die beste Option.

three.js r.86