2D 恒速的 ThreeJS 动画 - 遵循贝塞尔曲线答案

【问题标题】：ThreeJS animation in 2D constant speed - following a bezier curve2D 恒速的 ThreeJS 动画 - 遵循贝塞尔曲线
【发布时间】：2018-09-09 23:21:20
【问题描述】：

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

这些是我的曲线。

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

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

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

【问题讨论】：

见stackoverflow.com/questions/18400667/…
感谢我不得不使用 .getPointAt(t) 而不是 .getPoint(t)。

标签： javascript three.js

【解决方案1】：

我的图像 moveParticlesAlongCurve 被连续调用，i 在外部某处定义，您可以尝试在 setTimeout 内增加 i 以延迟下一个滴答声，看看是否有帮助。

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

【讨论】：

【解决方案2】：

要保持恒定速度，您应该使用curve.getPointAt( t ) 而不是curve.getPoint( t )。

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

three.js r.91

【讨论】：