Mesh don't receive shadow correctly

Questions
1

Hi to every one. A got a problem and I have no Idea how to correct it.
So in my scene I use a hemispheric light and a spot light, I enabled shadows in all possible places, camera, light, and meshes(by traversing my .fbx model). And as you can see in pictures bellow problem with shadows appears only on vertical surfaces, on grass everything is ok. I guess this myght be a problem in the model, but I’m not artist, so if there is something that I can do to get rid of this bug, please tell me. Thanks to every one who replay!!!

There I set all my lights:
export function initScene(){

const scene = new THREE.Scene();

// scene.fog = new THREE.Fog('FFFFFF', 20, 500);

//Add Light

let hemiLight = new THREE.HemisphereLight(0x89b2d3, 0x696559, 0.8);
scene.add(hemiLight);


let spotLight = new THREE.SpotLight(0xffa95c, 0.5);
spotLight.angle = Math.PI / 40;
spotLight.shadow.bais = -0.00001;
spotLight.shadow.mapSize.width = 1024 * 16
spotLight.shadow.mapSize.height = 1024 * 16
spotLight.position.set(100, 300, 100);
spotLight.rotation.x = 90;
spotLight.castShadow = true;


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

spotLight.shadow.camera.near = 0.5;
spotLight.shadow.camera.far = 500;
spotLight.shadow.camera.fov = 30;


spotLight.target.position.set( 0, 0, 0 );
scene.add( spotLight.target );

scene.add(spotLight);

var lightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( lightHelper );


var helper = new THREE.CameraHelper( spotLight.shadow.camera );
// scene.add( helper );


initSky(scene)

return scene;

}

There are results

Bug
Bug1050×807 496 KB

Bug2
Bug2702×782 71.4 KB

2

Typo: It’s not bais but bias.

This is way too high. You should avoid any resolutions beyond 2048.

You have to work with radians here. Use Math.PI * 0.5.

Apart from this, have you enabled shadows like so?

renderer.shadowMap.enabled = true;
3

I made the changes, corrected the typo, and decreased the mapSize.Width to 2048 (and tryed also with 1024), used rotation in radians. The result don’t changed.
Renderer shadow map is enabled:

renderer.shadowMap.enabled = true;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
4

Do you mind sharing your code as a live example or as a GitHub repository?

5

Unfortunately I can share only pieces of my code. But I guess I can provide you my scene setup. I guess you need the renderer, camera, model loader, and the scene itself?

6
8

I’m unable to reproduce with this fiddle (which uses most of your code): https://jsfiddle.net/x9ewm20c/

9

Bug3
Bug31146×764 632 KB

As you see the problem aper only on horizontal faces. On the groun everything is ok as in your example