在新创建的面上计算面法线

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?

我在场景中有一个简单的CricleGeometry,我复制它的顶点并创建新的面来模拟一个挤压。在创建新面后,我运行“computeFaceNormals()”,但它们的方向是交替的。我怎么能让所有面向外?

Here's a screenshot:

这是一个截图:

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

1 个解决方案

#1

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

当您调用Geometry.computeFaceNormals()时,面法线的方向由面的顶点的缠绕顺序决定。

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中,您需要在查看面部正面时以逆时针顺序指定顶点。在这种情况下,computeFaceNormals()计算的面法线将指向您。

three.js r.75

#1