我有一个由多段线(3D点阵)组成的物体路径,点的分布非常不均匀。我需要使用一个间隔时间为10毫秒的定时器以恒定的速度移动一个物体。
不均匀分布的点在人眼里会产生不同的速度。所以现在我需要决定如何处理这个长长的3D点阵列。
我得到的第一个想法是将长段细分为小部分。它的效果比较好,但是在点被卡住的地方,问题依然存在。
在这些情况下,最好的方法是什么?另一个想法,可能是简化原始路径,用 Ramer-Douglas-Peucker算法。,然后再把它平均分割,但我不知道这样是否能完全解决我的问题。
这在3D图形的很多领域应该是一个相当普遍的问题,那么是否存在一个行之有效的方法呢?
我为你做了一个JavaScript笔 https:/codepen.iodawkenpeneYpxRmN?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.iodawkenpeneYpxRmN?editors=0010。