Three.js shadow too detailed

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

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.

Try PCFSoftShadowMap with less shadow map height and width…

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

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

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?

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

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

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.