Quality of Three.js shadow in Chrome/MacOS?

Question

I am experimenting with a simple Three.js scene (novice in this area). I am using the Three.js WebGLRenderer and have set up a plane, a cube that casts shadows and a directional light source. The result is shown in the image.

How do I:

1. Increase the quality of the shadow rendering?
2. Get rid of the jagged edges?

I have set the antialiasing to true but it does not seem to help in any browser ...

renderer = new THREE.WebGLRenderer({ antialias: true});

Answer 1

You can do two things. First set a renderer attribute

renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap | THREE.PCFShadowMap | THREE.PCFSoftShadowMap

and then you can also increase the shadowmap size of your light with:

light.shadowMapWidth = 1024; // default is 512
light.shadowMapHeight = 1024; // default is 512

And now r104 version :

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

Answer 2

Another thing you could do is to increase the width/height of the segments of the object that receives the shadow.

For instance, change this:

var plane = new THREE.PlaneGeometry( 1000, 1000, 10, 10);

by this:

var plane = new THREE.PlaneGeometry( 1000, 1000, 100, 100);

Results: