三个JS的影子bug？

Question

我试图使用简单的定向光和阴影材质创建阴影，问题是阴影似乎在框内正常工作，当该区域之外的模型消失时，就消失了？

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;

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