three. Solution to stripe shadow and grid shadow in JS

ThreeJS The correct way to turn on shadows ：

1. The renderer enables shadows renderer.shadowMap.enabled = true;
2. Light produces shadows light.castShadow = true;
3. Objects block shadows obj.castShadow = true;
4. The ground shows shadows obj.receiveShadow = true;

No shadow effect ：

With shadow effect , There are many stripes ：

The reasons causing

1. Set the four squares to Do not receive shadows obj.receiveShadow = false; Stripes can be avoided , But there is no projection effect on the square block .
2. Set the material's material.side = 0; side Property is set to 0 It can also be normal .
3. Or set the projection surface of the material to the back material.shadowSide = THREE.BackSide;

Correct shadow effect ：

The above is the solution to produce fringe shadow .

However, the mesh shadow appears on the model or the shadow cast is relatively blurred ：

It is the shadow that is not fine enough to cause jagged shadows cast on itself or other five advocates , terms of settlement ：
light.shadow.mapSize.width=2048; // The shadow map width is set to 2048 Pixels
light.shadow.mapSize.height=2048; // Shadow map height set to 2048 Pixels
（light A castable shadow light defined for yourself ）

The size of the value can be set according to the actual situation , If the setting is smaller, the performance will be better , It will be better to set it larger , But it will occupy more image computing resources .

above .