When working with a PlaneGeometry that has only 2 faces (the red one in the image), I encountered an issue while trying to extrude one of them along its normal using a specific function:
function extrude( mesh, amount ) {
var geometry = mesh.geometry;
//Performing the operation on the first face only
for( var f = 0; f < geometry.faces.length -1; f++){
var face = geometry.faces[ f ];
var f_normal = face.normal;
//Vertex used by the extrusion path//
var vertex = geometry.vertices[ face.a ];
//Creating the extrusion path
var spline = new THREE.SplineCurve3( [
new THREE.Vector3( vertex.x, vertex.y, vertex.z ),
new THREE.Vector3( vertex.x + (f_normal.x * amount), vertex.y + (f_normal.y * amount), vertex.z + (f_normal.z * amount) )
] );
//Gathering vertices
var v1 = geometry.vertices[ face.a ];
var v2 = geometry.vertices[ face.b ];
var v3 = geometry.vertices[ face.c ];
//Drawing the shape
var shape = new THREE.Shape();
shape.moveTo( v1.x, v1.y, v1.z );
shape.lineTo( v2.x, v2.y, v2.z );
shape.lineTo( v3.x, v3.y, v3.z );
shape.lineTo( v1.x, v1.y, v1.z );
//Extruding it
var extrudeSettings = { amount: amount, extrudePath: spline, steps: 1, bevelEnabled: false };
var extrudedGeo = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material = new THREE.MeshPhongMaterial( {color: 0x00ff00, wireframe: true} );
//Creating a new mesh
var mesh = new THREE.Mesh( extrudedGeo, material);
scene.add( mesh);
}
}
Although the extrusion occurs perfectly along its normal, the resulting mesh appears to be rotated. This happens even when switching the vertex used for the extrusion path from a to b or c. Why is this rotation occurring? How can I ensure that the new geometry/mesh aligns perfectly with the original face it was extruded from? https://i.sstatic.net/3Etzk.png