javascript - ThreeJS - ExtrudeGeometry depth gives different result than extrudePath

Question

I use THREE.ExtrudedGeometry in two different ways and I expected the same result.

Once I use the depth to set the extrusion options. Another time I use an extrude path which is a line from Vector3(0, 0, 0) to Vector3(0, 0, depth)

The strange thing is that the resulting geometry is unsuspectingly rotated around the Z-axis. Why is this? Is this expected behavior or am I doing something wrong?

A fiddle can be found here and this is my code:

---

Common variables:

// Material for mesh
var material = new THREE.MeshBasicMaterial({color:0xff0000});

// Depth to extrude
var depth = 10;

// Shape to extrude
var shape = new THREE.Shape([
    new THREE.Vector2( -20,-60 ),
    new THREE.Vector2( -20, 60 ),
    new THREE.Vector2(  20, 60 ),
    new THREE.Vector2(  20,-60 )
]);

Here using depth:

var extrudeSettings1 = {
    bevelEnabled: false,
    steps: 1,
    amount: depth
};

var geometry1 = new THREE.ExtrudeGeometry( shape, extrudeSettings1 );

var mesh1 = new THREE.Mesh( geometry1, material );

mesh1.position.set( -50, 0, 0 );

scene.add( mesh1 );

Now using a path

var v1 = new THREE.Vector3( 0, 0, 0 );

var v2 = new THREE.Vector3( 0, 0, depth );

var path = new THREE.LineCurve3( v1, v2 )

var extrudeSettings2 = {
    bevelEnabled: false,
    steps: 1,
    extrudePath: path
};

var geometry2 = new THREE.ExtrudeGeometry( shape, extrudeSettings2 );

var mesh2 = new THREE.Mesh( geometry2, material );

mesh2.position.set( 50, 0, 0 );

scene.add( mesh2 );

EDIT1:

Updated position.set() after WestLangley his comment

EDIT2:

I gave it another thought, but I don't understand WestLangley his answer. The orientation of the shape does not matter for being able to end up on the starting point. Either way the shape is able to have the same orientation as it started.

To illustrate I draw two shapes in the x, y plane and I show the extrusion of the in my opinion only correct result:

Answer 1

You are not doing anything wrong. What you are seeing is a consequence of how the algorithm is implemented. Consider it a "feature".

When you extrude a shape along a path, the shape is free to "spin", and the initial orientation is arbitrary.

Imagine if you were extruding along a closed 3D loop. When you get back to the starting point, the shape must have the same orientation it started with, so the ends of the extrusion match up. The algorithm must have the flexibility to handle this situation.

EDIT: When you extrude along a path, the algorithm computes a series of slowly-varying Frenet Frames. (Look at the Wikipedia animations.) These Frenet Frames determine how the shape is oriented along the path. The extrusion algorithm determines the orientation of the initial Frenet Frame, and that initial orientatioin can result in a "spinning" of the shape.

three.js r.68