十二、three大场景的阴影效果怎么实现

        在以前小场景的阴影效果也实现了，但是发现使用了聚光灯SpotLight 的效果，如果离得近了，是一个小圆的照亮效果，放的大了就没有阴影了，所以说大场景的阴影只能使用环境光DirectinalLight，下面给大家先介绍聚光灯的效果。

1添加聚光灯到场景中，直接上代码。

const light1 = new THREE.SpotLight(0xfcfcee);

light1.intensity = 1;

light1.name = 'aLight1'

light1.position.set(260, 240, -280);

light1.castShadow = true;

light1.shadow.mapSize.width = 2048; //阴影贴图宽度设置为2048像素

light1.shadow.mapSize.height = 2048;  //阴影贴图高度设置为2048像素

light1.angle = Math.PI / 3

light1.shadow.camera.near = 10;

light1.shadow.camera.far = 1400;

light1.shadow.camera.fov = 60;

scene.add(light1);

2展示效果，发现有了渐变层，并且部分没有照射到，需要修改。

3当时有了两个思路：

思路一是把灯光position  的位置放高一点不就可以照射到全部了，不就可以了吗。但是发现不行。当把light1 的y轴值增大到2000的时候，发现无阴影，效果如下。

light1.position.set(260, 2000, -280);

思路二是多放几个聚光灯，组成一片，不是形成了具有阴影的所有区域了吗，先增加一个试试。先增加代码

const light2 = new THREE.SpotLight(0xfcfcee);

light2.intensity = 1;

light2.name = 'aLight2'

light2.position.set(360, 340, -280);

light2.castShadow = true;

light2.shadow.mapSize.width = 2048; //阴影贴图宽度设置为2048像素

light2.shadow.mapSize.height = 2048;  //阴影贴图高度设置为2048像素

light2.angle = Math.PI / 3

light2.shadow.camera.near = 10;

light2.shadow.camera.far = 1400;

light2.shadow.camera.fov = 60;

scene.add(light2);

看效果，发现有更加严重的问题，一个是建筑双重阴影，另一个是两条灯光线，即使他们的光亮程度是一样的也是不可以的。

那就放弃这个思路，使用平行光来实现。

1删除聚光灯，添加平行光到场景中，直接上代码。

const light = new THREE.DirectionalLight(0xffffff,2);

light.name = 'aLight'

light.position.set(360, 340, -380);

light.castShadow = true;

light.shadow.camera.near = 10;

light.shadow.camera.far = 1400;

light.shadow.camera.left = -8000;

light.shadow.camera.right = 8000;

light.shadow.camera.top = 2000;

light.shadow.camera.bottom = -100;

light.shadow.bias = -0.0001

light.shadow.mapSize.width = 8192;

light.shadow.mapSize.height = 8192;

light.shadow.radius = 4;

light.distance = 1000;

scene.add(light); // 将平行光源添加到点光源里

2展示效果

发现全景的阴影是出现了，但是阴影很模糊，并不能达到期望的清晰的效果，分析是分辨率决定这个阴影的清晰度，有待以后的优化。