three.js DirectionalLight和shadow cut off

Question

根据屏幕截图，下面的THREE.PlaneGeometry（250,380,1,1）上的阴影被切断。

启用阴影的步骤

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

...

camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);

...

mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
mainLight.position.set(50, 50, 50);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
mainLight.shadow.camera.near = 1;
mainLight.shadow.camera.far = 1000;
mainLight.shadow.camera.fov = 100;
scene.add(mainLight);

...

plane.receiveShadow = true;

...

model.castShadow = true;
model.receiveShadow = true;

我玩过不同的值，比如阴影相机FOV和远平面值......

这是使用DirectionalLight的警告吗？我需要在所有模型上照明，而不是SpotLight。

我找到了three.js shadow cutoff，但它只是建议使用SpotLight，并没有解释为什么会改变任何内容。

当我使用SpotLight时，我突然失去了地平面上的阴影。

- 感谢

Answer 1

请参阅DirectionalLightShadow的three.js文档：

  

DirectionalLights在内部使用它来计算阴影。

     

与其他阴影类不同，它使用OrthographicCamera来计算阴影，而不是PerspectiveCamera。这是因为来自DirectionalLights的光线是平行的。

进一步查看DirectionalLight

  

方向灯的一个常见混淆点是设置旋转无效。这是因为three.js的DirectionalLight相当于其他应用程序中通常称为“Target Direct Light”的东西。

     

这意味着它的方向被计算为从光的位置指向目标的位置（而不是只有旋转分量的'自由直接光'）。

     

原因是允许灯光投射阴影 - 阴影相机需要一个位置来计算的阴影。

这意味着受阴影影响的区域由光源的 position 和 camera 定义（DirectionalLight）

为mainLight设置相机，并根据需要定义其正投影：

mainLight.shadow.camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 0.5, 1000 );