Three.js-如何在挤出计量中使用框架选项

我在Three.js中找不到关于如何使用frames选项进行挤出计量的解释。它说：

但我不明白框架必须如何定义。我认为使用frames选项，传递三个以某种方式计算的切线、法线和副法线数组，但是如何在帧中传递它们呢？。。。可能与变形法线类似：

三个相同长度的阵列可能对应挤出计量学中的台阶或曲线段选项

非常感谢你的解释

编辑1：

对法线[0]和副法线[0]也执行同样的操作，以确保样条曲线_1的最后一个点t=1和样条曲线_2的第一个点t=0的方向相同

编辑3

我尝试使用ArrowHelper来可视化mypath样条线的每个控制点的切线、法线和副法线，但是，正如您在现场加载中看到的，您需要缓慢地缩小场景，直到看到ArrowHelper，才能找到它们。相对代码从小提琴中的第122行到第152行开始，箭头辅助对象不从原点开始，而是远离原点。如何在选中“调试法线”复选框时获得与“参考演示”相同的结果

编辑4

我绘制了两条样条线，分别在点A=原点处结束蓝色样条线和开始红色样条线，在点A处为每条样条线显示切线、法线和副法线向量，蓝色样条线的标签使用青色，红色样条线的标签使用黄色

如上所述，为了对齐并使两条样条曲线连续，我想利用三个向量切线、法线和副法线。理论上，我应该使用哪种数学运算来旋转蓝色样条曲线的端面，使其可以看到红色样条曲线的初始面黄色面，从而使图片中隐藏的切线D，D’、法线B，B'和副法线C，C'对齐？我应该使用四元数的.setFromUnitVectors vFrom，VTO方法吗？在其中，我读到：>所以，我可能需要定义三个四元数：

四元数，用于规范化切线D矢量在规范化切线D'矢量方向上的旋转 四元数，用于规范化法线B向量在规范化法线B'向量方向上的旋转 四元数，用于规范化二正规C向量在规范化二正规C'向量方向上的旋转 与：

vFrom=标准化的D、B和C向量 VTO​​= 标准化D'，B'和C'向量 并分别将这三个四元数中的每一个应用于未规范化的D、B和C

再次非常感谢

编辑5

我尝试了以下代码，查看图像中如何对齐向量，但没有任何更改：

var numSegments_1 = points_1.length; // points_1 = list of points
var frames_1 = new THREE.TubeGeometry.FrenetFrames( points_1_spline, numSegments_1, false ); // path, segments, closed
var tangents_1 = frames_1.tangents,
    normals_1 = frames_1.normals,
    binormals_1 = frames_1.binormals;

var numSegments_2 = points_2.length;
var frames_2 = new THREE.TubeGeometry.FrenetFrames( points_2_spline, numSegments_2, false );
var tangents_2 = frames_2.tangents,
    normals_2 = frames_2.normals,
    binormals_2 = frames_2.binormals;

var b1_b2_angle = binormals_1[ binormals_1.length - 1 ].angleTo( binormals_2[ 0 ] ); // angle between binormals_1 (at point A of spline 1) and binormals_2 (at point A of spline 2)
var quaternion_n1_axis = new THREE.Quaternion();
quaternion_n1_axis.setFromAxisAngle( normals_1[ normals_1.length - 1 ], b1_b2_angle ); // quaternion equal to a rotation on normal_1 as axis
var vector_b1 = binormals_1[ binormals_1.length - 1 ];
vector_b1.applyQuaternion( quaternion_n1_axis ); // apply quaternion to binormals_1

var n1_n2_angle = normals_1[ normals_1.length - 1 ].angleTo( normals_2[ 0 ] ); // angle between normals_1 (at point A of spline 1) and normals_2 (at point A of spline 2)
var quaternion_b1_axis = new THREE.Quaternion();
quaternion_b1_axis.setFromAxisAngle( binormals_1[ binormals_1.length - 1 ], -n1_n2_angle ); // quaternion equal to a rotation on binormal_1 as axis
var vector_n1 = normals_1[ normals_1.length - 1 ];
vector_n1.applyQuaternion( quaternion_b1_axis ); // apply quaternion to normals_1

除此之外，任何其他方式都不会：

var numSegments_1 = points_1.length; // points_1 = list of points
var frames_1 = new THREE.TubeGeometry.FrenetFrames( points_1_spline, numSegments_1, false ); // path, segments, closed
var tangents_1 = frames_1.tangents,
    normals_1 = frames_1.normals,
    binormals_1 = frames_1.binormals;

var numSegments_2 = points_2.length;
var frames_2 = new THREE.TubeGeometry.FrenetFrames( points_2_spline, numSegments_2, false );
var tangents_2 = frames_2.tangents,
    normals_2 = frames_2.normals,
    binormals_2 = frames_2.binormals;

var quaternion_n1_axis = new THREE.Quaternion();
quaternion_n1_axis.setFromUnitVectors( binormals_1[ binormals_1.length - 1 ].normalize(), binormals_2[ 0 ].normalize() );
var vector_b1 = binormals_1[ binormals_1.length - 1 ];
vector_b1.applyQuaternion( quaternion_n1_axis );

var quaternion_b1_axis = new THREE.Quaternion();
quaternion_b1_axis.setFromUnitVectors( normals_1[ normals_1.length - 1 ].normalize(), normals_2[ 0 ].normalize() );
var vector_n1 = normals_1[ normals_1.length - 1 ];
vector_n1.applyQuaternion( quaternion_b1_axis );

---

试试这个：frames=new THREE.TubeGeometry.FrenetFrames路径，numSegments。您可能需要学习源代码。@WestLangley，非常感谢！查看我的编辑1中使用的代码：我看到TubeGeometry.js文件的源代码，在第46行。你的问题是什么？@WestLangley，我添加了一个编辑2，为什么不？试试看。您只需要研究源代码。

String.prototype.format = function () {
    var str = this;
    for (var i = 0; i < arguments.length; i++) {
        str = str.replace('{' + i + '}', arguments[i]);
    }
    return str;
}

var numSegments = 6;
var frames = new THREE.TubeGeometry.FrenetFrames( new THREE.SplineCurve3(spline), numSegments );
var tangents = frames.tangents,
    normals = frames.normals,
    binormals = frames.binormals;

var tangents_list = [],
    normals_list = [],
    binormals_list = [];
for ( i = 0; i < numSegments; i++ ) {
    var tangent = tangents[ i ];
    var normal = normals[ i ];
    var binormal = binormals[ i ];
    tangents_list.push("({0}, {1}, {2})".format(tangent.x, tangent.y, tangent.z));
    normals_list.push("({0}, {1}, {2})".format(normal.x, normal.y, normal.z));
    binormals_list.push("({0}, {1}, {2})".format(binormal.x, binormal.y, binormal.z));
}
alert(tangents_list);
alert(normals_list);
alert(binormals_list);

var spline = new THREE.SplineCurve3([
    new THREE.Vector3(20.343, 19.827, 90.612),  // t=0
    new THREE.Vector3(22.768, 22.735, 90.716),  // t=1/12
    new THREE.Vector3(26.472, 23.183, 91.087),  // t=2/12
    new THREE.Vector3(27.770, 26.724, 91.458),  // t=3/12
    new THREE.Vector3(31.224, 26.976, 89.861),  // t=4/12
    new THREE.Vector3(32.317, 30.565, 89.396),  // t=5/12
    new THREE.Vector3(31.066, 33.784, 90.949),  // t=6/12
    new THREE.Vector3(30.787, 36.310, 88.136),  // t=7/12
    new THREE.Vector3(29.354, 39.154, 90.152),  // t=8/12
    new THREE.Vector3(28.414, 40.213, 93.636),  // t=9/12
    new THREE.Vector3(26.569, 43.190, 95.082),  // t=10/12
    new THREE.Vector3(24.237, 44.399, 97.808),  // t=11/12
    new THREE.Vector3(21.332, 42.137, 96.826)   // t=12/12=1
]);

var spline_1 = [], spline_2 = [], t;

for( t = 0; t <= (7/12); t+=0.0001) {
    spline_1.push(spline.getPoint(t));
}

for( t = (7/12); t <= 1; t+=0.0001) {
    spline_2.push(spline.getPoint(t));
}

tangents[0].x = 0.301;
tangents[0].y = 0.543;
tangents[0].z = 0.138;

var numSegments_1 = points_1.length; // points_1 = list of points
var frames_1 = new THREE.TubeGeometry.FrenetFrames( points_1_spline, numSegments_1, false ); // path, segments, closed
var tangents_1 = frames_1.tangents,
    normals_1 = frames_1.normals,
    binormals_1 = frames_1.binormals;

var numSegments_2 = points_2.length;
var frames_2 = new THREE.TubeGeometry.FrenetFrames( points_2_spline, numSegments_2, false );
var tangents_2 = frames_2.tangents,
    normals_2 = frames_2.normals,
    binormals_2 = frames_2.binormals;

var b1_b2_angle = binormals_1[ binormals_1.length - 1 ].angleTo( binormals_2[ 0 ] ); // angle between binormals_1 (at point A of spline 1) and binormals_2 (at point A of spline 2)
var quaternion_n1_axis = new THREE.Quaternion();
quaternion_n1_axis.setFromAxisAngle( normals_1[ normals_1.length - 1 ], b1_b2_angle ); // quaternion equal to a rotation on normal_1 as axis
var vector_b1 = binormals_1[ binormals_1.length - 1 ];
vector_b1.applyQuaternion( quaternion_n1_axis ); // apply quaternion to binormals_1

var n1_n2_angle = normals_1[ normals_1.length - 1 ].angleTo( normals_2[ 0 ] ); // angle between normals_1 (at point A of spline 1) and normals_2 (at point A of spline 2)
var quaternion_b1_axis = new THREE.Quaternion();
quaternion_b1_axis.setFromAxisAngle( binormals_1[ binormals_1.length - 1 ], -n1_n2_angle ); // quaternion equal to a rotation on binormal_1 as axis
var vector_n1 = normals_1[ normals_1.length - 1 ];
vector_n1.applyQuaternion( quaternion_b1_axis ); // apply quaternion to normals_1

var numSegments_1 = points_1.length; // points_1 = list of points
var frames_1 = new THREE.TubeGeometry.FrenetFrames( points_1_spline, numSegments_1, false ); // path, segments, closed
var tangents_1 = frames_1.tangents,
    normals_1 = frames_1.normals,
    binormals_1 = frames_1.binormals;

var numSegments_2 = points_2.length;
var frames_2 = new THREE.TubeGeometry.FrenetFrames( points_2_spline, numSegments_2, false );
var tangents_2 = frames_2.tangents,
    normals_2 = frames_2.normals,
    binormals_2 = frames_2.binormals;

var quaternion_n1_axis = new THREE.Quaternion();
quaternion_n1_axis.setFromUnitVectors( binormals_1[ binormals_1.length - 1 ].normalize(), binormals_2[ 0 ].normalize() );
var vector_b1 = binormals_1[ binormals_1.length - 1 ];
vector_b1.applyQuaternion( quaternion_n1_axis );

var quaternion_b1_axis = new THREE.Quaternion();
quaternion_b1_axis.setFromUnitVectors( normals_1[ normals_1.length - 1 ].normalize(), normals_2[ 0 ].normalize() );
var vector_n1 = normals_1[ normals_1.length - 1 ];
vector_n1.applyQuaternion( quaternion_b1_axis );