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 ment

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:

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 ment

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:

• javascript
• three.js
• geometry

Share Improve this question Follow edited Sep 3, 2014 at 8:40 Wilt asked Sep 2, 2014 at 14:44 WiltWilt 44.6k1515 gold badges161161 silver badges214214 bronze badges 1

• Tip: in three.js r.68, the pattern mesh.position = new THREE.Vector3( 50, 0, 0 ); is no longer valid. Use mesh.position.set( 50, 0, 0 ); instead. – WestLangley Commented Sep 2, 2014 at 21:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

the behavior can be explained if you look into the source code of THREE.ExtrudedGeometry and THREE.TubeGeometry.FrenetFrames

here's in the ments of ExtrudeGeometry

• extrudePath: // 3d spline path to extrude shape along. (creates Frames if .frames aren't defined)
• frames: // containing arrays of tangents, normals, binormals

so essentially, like WestLangley says, if extrudePath is specific, the geometry is extruded along a 3d spline path, and uses FrenetFrames for adjustment of rotation, unlike the simple approach of a normal extrusion.

In THREE.TubeGeometry.FrenetFrames you might see mented code for the initialNormal1. You might unment those if you wish to explore different intial positions, or pass in a FrenetFrames of your intended behavior.

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 putes 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