MeshNormalMaterial 不适用于 three.js 自定义几何：几何呈现为黑色答案

【问题标题】：MeshNormalMaterial not working on a three.js custom geometry: the geometry renders as blackMeshNormalMaterial 不适用于 three.js 自定义几何：几何呈现为黑色
【发布时间】：2018-08-19 23:05:45
【问题描述】：

我正在尝试使用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);

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您没有指定顶点法线。快速计算面部法线，如下所示：

geom.computeFaceNormals();

但您应该学习如何在自定义几何体中设置顶点法线。

另外，面“绕线顺序”应该是逆时针的。您并没有始终如一地这样做。

如果你正确定义了面，你可以删除side = THREE.DoubleSide。

three.js r.90

【讨论】：