Search code examples
javascriptthree.jsnormalsface

Computing face normals on newly created faces

I've a simple CricleGeometry in the scene and I'm duplicating its vertices and creating new faces to kind of simulate an extrusion. After new faces have been created I run the "computeFaceNormals()" but the orientation of them is alternate. How can I have all faces facing outwards?

Here's a screenshot: enter image description here

Here's the main part of the code:

//geometry
geometry = new THREE.CircleGeometry(100, 12);

geometry.mergeVertices();

material = new THREE.MeshPhongMaterial( { color: 0xffa800 } );


///////////////////////////////////////////////////////////////

//CREATE NEW FACES

///////////////////////////////////////////////////////////////


var sideGeo = new THREE.Geometry(); 

//duplicate vertices
for ( var v = 0; v < geometry.vertices.length; v++ ) {

    sideGeo.vertices.push( geometry.vertices[ v ].clone() );
    sideGeo.vertices.push( geometry.vertices[ v ].clone() );

}

//translate every second vertex on Z by 10
for ( var v = 0; v < sideGeo.vertices.length; v += 2 ) {

    sideGeo.vertices[ v ].z += 100;

}

//add them to faces
for ( var v = 0; v < sideGeo.vertices.length -2; v++ ) {

    //vertices IDs
    var a = v;
    var b = v + 1;
    var c = v + 2;

    //add them to a face
    var f = new THREE.Face3(a, b, c);
    sideGeo.faces.push(f);


}

//merge with original geo and compute face normals
geometry.merge(sideGeo);

geometry.computeFaceNormals();


//mesh
mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);
Solution

  • When you call Geometry.computeFaceNormals(), the orientation of the face normal is determined by the winding order of the vertices of the faces.

    In three.js, you need to specify your vertices in counter-clockwise order when looking at the front of the face. In which case, the face normal computed by computeFaceNormals() will point at you.

    three.js r.75