Three.js shadow too detailed

Questions
, ,
1

I have a loaded 3D object and I want a shadow not as detailed as in the image.

Immagine 2021-02-03 093200
Immagine 2021-02-03 093200972×744 65 KB

I’d want a shadow with softer edges and I also tried to load a png as shadow texture, but that’s not shown.

Is it possibile to “simplify” the object shadow? Or it’s better loading a png as shadow texture? And in case, how can I do that?

For further info, I tried to reproduce the shadows in the example: https://threejs.org/examples/#webgl_shadow_contact but that uses geometry shapes, I use a loaded object. How can I reproduce the example approach in my case?

Thanks in advance.

2

Try PCFSoftShadowMap with less shadow map height and width…

3

I have this: “renderer.shadowMap.type = THREE.PCFSoftShadowMap;”
How do I assign widtht and height?

4

Light.shadow.mapSize.width = 512;
Light.shadow.mapSize.height= 512;

5

Just tried. Shadow looks too blurry, it’s not what I’m looking for. Maybe it’s possible to using a png as shadow texture? And how can i do?

6

Try adding more resolution to the map size, 512 was an example, try 2048

7

It’s already 2048. I need a softer edges shadow, something like in the image:

Immagine 2021-02-04 151448
Immagine 2021-02-04 1514481050×813 85.9 KB

8

These are called contact shadows, they’re quite complicated to set up but there is an example on threes website in the examples section.

React users can take out the ContactShadows component from drei, in that case it’s just one line floating shoe - CodeSandbox Otherwise you’ll have to untangle the official example and adapt it to your needs.

There’s also percentage closer soft shadows, looks like this: r3f soft shadows - CodeSandbox but they’re too slow for the kind of models you’re dealing with most likely.