aframe-interpolation.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. /*
  2. The MIT License (MIT)
  3. Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  4. */
  5. if (typeof AFRAME === 'undefined') {
  6. throw new Error('Component attempted to register before AFRAME was available.');
  7. }
  8. AFRAME.registerComponent('interpolation', {
  9. schema: {
  10. enabled: { default: true },
  11. deltaPos: { default: 0.001 },
  12. deltaScale: { default: 0.001 },
  13. deltaRot: { default: 0.1 }
  14. },
  15. init: function () {
  16. this.driver = vwf.views["/drivers/view/aframeComponent"];
  17. //this.el.sceneEl.components['scene-utils'].interpolationComponents[this.el.id] = this;
  18. },
  19. update: function (oldData) {
  20. if (!this.interpolation) {
  21. this.deltaPos = parseFloat(this.data.deltaPos);
  22. this.deltaScale = parseFloat(this.data.deltaScale);
  23. this.deltaRot = THREE.Math.degToRad(parseFloat(this.data.deltaRot));
  24. this.enabled = JSON.parse(this.data.enabled);
  25. if (this.enabled) {
  26. }
  27. }
  28. },
  29. /**
  30. * Called when a component is removed (e.g., via removeAttribute).
  31. * Generally undoes all modifications to the entity.
  32. */
  33. remove: function () {
  34. //delete this.el.sceneEl.components['scene-utils'].interpolationComponents[this.el.id]
  35. },
  36. /**
  37. * Called on each scene tick.
  38. */
  39. // interpolationTick
  40. tick: function (t, dt) {
  41. var now = performance.now();
  42. var timepassed = now - this.lastTime;
  43. //console.log(timepassed);
  44. if (!this.node) {
  45. let interNode = Object.entries(this.driver.state.nodes).find(el =>
  46. el[1].parentID == this.el.id && el[1].extendsID == "proxy/aframe/interpolation-component.vwf"
  47. );
  48. if(interNode) {
  49. this.node = this.driver.nodes[interNode[0]];
  50. this.nodeState = interNode[1];
  51. }
  52. }
  53. if (this.enabled && this.node && this.node.interpolate && this.driver.interpolateView && !this.node.viewEdit) {
  54. this.setInterpolatedTransforms(timepassed);
  55. // this.restoreTransforms();
  56. }
  57. this.lastTime = now;
  58. },
  59. //interpolationTock
  60. tock: function (t, dt) {
  61. if (this.node) {
  62. if (this.enabled && this.node.interpolate && this.driver.interpolateView) {
  63. this.restoreTransforms();
  64. }
  65. }
  66. },
  67. vecCmpThreeJS: function (a, b, delta) {
  68. let distance = a.distanceTo(b);
  69. //let distance = goog.vec.Vec3.distance(a,b);
  70. if (distance > delta) {
  71. return false;
  72. }
  73. return true;
  74. },
  75. vecCmp: function (a, b, delta) {
  76. // let distance = a.distanceTo(b);
  77. let distance = a.distanceTo(b);
  78. if (distance > delta) {
  79. return false;
  80. }
  81. return true;
  82. },
  83. restoreTransforms: function () {
  84. this.restorePositionTransforms();
  85. this.restoreRotationTransforms();
  86. this.restoreScaleTransforms();
  87. this.el.object3D.updateMatrixWorld( true );
  88. },
  89. restorePositionTransforms: function () {
  90. var now = this.node.interpolate.position.selfTick;
  91. if (now && this.node.needPositionRestore) {
  92. let pos = now.clone();
  93. this.el.object3D.position.copy(pos);
  94. this.node.needPositionRestore = false;
  95. }
  96. },
  97. restoreRotationTransforms: function () {
  98. var now = this.node.interpolate.rotation.selfTick;
  99. if (now && this.node.needRotationRestore) {
  100. let r = new THREE.Euler();
  101. let rot = r.copy(now);
  102. this.el.object3D.rotation.set(rot.x, rot.y, rot.z)
  103. this.node.needRotationRestore = false;
  104. }
  105. },
  106. restoreScaleTransforms: function () {
  107. var now = this.node.interpolate.scale.selfTick;
  108. if (now && this.node.needScaleRestore) {
  109. let pos = now.clone();
  110. this.el.object3D.scale.copy(pos);
  111. this.node.needScaleRestore = false;
  112. }
  113. },
  114. setInterpolatedTransforms: function (deltaTime) {
  115. var step = (this.node.tickTime) / (this.node.realTickDif);
  116. step = Math.min(step, 1);
  117. //step = Math.min(1, .2 * (deltaTime / 16.6)) //Math.min(step, 1);
  118. deltaTime = Math.min(deltaTime, this.node.realTickDif)
  119. this.node.tickTime += deltaTime || 0;
  120. this.interpolatePosition(step);
  121. this.interpolateRotation(step);
  122. this.interpolateScale(step);
  123. // if (this.node.tickTime == 0){
  124. // this.restoreTransforms();
  125. // }
  126. },
  127. radians: function (degrees) {
  128. // return degrees * Math.PI / 180.0;
  129. return THREE.Math.degToRad(degrees)
  130. },
  131. interpolateRotation: function (step) {
  132. let last = this.node.interpolate.rotation.lastTick;
  133. let now = this.node.interpolate.rotation.selfTick;
  134. if (last && now) {
  135. let comp = this.vecCmpThreeJS(last.toVector3(), now.toVector3(), this.deltaRot);
  136. if (!comp) {
  137. // console.log('Last:', last, ' Now: ', now);
  138. let lastV = (new THREE.Quaternion()).setFromEuler(new THREE.Euler(
  139. (last.x),
  140. (last.y),
  141. (last.z), last.order//'YXZ'
  142. ));
  143. let nowV = (new THREE.Quaternion()).setFromEuler(new THREE.Euler(
  144. (now.x),
  145. (now.y),
  146. (now.z), last.order//'YXZ'
  147. ));
  148. let q = new THREE.Quaternion();
  149. let e = new THREE.Euler();
  150. THREE.Quaternion.slerp(lastV, nowV, q, step || 0);
  151. let interp = e.setFromQuaternion(q, last.order); //'YXZ');
  152. //this.el.object3D.rotation.set(interp.x, interp.y, interp.z);
  153. this.setRotation(interp);
  154. this.node.needRotationRestore = true;
  155. }
  156. }
  157. },
  158. interpolatePosition: function (step) {
  159. var last = this.node.interpolate.position.lastTick; //this.node.lastTickTransform;
  160. var now = this.node.interpolate.position.selfTick; //Transform;
  161. if (last && now) {
  162. let comp = this.vecCmp(last, now, this.deltaPos);
  163. if (!comp) {
  164. var interp = new THREE.Vector3().lerpVectors(
  165. last, now,
  166. step || 0
  167. );
  168. this.setPosition(interp);
  169. this.node.needPositionRestore = true;
  170. }
  171. }
  172. },
  173. interpolateScale: function (step) {
  174. var last = this.node.interpolate.scale.lastTick; //this.node.lastTickTransform;
  175. var now = this.node.interpolate.scale.selfTick; //Transform;
  176. if (last && now) {
  177. let comp = this.vecCmp(last, now, this.deltaScale);
  178. if (!comp) {
  179. var interp = new THREE.Vector3().lerpVectors(
  180. last, now,
  181. step || 0
  182. );
  183. this.setScale(interp);
  184. this.node.needScaleRestore = true;
  185. }
  186. }
  187. },
  188. setPosition: function (interp) {
  189. let vec = interp.clone();
  190. this.el.object3D.position.copy(vec);
  191. },
  192. setRotation: function (interp) {
  193. let vec = (new THREE.Euler()).copy(interp);
  194. this.el.object3D.rotation.set(vec.x, vec.y, vec.z);
  195. },
  196. setScale: function (interp) {
  197. let vec = interp.clone();
  198. this.el.object3D.scale.copy(vec);
  199. },
  200. pause: function () { },
  201. play: function () { }
  202. });