沿路径以恒定速度移动对象 [英] 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"之间；您将"距离路径起点的距离"存储在每个点{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

这篇关于沿路径以恒定速度移动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！