THREE.VSMShadowMap shadow making some line in the shadow material

Question

`I want to control the shadow so I added THREE.VSMShadowMap. now I can control it using this

Renderer

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

Geometry

  const geometry = new THREE.SphereGeometry( 15, 32, 16 );
  geometry.castShadow = true;
  const material = new THREE.MeshStandardMaterial( { color: 0xffff00 } ); 
  const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );
  sphere.scale.set(0.1,0.1,0.1);
  sphere.castShadow = true; //default is false
  sphere.receiveShadow = false; //default

Light

  const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
  directionalLight1.shadow.camera.near = 0.5;      
  directionalLight1.shadow.camera.far = 30;
  directionalLight1.shadow.camera.left = -25;
  directionalLight1.shadow.camera.top = 25;
  directionalLight1.shadow.camera.right = 25;
  directionalLight1.shadow.camera.bottom = -25;   
  directionalLight1.shadow.radius = 25;
  directionalLight1.shadow.blurSamples = 25;
  directionalLight1.shadow.mapSize.width = 2048;
  directionalLight1.shadow.mapSize.height = 2048;
  directionalLight1.shadow.bias = 0.05;

But it's showing some unwanted shadows on the floor. [Click and check the image] (https://i.stack.imgur.com/m3JJA.jpg)

  const Floor = new THREE.Mesh(
  new PlaneBufferGeometry(50, 50),

  new ShadowMaterial({
  color: 0x000000,
  depthWrite: false,
  opacity: 0.5,
  transparent: true,
  })
  );
  Floor.receiveShadow = true;
  Floor.rotation.x = -Math.PI / 2;
  Floor.position.set(0, -1.5, 0);
  // Floor.position.y = -1.5;
  scene.add(Floor);

I added image also. please anyone help me

I am trying to do like this

go and check here: https://sbcode.net/threejs/soft-shadows/ `

THREE.VSMShadowMap shadow making some line in the shadow material

0 Answers0