Hi there,
when i enable receiveShadow of a mesh it cast ugly shadows like this:
receiveShadow = true
receiveShadow = false
Code:
// Renderer
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
renderer.shadowMap.enabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
//Light
light = new THREE.DirectionalLight( 0xffffff, 0.5 );
light.castShadow = false;
light.shadow.mapSize = new THREE.Vector2(1024, 1024);
scene.add(light);
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.25);
hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff, 1);
dirLight.position.set( 3, 10, 10 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
dirLight.shadow.camera.top = 2;
dirLight.shadow.camera.bottom = - 2;
dirLight.shadow.camera.left = - 2;
dirLight.shadow.camera.right = 2;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 40;
scene.add( dirLight );
// Ground
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xeeeeee, shininess: 1, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
ground.position.y = -1;
scene.add( ground );
const grid = new THREE.GridHelper( 1000, 1000, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
grid.position.y = -1;
scene.add( grid );
theModel.traverse(o => {
if (o.isMesh) {
o.castShadow = true;
o.receiveShadow = false; // Ugly shadows on other meshes when true - Needs fixing
o.material.needsUpdate = true;
}
});
What can i do to fix that ?