Three.js平面不投射阴影。

Question

我将在一个大平面上叠放一个飞机和一个球体，如下图所示。从WebGL检查器中可以看到，三个物体都被绘制在阴影贴图中，但只有球体实际上出现在阴影贴图中，导致较小的平面永远无法投射到较大的平面上。

以下是场景构建：

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

- Row Rebel

Answer 1

默认情况下，three.js 在生成阴影贴图时剔除正面。

这意味着只有背面（从光源的角度来看）会投射阴影。如果剔除你的平面的正面，就没有东西可以投射阴影了。

因此，一种选择是用一个薄的 BoxGeometry 替换你的 PlaneGeometry，它具有深度。

第二个选项是设置

material.shadowSide = THREE.DoubleSide;

在这种情况下，您的平面将投射阴影，但由于您同时设置了plane.castShadow = true和plane.receiveShadow = true，可能会出现自身阴影伪影。

通常，第一个选项是最佳选择。

three.js r.151

- WestLangley