javascript - Threejs TubeGeometry : Applying custom curve causes unexpected twisting

Question

我创建了一条应用于 TubeGeometry 的自定义曲线。 X 轴上的曲线顶点受鼠标移动影响，而 Z 轴是受时间增量影响的简单正弦曲线:

    CustomSinCurve = THREE.Curve.create(

        function ( scale ) { 
        },

        function ( t ) {
            var coef = 3 * mousePctX;
            var tx = coef * ( Math.sin(( t ) * self.amplitude ));
                ty = t * self.neckLength,
                tz = Math.sin((t + time) * self.amplitude);

            var vertex = new THREE.Vector3(tx, ty, tz).multiplyScalar(self.scale);
            return vertex;
        }
    );

这按预期工作，除了当鼠标移近中心时， pipe 似乎在 Y 轴上“翻转”90 度。预期结果是红线始终面朝上。正如您在下面的工作示例中所看到的，当曲线在 X 轴上变直时，绿线更频繁地朝上。对于为什么会发生这种“翻转”有什么想法吗？

还值得注意的是，在上面的 CustomSinCurve 函数中，如果“tx”设置为“0”，则绿线朝上，而我希望红线朝上。

这是工作示例:http://dev.cartelle.nl/tubeExample/

完整代码在这里:http://dev.cartelle.nl/tubeExample/js/TubeExample.js

Answer 1

TubeGeometry.js 内部

    //if ( tx <= smallest ) {
        //smallest = tx;
        //normal.set( 1, 0, 0 );
    //}

    //if ( ty <= smallest ) {
        //smallest = ty;
        //normal.set( 0, 1, 0 );
    //}

    //if ( tz <= smallest ) {
        normal.set( 0, 0, 1 );
    //}