Graphics 使用自定义速度沿曲线移动对象

我有一个catmull rom曲线，定义了几个控制点，如下所示：

我想为沿曲线移动的对象设置动画，但能够定义对象的速度

当使用getPoint方法在曲线的点上迭代时，对象会作弦向移动（在图像中，u=0时，我们在p1，u=0.25时，我们在p2等）。使用getPointAt方法，对象沿曲线匀速移动

但是，我希望对动画有更大的控制，以便我可以指定从p1到p2的移动应为0.5，从p2到p3，0.3，从p3到p4 0.2。这可能吗

但是，我希望对动画有更大的控制，以便我可以指定从p1到p2的移动应为0.5，从p2到p3，0.3，从p3到p4 0.2。这可能吗

---

可以通过使用动画库（如）来实现这一点。通过这种方式，可以指定对象的开始和结束位置以及所需的持续时间。也可以使用自定义转换类型。

您有多个选项，我将介绍理论，然后介绍一个可能的实现

理论 你想要改变你的曲线。这意味着参数中的增量为1会导致沿曲线的移动距离为1

这个参数化将允许你完全控制你的物体以任何你想要的速度运动，不管它是线性的，非线性的，分段的

可能的应用 有许多数值积分技术可以使曲线参数化

一种可能的方法是预先计算这些值并将它们放在表中。选取一个小ε，从第一个参数值x_0开始，计算x_0，x_0+ε，x_0+2*ε处的函数

进行此操作时，获取每个样本之间的线性距离，并将其添加到累加器中。i、 e行驶距离+=长度（样本[x]，样本[x+1]）

把这一对放在桌子上

现在，当你在x处，想要移动y单位时，你可以将x四舍五入到最近的x_n，然后线性查找距离大于y的第一个x_n值，然后返回该x_n

这个算法不是最有效的，但是它很容易理解和编码，所以至少它可以让你开始

---

如果您需要更优化的版本，请查找弧长参数化算法。

谢谢您的建议。我最终实现这一点的方法是在我的时间变量（three.js getPoint函数的u变量）之间创建一个自定义映射

我使用名为的javascript库创建了一个分段线性函数。通过这种方式，我可以将t映射到u，以便：

• t=0时，u=0，导致p1
• t=0.5时，u=1/3，导致p2
• t=0.8时，u=2/3，导致p3
• t=1时，u=1，导致p4

---

是的，这是可能的，但您需要考虑失真，因为

u

参数是非线性的，它取决于曲率和控制点的均匀性（它们之间的距离），因此为了获得更好的精度，您首先需要线性化

u

（在圆弧/曲线长度和

u

之间转换）然后你可以在上面应用任何物理。。。对于线性化，您可以使用二进制搜索或一些我不知道的更高的数学工具，它们可以计算从

u开始到向后的曲线距离。这就是我最后所做的。弧长参数化使用getPointAt函数内置在three.js中