ThreeJS - ExtrudeGeometry深度给出与extrudePath不同的结果

Question

我以两种不同的方式使用THREE.ExtrudedGeometry，我期望得到相同的结果。

使用深度设置拉伸选项后。 另一次我使用的挤出路径是Vector3(0, 0, 0)到Vector3(0, 0, depth)

之间的一条线

奇怪的是，生成的几何体无意中绕Z轴旋转。 为什么是这样？这是预期的行为，还是我做错了什么？

小提琴可以找到here，这是我的代码：

---

常见变量：

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

这里使用深度：

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

现在使用路径

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：

在WestLangley发表评论后更新position.set()

EDIT2：

我又想了一下，但我不明白WestLangley他的回答。形状的方向对于能够在起点上结束无关紧要。无论哪种方式，形状都可以具有与它开始时相同的方向。

为了说明我在x，y平面上绘制了两个形状，并且在我看来只显示正确的挤出结果：

Answer 1

你没有做错任何事。您所看到的是算法实现的结果。将其视为＆＃34;功能＆＃34;。

沿着路径挤出形状时，形状可以自由旋转＆＃34;，初始方向是任意的。

想象一下，如果你沿着一个封闭的3D循环挤出。当您返回起点时，形状必须具有与其开始时相同的方向，因此挤出的末端匹配。该算法必须具有处理这种情况的灵活性。

编辑：沿路径挤出时，算法会计算一系列缓慢变化的Frenet Frames。 （查看Wikipedia动画。）这些Frenet Frames确定形状沿路径的方向。挤出算法确定初始Frenet框架的方向，并且初始定向可以导致旋转＆＃34;形状。

three.js r.68

Answer 2

如果您查看THREE.ExtrudedGeometry和THREE.TubeGeometry.FrenetFrames

的源代码，可以解释此行为

这是ExtrudeGeometry的评论

  

  
• extrudePath：//用于拉伸形状的3d样条曲线路径。 （如果未定义.frames，则创建框架）
  
• frames：//包含切线，法线，副法线
的数组   

基本上，就像WestLangley所说，如果extrudePath是特定的，几何体将沿着三维样条路径挤出，并使用FrenetFrames来调整旋转，这与普通挤出的简单方法不同。

在THREE.TubeGeometry.FrenetFrames中，您可能会看到initialNormal1的注释代码。如果您希望探索不同的初始位置，或者传入预期行为的FrenetFrame，您可以取消注释。