Three.js开启阴影经常会出现一些条纹,这个问题困扰了我很久,网上找到的解决方案一会有用一会又没用,本篇系统性地讨论下解决方案。
![](https://i-blog.csdnimg.cn/blog_migrate/693f21a294388a5a702f7e00d2dd3008.png)
阴影条纹
我们创建阴影通常使用平行光:
//开启阴影效果
renderer.shadowMap.enabled = true;
//开启软阴影
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
...省略...
//平行光
dirLight = new THREE.DirectionalLight(0x606060, 10);
dirLight.position.set(4, 4, 4);
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 1024;
dirLight.shadow.mapSize.height = 1024;
// dirLight.shadow.camera.left = -10;
// dirLight.shadow.camera.right = 10;
// dirLight.shadow.camera.top = -10;
// dirLight.shadow.camera.bottom = 10;
// dirLight.shadow.camera.near = 4;
// dirLight.shadow.camera.far = 20;
// dirLight.shadow.radius = 0.1;
// dirLight.shadow.bias = 0.0000000001;
scene.add(dirLight);
//灯光参考线
var lightHelper = new THREE.CameraHelper(dirLight.shadow.camera);
scene.add(lightHelper);
...省略...
//设置物体接收和产生阴影
child.castShadow = true;
child.receiveShadow = true;
生成阴影后会发现阴影有很多条纹,具体原因在Games101中shadow篇有讲这种阴影条纹出现的原因。
解决方法:
调整bias,将其设为很小的负值
dirLight.shadow.bias = -0.00005;
修复后:
![](https://i-blog.csdnimg.cn/blog_migrate/a813b0d79530dfb799115d3dd336fb0a.png)
修复后阴影