# Hello, I am facing the problem with shadow stripes on model

**URL:** https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065
**Category:** Questions
**Tags:** shadows
**Created:** [August 22, 2020, 8:30am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065 "2020-08-22T08:30:03Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![harshil\_poly9](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@harshil\_poly9](https://discourse.threejs.org/u/harshil_poly9)
#### Post date: [August 22, 2020, 8:30am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/1 "2020-08-22T08:30:03Z")

</div>

![Capture.PNG](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/095b4894d81caf5cd383c85e859630c1f47d6c22.jpeg)

Materials : PBR based MeshStandardMaterial.

Lights used : hemisphier light, ambientLight, DirectionalLight  
Directional light is used to display the shadow. Direction light’s position set to (0, 200, 50) and bias is set to -0.002

Problem: Some angles, black lines are visible on product, which is facing to the light.

Please find below jsfiddle for a demo. Can you help me to remove the shadow stipes?

[https://jsfiddle.net/7a6gwjyn/](https://jsfiddle.net/7a6gwjyn/)

---

<div class="post-metadata">

### Author: ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)
#### Post date: [August 22, 2020, 10:11am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/2 "2020-08-22T10:11:08Z")

</div>

If I turn of castshadow and recieveshadow, I still see the lines. I think that is caused by a texture in your model.

If I change your material by replacing it with a MeshNormalMaterial, then I no longer see the lines.

```
 for (let i = 0; i < childrens.length; i++) {
   childrens[i].castShadow = true;
   childrens[i].receiveShadow = true;
   childrens[i].material = new THREE.MeshNormalMaterial()
 }
```

---

<div class="post-metadata">

### Author: ![harshil\_poly9](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@harshil\_poly9](https://discourse.threejs.org/u/harshil_poly9)
#### Post date: [August 22, 2020, 10:38am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/3 "2020-08-22T10:38:03Z")

</div>

@seanwasere

i have to use MeshStandardMaterial along with PBR flow, so would please try with MeshStandardMaterial only ?

---

<div class="post-metadata">

### Author: ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)
#### Post date: [August 22, 2020, 10:41am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/4 "2020-08-22T10:41:11Z")

</div>

same thing, your problem is not shadow

even if I turn off shadows in your renderer, it still see the lines

```
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
//renderer.shadowMap.enabled = true;
//renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
```

---

<div class="post-metadata">

### Author: ![harshil\_poly9](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@harshil\_poly9](https://discourse.threejs.org/u/harshil_poly9)
#### Post date: [August 22, 2020, 11:31am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/5 "2020-08-22T11:31:09Z")

</div>

Let me check the other model and give you the exact issue

---

<div class="post-metadata">

### Author: ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)
#### Post date: [August 22, 2020, 11:42am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/6 "2020-08-22T11:42:23Z")

</div>

Tightening up the shadow frustum and descreasing the bias a bit fixes it:

```javascript
      dirLight.shadow.camera.top = 170;
      dirLight.shadow.camera.bottom = -70;
      dirLight.shadow.camera.left = -150;
      dirLight.shadow.camera.right = 150;
      dirLight.shadow.camera.near = 25;
      dirLight.shadow.camera.far = 250;
      dirLight.shadow.bias = -0.005;

```

Updated fiddle: [https://jsfiddle.net/mr1n5scL/](https://jsfiddle.net/mr1n5scL/)

---

<div class="post-metadata">

### Author: ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)
#### Post date: [August 22, 2020, 12:07pm UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/7 "2020-08-22T12:07:09Z")

</div>

I concede, there is a shadow problem if you look really closely. This is usually solved by tweaking the bias.  
Left, shadows enabled in renderer  
Right, no shadows enabled in renderer

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d9868321bea19dcf37472402c6f77e11b610eebd.jpeg)

---

<div class="post-metadata">

### Author: ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)
#### Post date: [August 22, 2020, 1:57pm UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/8 "2020-08-22T13:57:03Z")

</div>

Can you try it with my updated fiddle? I can’t see any artifacts.

 ![both](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/9445696eeae7940a5dd600b505e30ade4fab7d0d.jpeg)

---

<div class="post-metadata">

### Author: ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)
#### Post date: [August 22, 2020, 2:10pm UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/9 "2020-08-22T14:10:28Z")

</div>

Oh no, I just changed the sliders and I broke it. This is a best as I can milk it with those pesky sliders.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/41e045266eba9950e59492a1fd0ff0754fb5ffcb.jpeg)

---

<div class="post-metadata">

### Author: ![didi\_softwares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didi_softwares/32/22686_2.png) [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)
#### Post date: [February 6, 2022, 7:17pm UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/10 "2022-02-06T19:17:18Z")

</div>

> [@looeee](#):
>
> `dirLight.shadow.bias = -0.005;`

its a solution, tanks

---

<div class="post-metadata">

### Author: ![aksarov91](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aksarov91/32/48535_2.png) [@aksarov91](https://discourse.threejs.org/u/aksarov91)
#### Post date: [June 7, 2024, 2:37am UTC](https://discourse.threejs.org/t/hello-i-am-facing-the-problem-with-shadow-stripes-on-model/18065/11 "2024-06-07T02:37:05Z")

</div>

I have found solution in docs. [three.js docs](https://threejs.org/docs/index.html?q=direc#api/en/lights/shadows/LightShadow.bias)

> Very tiny adjustments here (in the order of `0.0001` ) may help reduce artifacts in shadows
