javascript - 三.js DirectionalLight和阴影 chop

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

请参阅 three.js 文档以获取 DirectionalLightShadow :

This is used internally by DirectionalLights for calculating shadows.

Unlike the other shadow classes, this uses an OrthographicCamera to calculate the shadows, rather than a PerspectiveCamera. This is because light rays from a DirectionalLights are parallel.

进一步了解 DirectionalLight

A common point of confusion for directional lights is that setting the rotation has no effect. This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target Direct Light' in other applications.

This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component).

The reason for this is to allow the light to cast shadows - the shadow camera needs a position to calculate shadows from.

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

为 mainLight 设置摄像头并根据您的需要定义其正交投影:

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