我正在三个 js 中绘制 CubicBezierCurve3 曲线。但是，我希望它以稳定的过渡逐部分绘制，而不是一次绘制整条曲线。你可以把它想象成一个移动的火箭，留下一条气体轨迹。
我的想法如下
找到构成 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;在每次迭代中，绘制 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小提琴
我的问题是，有没有更好的方法/API 来实现这一点？另外，我想在关闭之前稍微延迟一下，比如 LED 如何关闭而不是突然变得不可见。实际上，它甚至不必通过使用单个点来完成，正如我所尝试的那样，我正在寻找任何可以增量绘制给定三次贝塞尔曲线的部分的东西。
