Three.js 阴影条纹问题 shadow stripe

Three.js开启阴影经常会出现一些条纹，这个问题困扰了我很久，网上找到的解决方案一会有用一会又没用，本篇系统性地讨论下解决方案。

阴影条纹

我们创建阴影通常使用平行光：

//开启阴影效果
            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;

修复后：

修复后阴影