CODEWITHSUNDEEP
javascriptthree.jsgeometry
Wilt
Wilt

Reputation: 44336

ThreeJS - ExtrudeGeometry depth gives different result than extrudePath

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:

shapes expected extrusion geometry

Upvotes: 4

Views: 5233

Answers (2)

zz85
zz85

Reputation: 521

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

here's in the comments 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 commented code for the initialNormal1. You might uncomment those if you wish to explore different intial positions, or pass in a FrenetFrames of your intended behavior.

Upvotes: 2

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 2

Related Questions