# Shadows not working at all \[Parcel, Node\]

**URL:** <https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [November 10, 2023, 2:57am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987 "2023-11-10T02:57:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francisco\_Rosas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francisco_rosas/32/41783_2.png) [@Francisco\_Rosas](https://discourse.threejs.org/u/Francisco_Rosas)\
**Post date:** [November 10, 2023, 2:57am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/1 "2023-11-10T02:57:53Z")

</div>

I can’t get objects to cast shadows with any type of light.  
My init:

```javascript
function init(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(conf.fov, window.innerWidth/window.innerHeight, conf.near, conf.far);
    camera.position.set(conf.camX,conf.camY,conf.camZ);
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMap.enable = true;
    
    controls = new PointerLockControls(camera, renderer.domElement);

    document.body.appendChild(renderer.domElement);

    dirLight = new THREE.DirectionalLight(0xffffff);
    dirLight.castShadow = true;
    dirLight.position.set(1,1,1);
    
    let d = 5;
    dirLight.shadow.camera.left = -d;
    dirLight.shadow.camera.right = -d;
    dirLight.shadow.camera.top = -d;
    dirLight.shadow.camera.bottom = -d;
    dirLight.shadow.camera.near = 1;
    dirLight.shadow.camera.far = 1;
    scene.add(dirLight)
    
    dirHelp = new THREE.DirectionalLightHelper(dirLight);
    scene.add(dirHelp);

    let geometry = new THREE.PlaneGeometry(10,10);
    let material = new THREE.MeshPhongMaterial({color: 0xffffff});
    plano = new THREE.Mesh(geometry,material);
    plano.rotation.x = -Math.PI/2;
    plano.receiveShadow = true;
    scene.add(plano);
    
    geometry = new THREE.SphereGeometry(0.5);
    esf = new THREE.Mesh(geometry,material);
    esf.position.y = 1;
    scene.add(esf);

    instructions.addEventListener('click', function(){
        controls.lock();
    });
    controls.addEventListener('lock', function(){
        instructions.style.display = 'none';
        blocker.style.display = 'none';
    });
    controls.addEventListener('unlock', function(){
        blocker.style.display = 'block';
        instructions.style.display = '';
    });

    camera.lookAt(scene.position);
    animate();
}

```

How it looks:

 ![2023Nov09::113524](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/5/c535be4ea404a1d8225919baa8597a165a2dc133.jpeg)  
 ![2023Nov09::235410](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/d/fdcea90b471df3be5e5c4525a37f083c8ffe8a3d.jpeg)

Im using node with parcel.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 10, 2023, 3:12am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/2 "2023-11-10T03:12:31Z")

</div>

> [@Francisco\_Rosas](#):
>
> `enable`

[d](https://threejs.org/docs/index.html?q=rendere#api/en/renderers/WebGLRenderer.shadowMap)

---

<div class="post-metadata">

**Author:** ![Francisco\_Rosas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francisco_rosas/32/41783_2.png) [@Francisco\_Rosas](https://discourse.threejs.org/u/Francisco_Rosas)\
**Post date:** [November 10, 2023, 3:26am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/3 "2023-11-10T03:26:48Z")

</div>

Still the same

 ![2023Nov10::002810](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/5/f517f6b8f2e41329288bbe6d4e18c30e845fe752.jpeg)

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [November 10, 2023, 6:15am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/4 "2023-11-10T06:15:49Z")

</div>

`esf.castShadow = true`

---

<div class="post-metadata">

**Author:** ![Francisco\_Rosas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francisco_rosas/32/41783_2.png) [@Francisco\_Rosas](https://discourse.threejs.org/u/Francisco_Rosas)\
**Post date:** [November 10, 2023, 6:45am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/5 "2023-11-10T06:45:22Z")

</div>

![2023Nov10::034458](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/8/38fc16d03cff4469777215c30ae1958333999675.jpeg)  
It still doesn’t work, the shadow camera doesn’t match the direction of the light either.

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [November 10, 2023, 7:05am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/6 "2023-11-10T07:05:44Z")

</div>

It’s not clear from the screenshot, the light seems way-off, I suggest you share a jsFiddle of your scene, and here is a working example [jsfiddle](https://jsfiddle.net/v4cbd5rp/1/)

---

<div class="post-metadata">

**Author:** ![Francisco\_Rosas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francisco_rosas/32/41783_2.png) [@Francisco\_Rosas](https://discourse.threejs.org/u/Francisco_Rosas)\
**Post date:** [November 10, 2023, 3:01pm UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/7 "2023-11-10T15:01:31Z")

</div>

Idk how to make jsfiddle to work with my code, im pretty noob on js environments, this is the code from the video:

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

var conf = {
        fov : 45,
        near : 1,
        far : 1000,
};

function init(){
    scene=new THREE.Scene();
    camera=new THREE.PerspectiveCamera(conf.fov,window.innerWidth/window.innerHeight,conf.near,conf.far);
    camera.position.set(5,2,0);

    renderer=new THREE.WebGLRenderer({antialias: true});
    renderer.shadowMap.enable=true
    renderer.setSize(window.innerWidth,window.innerHeight);

    controls = new OrbitControls(camera,renderer.domElement);
    document.body.appendChild(renderer.domElement);

    let material = new THREE.MeshPhongMaterial();
    
    let geometry = new THREE.PlaneGeometry(10, 10);
    let plane = new THREE.Mesh(geometry, material);
    plane.rotation.x = -Math.PI/2;
    plane.receiveShadow = true;
    scene.add(plane);

    geometry = new THREE.SphereGeometry(1)
    let esf = new THREE.Mesh(geometry, material); 
    esf.position.set(0,1,-2);
    esf.castShadow = true;
    scene.add(esf);

    directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.castShadow=true;
    directionalLight.position.set(5,5,5);
    directionalLight.target = esf;

    scene.add(directionalLight);
    
    dirhelper = new THREE.DirectionalLightHelper(directionalLight);
    scene.add(dirhelper)

    helper = new THREE.CameraHelper(directionalLight.shadow.camera);
    scene.add(helper);
    
    camera.lookAt(scene.position);
    animate();
}

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}

window.addEventListener( 'resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );

} );

window.onload = init;

```

For what I understand the shadow camera of the light its not matching the light target, but i even create a plane perpendicular to see if the shadow was projected in the direction of the camera frustrum, but didnt cast any kind of shadow either.

---

<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:** [November 10, 2023, 4:04pm UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/8 "2023-11-10T16:04:23Z")

</div>

Change your line  
`renderer.shadowMap.enable=true`  
to  
`renderer.shadowMap.enabled=true`

---

<div class="post-metadata">

**Author:** ![Francisco\_Rosas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francisco_rosas/32/41783_2.png) [@Francisco\_Rosas](https://discourse.threejs.org/u/Francisco_Rosas)\
**Post date:** [November 10, 2023, 5:05pm UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/9 "2023-11-10T17:05:37Z")

</div>

As my reply to mjurczyk first comment, I still have the same problem. Could it be the browser cache?

I currently have

```javascript
shadowMap.enabled=true;
esf.castShadow=true;
light.castShadow=true;
plane.receiveShadow=true;

```

All objects use MeshPhongMaterial too.

---

<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:** [November 10, 2023, 5:34pm UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/10 "2023-11-10T17:34:02Z")

</div>

> [@Francisco\_Rosas](#):
>
> ```javascript
> renderer=new THREE.WebGLRenderer({antialias: true});
> renderer.shadowMap.enable=true
> renderer.setSize(window.innerWidth,window.innerHeight);
> 
> ```

This bit of code that you posted 2 hours ago, shows that you didn’t fix mjurczyk’s suggestion.

Here is a simplified version of your code. Start from something that works, and then add your complications bit by bit so that you have a better idea what breaks it.

```javascript
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100)
camera.position.set(5, 2, 0)

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.shadowMap.enabled = true
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

const material = new THREE.MeshPhongMaterial()

const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), material)
plane.rotation.x = -Math.PI / 2
plane.receiveShadow = true
scene.add(plane)

const esf = new THREE.Mesh(new THREE.SphereGeometry(1), material)
esf.position.set(0, 1, -2)
esf.castShadow = true
scene.add(esf)

const light = new THREE.DirectionalLight(0xffffff, Math.PI)
light.castShadow = true
light.position.set(5, 5, 5)
light.target = esf
light.shadow.camera.far = 15
scene.add(light)

scene.add(new THREE.DirectionalLightHelper(light))

scene.add(new THREE.CameraHelper(light.shadow.camera))

window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}

animate()

```

This is what I see

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/8/3852f5042b9f39fd343b6e47659703db3fcb25b1.png)

---

<div class="post-metadata">

**Author:** ![Francisco\_Rosas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/francisco_rosas/32/41783_2.png) [@Francisco\_Rosas](https://discourse.threejs.org/u/Francisco_Rosas)\
**Post date:** [November 10, 2023, 7:22pm UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/11 "2023-11-10T19:22:13Z")

</div>

Yeah, i made the shadows work but one more question.

 ![2023Nov10::162115](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/c/9cefe2b77b2c4360e8a032840cfcf9ef397172c4.jpeg)

Why the directional shadow looks like this?

I changed the frustrum to cover all the scene

---

<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:** [November 10, 2023, 7:25pm UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/12 "2023-11-10T19:25:14Z")

</div>

Shadow map size probably

[https://sbcode.net/threejs/directional-light-shadow/](https://sbcode.net/threejs/directional-light-shadow/)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [November 12, 2023, 1:22am UTC](https://discourse.threejs.org/t/shadows-not-working-at-all-parcel-node/57987/13 "2023-11-12T01:22:28Z")

</div>

\*frustum [frustum - Wiktionary, the free dictionary](https://en.wiktionary.org/wiki/frustum)

The tuning of shadowmaps is a whole thing. You can try expanding the coverage by updating the shadow.camera left/right/top/bottom… (which it sounds like you did!)

and you can increase/decrease the resolution (width/height) of the shadowmap…

And you can adjust the “bias” on the light.shadow by + or - very small values to get rid of “shadow acne”/“peter panning”

There are other settings as well that are different between the different types of shadowmapping.