[SOLVED] No shadow, although castShadow and receiveShadow are true on all objects

Any ideas why it may be that, although castShadow and receiveShadow are both true on all objects, there are no shadows?

I don’t have a small example at the moment. I’ll see if I can post one, or perhaps post what happened in my case.

Does the camera frustum of the light cover your objects?

Have you enabled .shadowMap on your WebGLRenderer ?

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

shadowMap constants

Have you set .castShadow = true on your lights?

light.castShadow = true;

Have you adjusted the shadow settings on your lights?

light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 1200, 2500 ) );
light.shadow.bias = 0.0001;
light.shadow.mapSize.width = SHADOW_MAP_WIDTH;
light.shadow.mapSize.height = SHADOW_MAP_HEIGHT;

shadowmap example

@Fyrestar @sciecode Thanks for the hints!

I had all this working before I ported the code from JS to TypeScript. In doing so, I converted properties in methods/constructor to class fields (i.e. foo = 'bar' outside of any method/constructor). This changed code ordering somewhere.

I checked all values mentioned above, and they are all set as expected, except for my light.castShadow for some reason now contains an object {} instead of the boolean true.

So I’ve gotta sort out what my new TS code is doing wrong. I’ll mark this as solved, being a problem with conversion to TS.

1 Like

@Fyrestar @sciecode Yep, it appears that simply setting light.castShadow = {} is what causes the issue, despite the value being truthy!

Here’s a small demo, where castShadow is set to {}.


See the lines marked with HERE, that look like this:

// spot_light.castShadow = true; // HERE
spot_light.castShadow = {}; // HERE

Good thing I’m converting to TypeScript; once I remove all the anys I should be able to catch issues like this at build time.


I wonder if there’s internally light.castShadow === true then :smile_cat: