Перемещение объекта по кривой с произвольной скоростью

Question

У меня есть кривая ромба, определенная парой контрольных точек, как показано здесь:

Я хотел бы анимировать объект, движущийся по кривой, но иметь возможность определить скорость объекта.

При итерации по точкам кривой с использованием метода getPoint объект перемещается хордово (на изображении при u = 0 мы находимся в точке p1, в точке u = 0,25 мы находимся в точке p2 и т. Д.). Используя метод getPointAt, объект движется с равномерной скоростью вдоль кривой.

Однако мне бы хотелось иметь больший контроль над анимацией, чтобы я мог указать, что перемещение от p1 до p2 должно занять 0,5, от p2 до p3, 0,3 и от p3 до p4 0,2. Это возможно?

Answer 1

У вас есть несколько вариантов, я опишу теорию, а затем одну возможную реализацию.

Теория

Вы хотите arclength параметризовать вашу кривую.Это означает, что увеличение параметра на 1 приводит к расстоянию перемещения по кривой 1.

Эта параметризация позволит вам полностью контролировать движение вашего объекта на любой скорости, которую вы хотите, будь то постоянная't linear, нелинейный, кусочно ...

Возможное применение

Существует много методов численного интегрирования, которые позволят вам параметризовать кривую по длине.

Возможноэто предварительно вычислить значения и поместить их в таблицу.Выберите небольшой эпсилон и, начиная с первого значения параметра x_0, оцените функцию как x_0, x_0 + epsilon, x_0 + 2 * epsilon ...

. При этом возьмите линейное расстояние между каждым образцом и добавьте его.к аккумулятору.т.е. travelled_distance + = length (sample [x], sample [x + 1]).

Сохраните пару в таблице.

Теперь, когда вы находитесь в точке x и хотите переместить единицы y, вы можете округлить x до ближайшего значения x_n и линейно найти первое значение x_n, расстояние которого больше y, а затем вернуть это значение x_n.

Этот алгоритм не самый эффективный, но его легко понять и кодировать, поэтому, по крайней мере, он поможет вам начать работу.

Если вам нужна более оптимизированная версия, поищите алгоритмы параметризации длины дуги.

Answer 2

Спасибо за предложения. В итоге я реализовал это, создав собственное отображение между моей переменной времени и переменной u для функции get.js three.js.

Я создал кусочно-линейную функцию, используя библиотеку JavaScript под названием everpolate . Таким образом, я мог бы отобразить t так, чтобы:

• При t = 0, u = 0, в результате чего p1
• При t = 0,5, u = 1/3, в результате чего p2
• При t = 0,8, u = 2/3, что приводит к p3
• При t = 1, u = 1, в результате чего p4

Изображение карты T to U

Answer 3

Однако мне бы хотелось иметь больший контроль над анимацией, чтобы я мог указать, что перемещение от p1 до p2 должно занять 0,5, от p2 до p3, 0,3 и от p3 до p4 0,2. Возможно ли это?

Этого можно добиться с помощью библиотеки анимации, например tween.js . Таким образом, вы можете указать начальную и конечную позицию вашего объекта и желаемую продолжительность. Также можно настроить тип перехода, используя функции ослабления .