如何在同一样条曲线上挤出不同的形状而不会中断

Question

我正在编写一个场景，其中使用 ExtrudeGeometry 生成的网格从 SplineCurve3 中挤出的不同形状， ExtrudeGeometry中用作 extrudePath 的设置。

目前，要做到这一点，我将样条分割成许多段，但是存在一个问题，如附图所示：

我希望第二个网格（星形）的起点垂直于前一个网格（圆圈）的终点。

这是我的jsfiddle。

现在您可以在图片和演示中看到，星形不会垂直于圆形开始。

我找到了this主题，它似乎描述了相同的情况，我读了这些答案：one，two。

所以，可能，读取最后一个second链接，我需要知道spline_1上最后一个点水平的切线和向上矢量（= Y）之间的角度，然后应用该角度进行旋转与spline_2一起使用的形状的正常，在挤出它之前，也许为此我需要在ExtrudeGeometry中使用“frames”选项......但是我还没有找到任何关于如何在frame选项中传递binormal vector的例子...我发现而是this页面，以了解如何计算切线和副法线，以填补我的知识;在我的例子中，我需要将spline_2的第一帧中的形状（星号）与spline_1的最后一帧中的形状（圆圈）对齐;所以，我可能需要知道spline_1的最后一个点上的切线和向上矢量之间的角度，并将该角度应用于spline_2的第一帧的副法线上的旋转...所以我尝试在添加网格之前添加跟随到现场：

var tangent, axis, up, radians;
var t = 1; // last point of spline_1
tangent = spline_1.getTangent( t ).normalize(); // tangent unit on last point of spline_1, which I need to pass as tangent for the first point of spline_2
up = new THREE.Vector3(0,1,0); // set up-vector equal to Y axis
radians = Math.acos( up.dot( tangent ) ); // angle between up-vector and tangent in last point of spline_1, to be applied on binormal of spline_2 at its first frame
axis = new THREE.Vector3(); // create a new vector for binormal (= rotation axis)
axis.crossVectors( up, tangent ).normalize(); // binormal equal to cross product between up and tangent vectors of spline_1, which I need to pass as binormal for the first point of spline_2

但现在如何仅旋转spline_2的第一帧，而不是将旋转应用于所有拉伸的星形网格？...也许在ExtrudeGeometry中使用框架选项？

作为替代方法，可以使用独特样条线的片段来挤出不同的形状（避免可能出现上述问题），如@WestLangley所示？例如，在this主题之后，我尝试使用“t”作为参考来设置唯一样条曲线上的位置，但没有成功;考虑：

// Catmull-Rom spline (SplineCurve3)
// t = (point number) / (number of points - 1)
var spline = new THREE.SplineCurve3([
    new THREE.Vector3(7.67, 279.32, 904.50), // t = 0
    new THREE.Vector3(21.48, 265.57, 937.23), // t = 1/23
    new THREE.Vector3(57.94, 254.71, 934.70), // t = 2/23
    new THREE.Vector3(49.16, 217.44, 935.41), // t = 3/23
    new THREE.Vector3(28.10, 221.71, 903.81), // t = 4/23
    new THREE.Vector3(51.95, 247.45, 888.89), // t = 5/23
    new THREE.Vector3(71.82, 240.66, 857.35), // t = 6/23
    new THREE.Vector3(100.53, 261.25, 871.66), // t = 7/23
    new THREE.Vector3(107.88, 249.14, 907.15), // t = 8/23
    new THREE.Vector3(138.08, 227.01, 908.38), // t = 9/23
    new THREE.Vector3(155.60, 208.83, 937.33), // t = 10/23
    new THREE.Vector3(186.68, 228.31, 947.35), // t = 11/23
    new THREE.Vector3(206.93, 195.57, 943.90), // t = 12/23
    new THREE.Vector3(203.43, 198.27, 906.12), // t = 13/23
    new THREE.Vector3(227.68, 227.35, 907.16), // t = 14/23
    new THREE.Vector3(264.72, 231.83, 910.87), // t = 15/23
    new THREE.Vector3(277.70, 267.24, 914.58), // t = 16/23
    new THREE.Vector3(312.24, 269.76, 898.61), // t = 17/23
    new THREE.Vector3(323.17, 305.65, 893.96), // t = 18/23
    new THREE.Vector3(310.66, 337.84, 909.49), // t = 19/23
    new THREE.Vector3(307.87, 363.10, 881.36), // t = 20/23
    new THREE.Vector3(293.54, 391.54, 901.52), // t = 21/23
    new THREE.Vector3(284.14, 402.13, 936.36), // t = 22/23
    new THREE.Vector3(265.69, 431.90, 950.82) // t = 23/23 = 1
]);

for( var t = 0; t < 0.5; t++) {
    var spline_1 = spline.getPoints(t); // to be used as extrudePath with shape_1 for ExtrudeGeometry
}

for( var t = 0.5; t <= 1; t++) {
    var spline_2 = spline.getPoints(t); // to be used as extrudePath with shape_2 for ExtrudeGeometry
}

但这不好。

我请你帮忙解决这个问题...

我很高兴开始理解和合并所有已找到的资源，但没有任何改进。我很乐意为你提供帮助。

非常感谢，

问候，

的Riccardo

＃EDIT 1

找到了在段中拆分唯一样条线的方法，并将它们作为每个形状的squeedePath应用，但我得到了相同的结果：

Test 2