以恒定速度沿路径移动物体

Moving an object along a path with constant speed

我有一个由折线(3D 点阵列)组成的对象路径,其点分布非常不均匀。我需要使用间隔设置为 10 毫秒的计时器以恒定速度移动物体。

不均匀分布的点会产生人眼变化的速度。所以现在我需要决定如何处理这一长串 3D 点。

我的第一个想法是将长段细分为更小的部分。它工作得更好,但问题仍然存在。

在这些情况下最好的方法是什么?另一个想法,可能是使用 Ramer–Douglas–Peucker algorithm 简化原始路径,然后再次平均细分它,但我不确定它是否能完全解决我的问题。

这在 3D 图形的许多领域应该是一个相当普遍的问题,那么是否存在经过验证的方法?

我为你制作了一支 JavaScript 笔 https://codepen.io/dawken/pen/eYpxRmN?editors=0010 但它在任何其他语言中应该非常相似。单击矩形以添加点。

你必须以恒定的速度保持时间依赖性 distance,像这样:

const t = currentTime - startTime;
const distance = (t * speed) % totalLength;

然后你必须找到路径中的两个点,使得当前距离介于路径上的 "distance" 之间;您将 "distance from start of the path" 存储在每个点 {x, y, distanceFromStart} 上。第一点 points[i] 这样 distance < points[i].distanceFromStart 就是你的目的地; points[i - 1] 之前的那一点是你的来源。您需要在它们之间进行线性插值。

假设你没有重复点(否则你会被零除)你可以这样做。

for (let i = 0; i < points.length; i++) {
  if (distance < points[i].distanceFromStart) {

    const pFrom = points[i - 1];
    const pTo = points[i];
    const f = (distance - pFrom.distanceFromStart) / (pTo.distanceFromStart- pFrom.distanceFromStart);
    const x = pFrom.x + (pTo.x - pFrom.x) * f;
    const y = pFrom.y + (pTo.y - pFrom.y) * f;
    ctx.fillRect(x - 1, y - 1, 3, 3);
    break;
  }
}

看到这支笔。点击矩形添加点:https://codepen.io/dawken/pen/eYpxRmN?editors=0010