三个js中具有稳定过渡的样条曲线

Question

我正在用三个 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。该函数包含一些变通方法，以处理时间问题。（仅在每 10 次迭代之后，我绘制 10 点序列，否则，转换将太快，我们将无法确定区别）

 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 如何关闭而不是突然变得不可见。实际上，它甚至不必通过使用单个点来完成，正如我所尝试的那样，我正在寻找任何可以增量绘制给定三次贝塞尔曲线的部分的东西。

Answer 1

也许您应该考虑使用带有 the THREE.GPUParticleSystem plugin 的粒子系统，如 this example 所示。

它已经让我想起了火箭的“毒气痕迹”...