如何以相同速度沿不同路径移动多个网格?

How do I move many meshes along different paths at the same speed?

背景

我正在创建一个游戏,您可以在其中控制社区中的多个人,所以很明显,人们需要能够自己移动,完成自己的任务。我使用了 in this post 描述的关于如何沿 Three.js 中的路径移动网格/对象的方法。正如您在下面看到的那样,它起作用了,但是所有人都以彼此不同的速度移动。我不要这个。

问题

如何让它们都以相同的速度移动? 如果您有更好的关于如何将网格从一个点移动到另一个点的解决方案,请告诉我如何做。

PS:在我链接的post中,我使用了“花式运动”部分答案。

(如果 fiddle 消失,之前的答案使用一个缓慢递增的变量 path.getPointAt(position) 来沿着路径移动对象。)

Curve.getPointAt 方法采用曲线上的百分比值。由于此计算,点之间的距离(例如 00.1)将根据曲线的长度而有所不同。

所以如果 curve110 units 长,而 curve2100 units 长,那么:

curve1.getPointAt(0.1) // vector 1 unit from the start of curve1
curve2.getPointAt(0.1) // vector 10 units from the start of curve2

如果您以此为基础进行运动,那么基本上沿 curve2 移动的物体将与沿 curve1 移动的物体移动 10x 一样快。

您要做的是确定对象在给定“steps/second”或“steps/frame”的情况下应沿路径走多少步。这更符合真实物理速度的概念,而不是根据所采用路径的长度定义的速度。

假设您想沿着 curve1curve22 units per frame 旅行。现在您以固定速率行进,您只需将速率除以总长度即可获得到达路径终点所需的“步数”(或在本例中为帧数)。

2 / 10  = 0.2  // this is the point polling percentage for curve 1
2 / 100 = 0.02 // this is the point polling percentage for curve 2

现在,当您沿 curve1 移动对象时,您将需要使用 path.getPointAt(0.2),而对于 curve2,您将使用 path.getPointAt(0.02)

向前看一点,您可能会问,当数学没有在完美示例之外排列时会发生什么,并且您有额外的“部分步骤”使其到达曲线的末端。嗯,这取决于你决定如何处理它。您可以花费额外的帧来完成运动,或者您可以在运动计算过程中向前看一步并决定将其发送到最后。