How to do that like Sketchfab setting border fade in shadow ground plane

Questions
1

I try three-csm plugin but it’s useless for me

no fading:

1614821542(1)
1614821542(1)1061×857 50.8 KB

set fading

1614821644(1)
1614821644(1)1030×874 184 KB

2

Do you mean shadows like here ?

In this case, you can use soft shadows with a low-resolution shadow map. Or, if you want to get exactly the same effect as Sketchfab, try using SSAO post-processing with a very large kernel radius, which is what they are likely doing (it’ll also create some artsy artefacts, like the noisy background.)

3

no , you sample on sketchfab is setting by AO Baked

I wnat use shadow catcher and setting “border fade”

that difference between “AO Backed” and “Shadow catcher”

4

Contact shadows might be a good starting point for what you describe: three.js examples. The best result for a static model would to bake ambient occlusion in Blender and then export it to glTF, but this requires learning a bit of Blender usage.

3 Likes
5

For regular shadows (not contact shadows) a trick is to patch ShadowNode.prototype.setupShadowFilter with TSL (when using WebGPURenderer) to implement custom logic for the shadow (return a node that calculates values from 0 (shadow) to 1 (no shadow):

			const originalSetupShadowFilter = THREE.ShadowNode.prototype.setupShadowFilter;

			THREE.ShadowNode.prototype.setupShadowFilter = function ( builder, inputs ) {

				// base is the current value 0 to 1 for the current shadow fragment
				const base = originalSetupShadowFilter.call( this, builder, inputs );
				
				return yourCalculation( base, 123 )
			};

Here’s an example.