Three.js - Extruding along normal rotates the output mesh

Question

I have a PlaneGeometry with only 2 faces (the red one in the pic). I'm trying to extrude one of them along its normal with the following function:

function extrude( mesh, amount ) {

var geometry = mesh.geometry;

//execute only on the first face
for( var f = 0; f < geometry.faces.length -1; f++){

    var face = geometry.faces[ f ];
    var f_normal = face.normal;

    //This is the vertex used by the extrusion path//
    var vertex = geometry.vertices[ face.a ]; 

    //create 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) )
        ] );

    //get vertices
    var v1 = geometry.vertices[ face.a ];
    var v2 = geometry.vertices[ face.b ];
    var v3 = geometry.vertices[ face.c ];

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

    //extrude 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} );

    //create new mesh
    var mesh = new THREE.Mesh( extrudedGeo, material);

    scene.add( mesh);


}

}

It extrudes perfectly along its normal but the extruded mesh seems to be rotated (I'm using the face.a vertex for the extrusion path, but same happens if I switch to b or c). Why is this happening? I want the new geometry/mesh to perfectly sit on the face it was extruded from, how can I do?

Probably the original shape is also rotated? Did you apply a matrix or a rotation to the shape that the initial geometry is part of somewhere? — Wilt
@Wilt No the shape is not rotated, and not even the PlaneGeometry. It has been created using default params, no rotation applied — leota

Wilt Wilt · Accepted Answer · 2016-03-24T12:42:29

When you extrude a shape over a path, the result is allowed to spin freely on the path. This is because if the shape is for example extruded over a spline curve it will need to rotate to extrude into a consistent shape.

Sadly enough you cannot easily control/predict the initial rotation.

If you don't want the shape to rotate you could consider using extrude depth instead of extrude path:

var extrudeSettings = {
    bevelEnabled: false,
    steps: 1,
    amount: depth // depth or height for extrusion
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, material );

Read also my related question on the different behavior of extrude depth and extrude path on stackoverflow here

UPDATE1:

I agree totally with your comment:

"this is one of the most basic modifiers in every 3d modelling software, thought it was simpler to replicate"

I wish it was more user friendly, but apparently this is just how it is in the current version of three.js. For extruding in a different direction you can apply a shear matrix after you performed the extrusion. You can read on how to do this in the answer to another question of mine on this topic.

UPDATE2:

I also remember once using the following trick:

Extrude shape using a depth and then apply a transformation to half of the vertices (geometry.vertices) of the extruded result (in other words the upper plane of the geometry). This might sometimes be easier than figuring out what the correct shear matrix is for the desired result.

Three.js - Extruding along normal rotates the output mesh

1 Answers

UPDATE1:

UPDATE2: