title: Three.js shadow too detailed
body: <p>I have a loaded 3D object and I want a shadow not as detailed as in the image.</p>
  <p><a href="https://i.stack.imgur.com/6COVo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6COVo.png" alt="enter image description here" /></a></p>
  <p>I'd want a shadow with softer edges, like in the example: <a href="https://threejs.org/examples/?q=shadow#webgl_shadowmap_pcss" rel="nofollow noreferrer">https://threejs.org/examples/?q=shadow#webgl_shadowmap_pcss</a>.
  I also tried to load a png as shadow texture, but that's not shown.
  Here's my code of normal shadow by directional light:</p>
  <pre><code>const larghContenitore = $( window ).width();
  const altContenitore = $( window ).height();
  
  let shadowGroup, renderTarget, renderTargetBlur, shadowCamera, cameraHelper, depthMaterial, horizontalBlurMaterial, verticalBlurMaterial;
  let plane, blurPlane, fillPlane;
  
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( larghContenitore, altContenitore );
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.gammaFactor = 2.2;
  renderer.outputEncoding = THREE.sRGBEncoding;
          
  camera = new THREE.PerspectiveCamera( 60, larghContenitore / altContenitore, 1, 1000 );
  camera.position.set( 0, 50, zoom );
  
  scene = new THREE.Scene();
  scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
  scene.fog = new THREE.Fog( scene.background, 1, 5000 );
  
  const axisHelper = new THREE.AxesHelper(100);
  scene.add(axisHelper);
  
  const ambient = new THREE.AmbientLight( 0xffffff, 0.3 );
  scene.add( ambient );
  
  const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
  dirLight.color.setHSL( 0, 0, 1 );
  dirLight.position.set( 10, 50, 10 );
  dirLight.castShadow = true;
  dirLight.shadow.mapSize.width = 2048;
  dirLight.shadow.mapSize.height = 2048;
  
  const d = 200;
  dirLight.shadow.camera.top = d;
  dirLight.shadow.camera.bottom = - d;
  dirLight.shadow.camera.left = - d;
  dirLight.shadow.camera.right = d;
  dirLight.shadow.camera.far = 3500;
  dirLight.shadow.bias = 0.0001;
  dirLight.shadow.normalBias = 0.5;
  dirLight.shadow.darkness = 0.1;
  dirLight.shadow.camera.castShadow = true;
  dirLight.shadow.radius = 50;
  
  scene.add( dirLight );
  
  const dirLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
  scene.add( dirLightHelper );
  
  const geo = new THREE.PlaneBufferGeometry( 10000, 10000 );
  const mat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
  mat.color.setHSL( 0, 0, 0.7 );
  
  plane = new THREE.Mesh(geo, mat);
  plane.position.y = - 33;
  plane.rotation.x = - Math.PI / 2;
  plane.receiveShadow = true;
  plane.material.opacity = 0.5;
  scene.add(plane);
  
  const controls = new OrbitControls( camera, renderer.domElement );
  controls.enablePan = false;
  controls.maxPolarAngle = ( Math.PI / 2.5 );
  controls.minPolarAngle = ( Math.PI / 3 );
  controls.minDistance = 48;
  controls.maxDistance = maxZoom;
  controls.enableZoom = true;
  controls.update();
  
  let product;
  
  const matStdObjects = new THREE.MeshStandardMaterial({ 
    color: '#ffffff', 
    roughness: 0.5, 
    metalness: 0.8
    //shininess: 80
  });
  
  matStdObjects.color.convertSRGBToLinear();
  
  let loader = new FBXLoader();
  loader.load( 'model/2021_01_26_DMT_EVO_R1_AR_200k.fbx', function ( object ) {
    let box = new THREE.Box3().setFromObject( object );
    console.log( box.getSize() );
    
    let mesh = object.children;
    for (let i = 0; i &lt; mesh.length; i++) {
      mesh[i].material = matStdObjects;
    }
              
    object.position.set( 0, 5, 0 );
    //object.rotation.set( 0, 0, Math.PI / 2 );
    
    object.traverse( function ( child ) {
      if ( child.isMesh ) {
        child.castShadow = true;
        child.receiveShadow = false;
        child.flatshading = true;
      }
    });
    
    object.castShadow = true;  
    
    product = object;
    scene.add( object );
      
    animate();
    
  });
  </code></pre>
  <p>Is it possibile to &quot;simplify&quot; the object shadow? Or it's better loading a png as shadow texture? And  in case, how can I do that?</p>