AnimationPath.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. import * as THREE from "../libs/three.js/build/three.module.js";
  2. export class PathAnimation{
  3. constructor(path, start, end, speed, callback){
  4. this.path = path;
  5. this.length = this.path.spline.getLength();
  6. this.speed = speed;
  7. this.callback = callback;
  8. this.tween = null;
  9. this.startPoint = Math.max(start, 0);
  10. this.endPoint = Math.min(end, this.length);
  11. this.t = 0.0;
  12. }
  13. start(resume = false){
  14. if(this.tween){
  15. this.tween.stop();
  16. this.tween = null;
  17. }
  18. let tStart;
  19. if(resume){
  20. tStart = this.t;
  21. }else{
  22. tStart = this.startPoint / this.length;
  23. }
  24. let tEnd = this.endPoint / this.length;
  25. let animationDuration = (tEnd - tStart) * this.length * 1000 / this.speed;
  26. let progress = {t: tStart};
  27. this.tween = new TWEEN.Tween(progress).to({t: tEnd}, animationDuration);
  28. this.tween.easing(TWEEN.Easing.Linear.None);
  29. this.tween.onUpdate((e) => {
  30. this.t = progress.t;
  31. this.callback(progress.t);
  32. });
  33. this.tween.onComplete(() => {
  34. if(this.repeat){
  35. this.start();
  36. }
  37. });
  38. setTimeout(() => {
  39. this.tween.start();
  40. }, 0);
  41. }
  42. stop(){
  43. if(!this.tween){
  44. return;
  45. }
  46. this.tween.stop();
  47. this.tween = null;
  48. this.t = 0;
  49. }
  50. pause(){
  51. if(!this.tween){
  52. return;
  53. }
  54. this.tween.stop();
  55. TWEEN.remove(this.tween);
  56. this.tween = null;
  57. }
  58. resume(){
  59. this.start(true);
  60. }
  61. getPoint(t){
  62. return this.path.spline.getPoint(t);
  63. }
  64. }
  65. export class AnimationPath{
  66. constructor (points = []) {
  67. this.points = points;
  68. this.spline = new THREE.CatmullRomCurve3(points);
  69. //this.spline.reparametrizeByArcLength(1 / this.spline.getLength().total);
  70. }
  71. get (t) {
  72. return this.spline.getPoint(t);
  73. }
  74. getLength () {
  75. return this.spline.getLength();
  76. }
  77. animate (start, end, speed, callback) {
  78. let animation = new PathAnimation(this, start, end, speed, callback);
  79. animation.start();
  80. return animation;
  81. }
  82. pause () {
  83. if (this.tween) {
  84. this.tween.stop();
  85. }
  86. }
  87. resume () {
  88. if (this.tween) {
  89. this.tween.start();
  90. }
  91. }
  92. getGeometry () {
  93. let geometry = new THREE.Geometry();
  94. let samples = 500;
  95. let i = 0;
  96. for (let u = 0; u <= 1; u += 1 / samples) {
  97. let position = this.spline.getPoint(u);
  98. geometry.vertices[i] = new THREE.Vector3(position.x, position.y, position.z);
  99. i++;
  100. }
  101. if(this.closed){
  102. let position = this.spline.getPoint(0);
  103. geometry.vertices[i] = new THREE.Vector3(position.x, position.y, position.z);
  104. }
  105. return geometry;
  106. }
  107. get closed(){
  108. return this.spline.closed;
  109. }
  110. set closed(value){
  111. this.spline.closed = value;
  112. }
  113. }