J'ai une courbe catmull-rom définie avec quelques points de contrôle comme indiqué ici:
Je voudrais animer un objet se déplaçant le long de la courbe, mais être capable de définir la vitesse de l'objet.
Lors de l'itération sur les points de la courbe à l'aide de la méthode getPoint, l'objet se déplace de manière harmonieuse (dans l'image, à u = 0, nous sommes à p1, à u = 0,25, nous sommes à p2 etc.). À l'aide de la méthode getPointAt, l'objet se déplace à une vitesse uniforme le long de la courbe.
Cependant, ce que je voudrais, c'est avoir un plus grand contrôle sur l'animation, afin de pouvoir spécifier que le mouvement de p1 à p2 devrait prendre 0,5, de p2 à p3, 0,3 et de p3 à p4 0,2. Est-ce possible?
3 Réponses :
Cependant, ce que je voudrais, c'est avoir un plus grand contrôle sur l'animation, afin de pouvoir spécifier que le mouvement de p1 à p2 devrait prendre 0,5, de p2 à p3, 0,3 et de p3 à p4 0,2. Est-ce possible?
Vous pouvez y parvenir en utilisant une bibliothèque d'animations telle que tween.js . De cette manière, vous pouvez spécifier la position de début et de fin de votre objet et la durée souhaitée. Il est également possible de personnaliser le type de transition en utilisant les fonctions d'accélération .
Vous avez plusieurs options, je vais décrire la théorie et ensuite une implémentation possible.
Cette paramétrisation vous permettra de contrôler totalement le mouvement de votre objet à n'importe quelle vitesse que vous voulez, qu'elle soit constan't linéaire, non linéaire, par morceaux ...
Il existe de nombreuses techniques d'intégration numérique qui vous permettront de paramétrer la longueur de la courbe.
Un possible sur est de précalculer les valeurs et de les mettre sur une table. Choisissez un petit epsilon et en commençant à la première valeur de paramètre x_0, évaluez la fonction à x_0, x_0 + epsilon, x_0 + 2 * epsilon ...
En faisant cela, prenez la distance linéaire entre chaque échantillon et ajoutez-la à un accumulateur. c'est-à-dire travelled_distance + = length (échantillon [x], échantillon [x + 1]).
Stockez la paire dans une table.
Maintenant, lorsque vous êtes à x et que vous voulez déplacer des unités y, vous pouvez arrondir x au x_n le plus proche et rechercher linéairement la première valeur x_n dont la distance est supérieure à y, puis renvoyer ce x_n.
Cet algorithme n'est pas le plus efficace, mais il est facile à comprendre et à coder, donc au moins il peut vous aider à démarrer.
Si vous avez besoin d'une version plus optimisée, recherchez des algorithmes de paramétrage de la longueur de l'arc.
Le paramétrage de la longueur de l'arc est intégré à three.js à l'aide de la fonction getPointAt
Merci pour les suggestions. La façon dont j'ai finalement mis en œuvre cela a été de créer un mappage personnalisé entre ma variable de temps, une variable u pour la fonction getPoint three.js.
J'ai créé une fonction linéaire par morceaux en utilisant une bibliothèque javascript appelée everpolate . De cette façon, je pourrais mapper t à u tel que:
oui c'est possible mais il faut prendre en compte la distorsion car le paramètre
uest non linéaire et il dépend de la courbure et de l'uniformité des points de contrôle (distance entre eux) donc pour une meilleure précision il vous faudrait d'abord pour linéariseru(convertir entre la longueur d'arc / courbe etu) puis vous pouvez appliquer n'importe quelle physique dessus ... Pour la linéarisation, vous pouvez utiliser la recherche binaire ou plus trucs mathématiques dont je ne suis pas au courant qui peuvent calculer la distance depuis le début de la courbe à partir deuet aussi vers l'arrièreMerci, c'est ce que j'ai fait à la fin.