three.js shadow effect is not same as in Unity 3D

Question

I import a .fbx 3D model to my scene using three.js, and found that the shadow effect is different from using Unity. All shadows are too blurry.

How to set shadowMap in three.js to be same as in Unity?

Here is my code.

light = scene.getObjectByName("DirectionalLight");
light.castShadow = true;
light.shadowMap.type = THREE.PCFSoftShadowMap;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

Thanks!!

Answer 1

Your artefacts are caused by insufficient shadow map precision. It will be clearly seen if you disable PCF by setting light.shadowMap.type = THREE.BasicShadowMap (and it should disable bluriness also). Reducing PCF kernel size will reduce blurriness but seems there are no knobs to tune it in three.js.

Result will be slight better if you increase shadow map resolution (for example to 2048). But it wouldn't be good enough for such big scene.

Unity uses cascaded shadow maps and three.js uses single shadow map for whole scene and that causes main gap in quality . Link to unity docs . Good msdn docs about shadow maps .

If your scene is static consider using lightmaps. That also will give you better performance.