Shadows: incorrect shape and transparency ignored

Questions
1

Hi!
I have this scene exported from Unity in gltf format. The shadows look correct on Unity but incorrect on threejs.
Basically I have two main problems:

  1. The shape of the shadows for one of the mesh seems to be truncated.

  2. One mesh has another child mesh with a glass transparent material. In three.js the transparent material produces a full shadow, while in Unity light can go thorugh the material producing a more realistic shadow.

This is how the scene looks in Unity editor (glass material enabled):

41

This is how the scene looks in Unity editor (glass material disabled):

06

This is how the scene looks in three.js (glass material not casting shadows):

00

This is how the scene looks in three.js (glass material casting shadows):

51

I’ve attached the project to reproduce the result.
What am I doing wrong?

shadow_test.zip (1.7 MB)

2

Your shadows is clipped since the default frustum of the directional shadow camera is too small. Try it like so:

const d = 10;

directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;

You can also use THREE.CameraHelper in order to debug the shadow camera. Very helpful to adjust the frustum. Keep in mind that the shadow quality highly depends on this feature. Tighter frustums produce sharper shadows.

scene.add( new THREE.CameraHelper( directionalLight.shadow.camera ) );
3 Likes
3

Thank you very much @Mugen87 , now I uderstand much better what’s going on.

Now the shadow is not more truncated, but it seems there are still some differences in the begin of the shadow respect to Unity:

55_2

Why is that?

4

Um, sry. I don’t know why the bottom of your construction does not correctly cast shadow. This needs more investigation…

5

Ok, please let me know if you found something

6

Thanks a lot! Register just for thanks.

1 Like