遇到的问题
导入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/先尝试下,不过一般模型的尺寸比较大,可以在这个编辑器里面缩小自己的模型进行测试。