Javascript 三轴平稳过渡样条曲线

我正在用三个J画一条立体曲线。但是，我希望它是一部分一部分地绘制，并有一个稳定的过渡，而不是一次绘制整个曲线。你可以想象它是一个移动的火箭，留下了气体痕迹

我的想法如下

找到构成CubicBezierCurve3的所有点，并保存在名为“allpoints”的变量中。假设我们在立体曲线3中正好找到了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;

在每次迭代中，绘制10个点，这意味着

迭代0：绘制点0到9迭代1：绘制点10到19 迭代2：绘制点20至29迭代3：绘制点30至 39迭代4：绘制点40到49

此函数负责在每次迭代中绘制10个点，因为我们有50个点，所以我们可以在第5次迭代结束时调用cancelAnimationFrame。该函数包含一些变通方法，以保证计时。（只有在每10次迭代后，我才能绘制10点序列，否则，转换将太快，我们将无法分辨出差异）

函数drawPointCloud（）{
//场景。移除（点）；
//场景。移除（点序列）；
//setClearColor（0x000000，1.0）；
log（“在drawPointCloud内部，计数=”+计数）
如果（计数=50）
{
log（“已停止”）
取消AnimationFrame（animationTracker）；
返回；
}
如果（计数%10==0）
{
var tempcount=计数；
计数/=10；
var first=10*计数；
var last=10*（计数+1）；
log（“在drawPointCloud内部，计数=”+count+“first=”+first+“last=”+last=”）
console.log（所有点[第一个]）
console.log（所有点[最后]）
var dotGeometry=new THREE.Geometry（）；
var dotMaterial=new THREE.PointCloudMaterial（{size:5，sizeAttenuation:false}）；
对于（var i＝第一；i ），也许您应该考虑使用粒子系统，如<强> <强> >如
中所示。
它已经让我想起了火箭的“气体轨迹”…
看看是否有用。
 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);
    }