# How to increase shadow size without losing quality

**URL:** <https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [February 7, 2022, 1:32pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584 "2022-02-07T13:32:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 7, 2022, 1:32pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/1 "2022-02-07T13:32:17Z")

</div>

Hi there,

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/57785d0fa79908d1b56b1f44bd5bfb8c4b517c01.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/57785d0fa79908d1b56b1f44bd5bfb8c4b517c01.mp4)

So i have this light and now i try to increase the size (coverage) of this light and shadow.

This is my code for the light:

```javascript
const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 3, 10, 10 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024 * 2, 1024 * 2);
dirLight.shadow.camera.top = 4;
dirLight.shadow.camera.bottom = - 4;
dirLight.shadow.camera.left = - 4;
dirLight.shadow.camera.right = 4;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 40;
dirLight.shadow.bias= -0.002;
scene.add( dirLight );

// Shadow Helper
var shadowHelper = new THREE.CameraHelper( dirLight.shadow.camera );
scene.add( shadowHelper );

```

When i change left, right to make the size (coverage) bigger, the shadow becomes ugly and less detailed.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [February 7, 2022, 1:43pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/2 "2022-02-07T13:43:28Z")

</div>

Try set

```javascript
dirLight.position.set( 30, 100, 100 );
dirLight.shadow.camera.far = 400;

```

---

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 7, 2022, 1:54pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/3 "2022-02-07T13:54:24Z")

</div>

> [@Chaser\_Code](#):
>
> ```javascript
> dirLight.position.set( 30, 100, 100 );
> dirLight.shadow.camera.far = 400;
> 
> ```

Thank you ! Its not perfect jet, but still better than nothing.  
Is there a way to make the light so big, that it always cover the full canvas (floor).

The more i increase the values like:

```javascript
const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 6, 20, 20 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024 * 2, 1024 * 2);
dirLight.shadow.camera.top = 8;
dirLight.shadow.camera.bottom = - 8;
dirLight.shadow.camera.left = - 8;
dirLight.shadow.camera.right = 8;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 80;
dirLight.shadow.bias= -0.002;
scene.add( dirLight );

```

The more i increase this values, the more quality is lost in the shadow. Maybe more than just one DirectionalLight? Like 4 more to the left and right ?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [February 7, 2022, 2:05pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/4 "2022-02-07T14:05:02Z")

</div>

Also maybe you can move light ang light target with model.  
Or again:

```javascript
const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 6, 20, 20 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(8192, 8192);
dirLight.shadow.camera.top = 400;
dirLight.shadow.camera.bottom = - 400;
dirLight.shadow.camera.left = - 400;
dirLight.shadow.camera.right = 400;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 800;
dirLight.shadow.bias= -0.002;
scene.add( dirLight );

```

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [February 7, 2022, 2:11pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/5 "2022-02-07T14:11:22Z")

</div>

Shadow like mesh geometry: [three.js examples](https://threejs.org/examples/?q=shadowme#webgl_shadowmesh)

---

<div class="post-metadata">

**Author:** ![ExoGeN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/exogen/32/23277_2.png) [@ExoGeN](https://discourse.threejs.org/u/ExoGeN)\
**Post date:** [February 7, 2022, 2:16pm UTC](https://discourse.threejs.org/t/how-to-increase-shadow-size-without-losing-quality/34584/6 "2022-02-07T14:16:21Z")

</div>

> Shadow like mesh geometry: [three.js examples](https://threejs.org/examples/?q=shadowme#webgl_shadowmesh)

Thank you for that tip 😉  
Will try that.