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

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