三个 JS 阴影错误？

Question

我试图使用简单的定向光和阴影创建阴影 material，问题是阴影似乎在盒子中正常工作，当在该区域外建模时它就消失了？？

image of the shadow at the bounds

这是代码：

var light = new THREE.DirectionalLight(0xffffff, 0);
renderer.shadowMap.enabled = true;
light.position.x = 100;
light.position.y = 150;
light.position.z = 0;
light.castShadow = true;
scene.add(light);

plane.receiveShadow = true;
plane.material = new THREE.ShadowMaterial({color: 0, opacity:1});

Answer 1

您必须配置 DirectionalLight 的内部阴影相机才能获得正确的阴影。使用以下 example 作为您自己的代码的模板。重要的部分是：

var d = 5;
directionalLight.castShadow = true;
directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;

directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 20;

此配置决定场景的哪一部分将通过定向光创建和接收阴影。请注意尽可能紧密地设置视锥体以获得清晰的结果。

三个 JS 阴影错误？

Three JS shadow bug?

three.js

3d

light

shadows