三個JS的影子bug？

Question

我試圖使用簡單的定向光和陰影材質創建陰影，問題是陰影似乎在框內正常工作，當該區域之外的模型消失時，???

陰影在邊界處的圖像

這是代碼：

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的內部陰影攝像頭才能獲得適當的陰影。 使用以下示例作為您自己的代碼的模板。 重要的部分是：

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;

此配置確定場景的哪一部分將通過定向光創建和接收陰影。 請注意，應將視錐台設置得盡可能緊，以獲得清晰的結果。