Three.js 平面不投射阴影 [英] Three.js plane doesn't cast shadow

问题描述

我正在一个更大的平面上堆叠一个平面和一个球体，如下图所示

I'm stacking a plane and a sphere on top of a bigger plane, as seen in the following image

从 WebGL 检查器来看，似乎所有三个对象都绘制在阴影贴图中，但只有球体有效地出现在阴影贴图中，导致较小的平面永远不会在较大的平面上投射阴影

From WebGL inspector, it seems all three object are drawn in the shadowmap, but only the sphere is effectively appearing in the shadowmap, causing the smaller plane to never cast a shadow on the bigger one

这里是场景搭建

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

推荐答案

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

By default, three.js culls front faces when generating shadow maps.

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

这意味着只有背面(从光线的角度来看)投射阴影.剔除飞机的正面不会留下任何阴影.

That means only back faces (from the point of view of the light) cast shadows. Culling front faces of your plane leaves nothing left to cast a shadow.

因此，一种选择是将您的 PlaneGeometry 替换为具有深度的薄 BoxGeometry.

So one option is to replace your PlaneGeometry with a thin BoxGeometry, which has depth.

第二个选项是设置

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

在这种情况下，您的飞机会投射阴影，但由于您同时拥有 plane.castShadow = true 和 plane.receiveShadow = true.

In this case, your plane will cast a shadow, but there may be self-shadowing artifacts since you have both plane.castShadow = true and plane.receiveShadow = true.

通常，第一个选项是最好的选择.

Typically, the first option is the best option.

three.js r.86

three.js r.86

这篇关于Three.js 平面不投射阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！