MeshNormalMaterial不處理three.js自定義幾何體：幾何體呈現為黑色

Question

我試圖通過聲明其向量和面來使用three.js手動構建一個立方體; 我可以使用下面的代碼來完成它，但是，材料似乎沒有按預期工作，而是立方體呈現為純黑色。

var geom = new THREE.Geometry(); 
var v1 = new THREE.Vector3( -1,  1, 0.1 ),
    v2 = new THREE.Vector3(  1,  1, 0.1 ),
    v3 = new THREE.Vector3(  1, -1, 0.1 ),
    v4 = new THREE.Vector3( -1, -1, 0.1 ),
    v5 = new THREE.Vector3( -1,  1, 2   ),
    v6 = new THREE.Vector3(  1,  1, 2   ),
    v7 = new THREE.Vector3(  1, -1, 2   ),
    v8 = new THREE.Vector3( -1, -1, 2   );

geom.vertices.push(v1,v2,v3,v4,v5,v6,v7,v8);

geom.faces.push(
  new THREE.Face3(0,1,3),
  new THREE.Face3(1,2,3),
  new THREE.Face3(4,5,7),
  new THREE.Face3(5,6,7),
  new THREE.Face3(1,4,5),
  new THREE.Face3(0,1,4),
  new THREE.Face3(2,3,7),
  new THREE.Face3(2,6,7),
  new THREE.Face3(0,3,7),
  new THREE.Face3(0,4,7),
  new THREE.Face3(1,2,5),
  new THREE.Face3(2,5,6)  
);

var mat = new THREE.MeshNormalMaterial();
mat.side = THREE.DoubleSide;
var cube = new THREE.Mesh( geom, mat);
scene.add(cube);

如果我正常渲染立方體，使用下面的代碼，立方體將按預期渲染。

cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), new THREE.MeshNormalMaterial());
scene.add(cube);

Answer 1

您尚未指定頂點法線。 對於快速的東西，計算面法線，如下：

geom.computeFaceNormals();

但您應該學習如何在自定義幾何體中設置頂點法線。

此外，面對“纏繞順序”應逆時針。 你不是一直這樣做的。

如果正確定義了面，則可以刪除side = THREE.DoubleSide 。

three.js r.90