二维恒速的ThreeJS动画 - 遵循贝塞尔曲线

Question

我有这个贝塞尔曲线代表我的一些粒子流。问题是我似乎无法控制物体的速度，除非我在贝塞尔曲线上添加更多的点，但效率很低。

这些是我的曲线。

我的代码很简单（在animate()方法中）：

function moveParticlesAlongCurve(particles,curvePoints){
  particles[0].position.x = curvePoints[i].x;
  particles[0].position.y = curvePoints[i].y;
  i++;
}

关于如何控制速度的任何想法？

Answer 1

我的图片In [5]: np.allclose(slow_inverse(A),direct_inverse(A)) Out[5]: True In [6]: %timeit slow_inverse(A) 19 ms ± 138 µs per loop (mean ± std. dev. of 7 runs, 10 loops each) In [7]: %timeit direct_inverse(A) 1.3 ms ± 6.39 µs per loop (mean ± std. dev. of 7 runs, 1000 loops each) 被连续调用，moveParticlesAlongCurve被定义在外面，您可以尝试在i内递增i以延迟下一个滴答，看看是否有帮助。

setTimeout

Answer 2

要保持恒定速度，您应使用curve.getPointAt( t )代替curve.getPoint( t )。

this answer中有关于相关问题的详细信息。

three.js r.91