Question

我有一条由多义线（3D点阵列）组成的对象路径，其点非常不均匀地分布。我需要使用间隔定为10毫秒的计时器以恒定速度移动对象。

分布不均的点对人眼产生可变的速度。因此，现在我需要决定如何处理这一系列3D点。

我得到的第一个想法是将较长的段细分为较小的部分。它的效果更好，但在点卡纸的地方仍然存在问题。

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

这在3D图形的许多领域应该是一个相当普遍的问题，那么是否存在一种行之有效的方法？

Answer 1

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

您必须以恒定的速度保持与时间相关的distance，如下所示：

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

然后，您必须在路径中找到两个点，以使当前距离位于路径中“距离” 之间；您将“距路径起点的距离” 存储在每个点{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

沿路径以恒定速度移动对象

1 个答案: