THREE.MeshBasicMaterial 渲染，但 THREE.MeshLambertMaterial 不渲染

Question

我正在做一個制作隨機表格的項目。 它存儲 x、y 和 z 坐標數組並在點之間繪制三角形。 您可以在此屏幕截圖中看到此功能運行良好。

我使用 MeshBasicMaterial 來制作該表，但想切換到 MeshLambertMaterial 以利用照明。 當我嘗試這個時，我得到一張看起來像這樣的表。

這是綠色瓷磚上的基本網格代碼：

for(j = 0; j < h-1; j++) {      //h is the number of tiles vertically
    for(i = 0; i < w-1; i++) {  //w is the number of tiles horizontally
        o = ((j%2==1)?1:0);     //checks if the row is odd
        var geom = new THREE.Geometry();
        var a = new THREE.Vector3(x[i][j],      y[i][j]     ,z[i][j]);
        var b = new THREE.Vector3(x[i+1][j],    y[i+1][j]   ,z[i+1][j]);
        var c = new THREE.Vector3(x[i+o][j+1],  y[i+o][j+1] ,z[i+o][j+1]);
        geom.vertices.push(a);
        geom.vertices.push(b);
        geom.vertices.push(c);
        geom.faces.push(new THREE.Face3(0,1,2));
        tile1[i][j] = new THREE.Mesh(
            geom,
            new THREE.MeshBasicMaterial({color: 'green'})
        );
        scene.add(tile1[i][j]);
    }
}

這是紅色瓷磚上失敗的蘭伯特網格代碼（請注意，我只將“基本”更改為“蘭伯特”）：

for(j = 0; j < h-1; j++) {      //h is the number of tiles vertically
    for(i = 0; i < w-1; i++) {  //w is the number of tiles horizontally
        o = ((j%2==1)?0:1);     //checks if the row is even
        var geom = new THREE.Geometry();
        var a = new THREE.Vector3(x[i+o][j],    y[i+o][j]   ,z[i+o][j]);
        var b = new THREE.Vector3(x[i+1][j+1],  y[i+1][j+1] ,z[i+1][j+1]);
        var c = new THREE.Vector3(x[i][j+1],    y[i][j+1]   ,z[i][j+1]);
        geom.vertices.push(a);
        geom.vertices.push(b);
        geom.vertices.push(c);
        geom.faces.push(new THREE.Face3(0,1,2));
        tile2[i][j] = new THREE.Mesh(
            geom,
            new THREE.MeshLambertMaterial({color: 'red'})
        );
        scene.add(tile2[i][j]);
    }
}

使用以下蘭伯特網格創建的立方體可以完美地工作並正確捕捉光線。

scene.add(new THREE.Mesh(new THREE.BoxGeometry(10,1000,5),new THREE.MeshLambertMaterial({color:'red'})));

為什么 Lambert 網格不適用於基本網格適用的幾何體？

編輯：我在工作表下放置了一個彩色盒子來測試盒子對光照的反應，發現它上面的瓷磚沒有渲染失敗，只是黑色。 它們是不透明的，但不要像盒子一樣使用顏色或拾取光線。

Answer 1

您的場景中應該有燈光以從THREE.LambertMaterial 。 您是否正確設置了場景照明？

編輯：

我發現你的問題在哪里。 你應該為你的臉添加一個法線，否則 WebGL 渲染器不知道如何在表面上渲染THREE.LambertMaterial的光反射。 所以像這樣改變你的代碼：

face = new THREE.Face3( 0, 1, 2 );
face.normal = new THREE.Vector3().crossVectors(
    new THREE.Vector3().subVectors( b, a ),
    new THREE.Vector3().subVectors( c, b )
).normalize();
geom.faces.push( face );

現在你的臉應該渲染。

您還可以使用幾何方法來計算它們，而不是手動執行此操作：

geometry.computeFaceNormals();
geometry.computeVertexNormals();