MeshNormalMaterial not working on a three.js custom geometry: the geometry renders as black

问题

I am trying to construct a cube manually using three.js by declaring its vectors and faces; I am able to do it using the code below, however, the material does not seem to be working as expected, instead the cube is rendering in a solid black color.

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);

If I render the cube normally, using the code that follows, the cube renders as expected.

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

回答1:

You haven't specified vertex normals. For something quick, compute face normals, like so:

geom.computeFaceNormals();

but you should learn how to set vertex normals in your custom geometry.

Also, face "winding order" should be counter-clockwise. You are not consistently doing that.

If you define faces correctly, you can remove side = THREE.DoubleSide.

three.js r.90

来源：https://stackoverflow.com/questions/49226576/meshnormalmaterial-not-working-on-a-three-js-custom-geometry-the-geometry-rende

标签

javascript

three.js