[ThreeJS] 解決陰影造成的條紋

 會出現條紋現象是因為雙面材質，只要設置為單面材質就可以解決。

原始碼

1. /* 載入模型 */ 
2. new THREE.GLTFLoader().load('Model.glb', function (gltf) { 
3.    const model = gltf.scene; 
4.  
5.    model.traverse(obj => { 
6.        if (!obj.isMesh) { return; } 
7.  
8.        obj.frustumCulled = false; 
9.        obj.castShadow = true; 
10.        obj.receiveShadow = true; 
11.  
12.        /* 解決陰影造成的條紋 */ 
13.        obj.material.side = THREE.FrontSide; 
14.        obj.material.shadowSide = THREE.FrontSide; 
15.    }); 
16.  
17.    scene.add(model); 
18. }); 

/* 載入模型 */
new THREE.GLTFLoader().load('Model.glb', function (gltf) {
    const model = gltf.scene;

    model.traverse(obj => {
        if (!obj.isMesh) { return; }

        obj.frustumCulled = false;
        obj.castShadow = true;
        obj.receiveShadow = true;

        /* 解決陰影造成的條紋 */
        obj.material.side = THREE.FrontSide;
        obj.material.shadowSide = THREE.FrontSide;
    });

    scene.add(model);
});