javascript - 3つのjsで安定した遷移を伴うスプライン曲線

Question

私は3つのjsでCubicBezierCurve3曲線を描いています。ただし、曲線全体を一度に描画するのではなく、部分ごとに着実に遷移して描画したいと思います。ガスの跡を残して動くロケットとしてそれを視覚化することができます。

私の考えは次のとおりでした

1. CubicBezierCurve3 を形成するすべてのポイントを見つけて、「allpoints」という変数に保存します。以下に示すように、CubicBezierCurve3 でちょうど 50 個のポイントが見つかったとします。

   var curve = new THREE.CubicBezierCurve3(
           new THREE.Vector3( -5, 0, 20 ),
           new THREE.Vector3(0, 15, 0 ),
           new THREE.Vector3(0, 15, 0 ),
           new THREE.Vector3( 2, 0, -10 )
   );
   
   geometry = new THREE.Geometry();
   geometry.vertices = curve.getPoints( 50 );
   allpoints = geometry.vertices;
   

2. 反復ごとに 10 点をプロットします。つまり、

反復 0 : ポイント 0 から 9 をプロットする 反復 1 : ポイント 10 から 19 をプロットする 反復 2 : ポイント 20 から 29 をプロットする 反復 3 : ポイント 30 から 39 をプロットする 反復 4 : ポイント 40 から 49 をプロットする

この関数は、反復ごとに 10 個の点をプロットします。50 個の点があるので、5 回目の反復の最後に cancelAnimationFrame を呼び出すことができます。この関数には、タイミングを管理するためのいくつかの回避策が含まれています。違い）

 function drawPointCloud() {
        //scene.remove(dot);
        //scene.remove(dotsequence);
        //renderer.setClearColor(0x000000, 1.0);

        console.log("inside drawPointCloud,count== "+count)

        if(count == 50)
        {
            console.log("stopped.")
            cancelAnimationFrame(animationTracker);
            return;
        }

        if(count%10 == 0)
        {
            var tempcount = count;

            count /= 10;
            var first = 10*count;
            var last = 10*(count + 1);
            console.log("inside drawPointCloud, count=="+count+"first=="+first+"last=="+last)
            console.log(allpoints[first])
            console.log(allpoints[last])
            var dotGeometry = new THREE.Geometry();
            var dotMaterial = new THREE.PointCloudMaterial( { size: 5, sizeAttenuation: false } );
            for(var i = first;i<last;i++)
            {
                dotGeometry.vertices.push(new THREE.Vector3( allpoints[i].x, allpoints[i].y, allpoints[i].z));
            }

            scene.remove(dotsequence);
            dotsequence = new THREE.PointCloud( dotGeometry, dotMaterial );
            scene.add( dotsequence );
            count = tempcount;

            renderer.render(scene, camera);
            camera.position.z -= 0.1;
            camera.position.y -= 0.1;
        }

        count++;
        animationTracker = requestAnimationFrame(drawPointCloud);
    }

JSフィドル

1. これは、私が試したスムーズな移行のJS Fiddleです。
2. これは、CubicBezierCurve3 のすべてのポイントのJS Fiddleです。

私の質問は、これを達成するためのより良い方法/API はありますか? また、LEDが突然見えなくなるのではなく、オフになるように、オフになる前にポイントを少し遅らせたいと思います. 実際には、個々のポイントを使用して行う必要さえありません。私が試したように、特定の 3 次ベジエ曲線の部分を段階的に描画するものを探しています。