ThreeJS 陰影條紋BUG

ThreeJS 開啟陰影正確做法：

1. 渲染器啟用陰影 renderer.shadowMap.enabled = true;
2. 燈光產生陰影 light.castShadow = true;
3. 物體遮擋陰影 obj.castShadow = true;
4. 地面顯示陰影 obj.receiveShadow = true;

無陰影效果

有陰影效果，產生了許多條紋

產生原因

1. 將四方塊設置為 不接收陰影 obj.receiveShadow = false; 可避免條紋，但四方塊上就沒有投影效果了。
2. 將材質的 let material = new THREE.MeshLambertMaterial( { color: color, side: THREE.DoubleSide } ); side屬性去掉也可以正常。
3. 或者將材質的投影面設置為背面也可解決 let material = new THREE.MeshPhysicalMaterial( { color: color, side: THREE.DoubleSide, shadowSide: THREE.BackSide } );

正確陰影效果

總結：

材質的 side，shadowSide 設置對陰影產生影響，需特別注意；