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

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

Answer 2

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.