Threejs阴影问题

遇到的问题

导入glb模型，各种尝试，各种配置，死活不产生影子。

先说我的解决办法

可以先到https://threejs.org/editor/进行测试，我这里不产生因子的原因主要使阴影的设置没弄对。
首先需要使光照的影子的这个盖子足够大，


let directionalLight_1 = new THREE.DirectionalLight(0xffffff, 0.8)
directionalLight_1.castShadow = true; // default false
directionalLight_1.shadow.camera.near = 0.5; // default
directionalLight_1.shadow.camera.far = 2000; // default
directionalLight_1.shadow.camera.left = -2000
directionalLight_1.shadow.camera.right = 2000
directionalLight_1.shadow.camera.top = -500
directionalLight_1.shadow.camera.bottom = 500

可以用helper来帮助设置看看这个范围。
let helper = new THREE.CameraHelper(directionalLight_1.shadow.camera);
scene.add(helper)
其次是需要对产生影子的对象设置 castShadow = true;
接收影子的地面设置receiveShadow = true;

let ground = scene.getObjectByName(‘mesh_2370’);
ground.receiveShadow = true;
let tower_1 = scene.getObjectByName(‘mesh_1574’);
tower_1.castShadow = true;

比如下面失败的尝试

用这个DirectionalLight默认配置
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default

这样失败，因为这个距离还没有到塔这里，影子子够不着。应该使far变大
far改成2000。

但还是不行，

改成
directionalLight_1.shadow.camera.near = 0.5; // default
directionalLight_1.shadow.camera.far = 500; // default
directionalLight_1.shadow.camera.left = -2000
directionalLight_1.shadow.camera.right = 2000

还是不行。因为太扁了

改成
directionalLight_1.shadow.camera.near = 0.5; // default
directionalLight_1.shadow.camera.far = 500; // default
directionalLight_1.shadow.camera.left = -2000
directionalLight_1.shadow.camera.right = 2000
directionalLight_1.shadow.camera.top = -500
directionalLight_1.shadow.camera.bottom = 500

成功！
就是把这个盖子变得足够大即可。根据模型的尺寸来。

也可以自己去https://threejs.org/editor/先尝试下，不过一般模型的尺寸比较大，可以在这个编辑器里面缩小自己的模型进行测试。