TimelinerController.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. /**
  2. * Controller class for the Timeliner GUI.
  3. *
  4. * Timeliner GUI library (required to use this class):
  5. *
  6. * ./libs/timeliner_gui.min.js
  7. *
  8. * Source code:
  9. *
  10. * https://github.com/tschw/timeliner_gui
  11. * https://github.com/zz85/timeliner (fork's origin)
  12. *
  13. * @author tschw
  14. *
  15. */
  16. THREE.TimelinerController = function TimelinerController( scene, trackInfo, onUpdate ) {
  17. this._scene = scene;
  18. this._trackInfo = trackInfo;
  19. this._onUpdate = onUpdate;
  20. this._mixer = new THREE.AnimationMixer( scene );
  21. this._clip = null;
  22. this._action = null;
  23. this._tracks = {};
  24. this._propRefs = {};
  25. this._channelNames = [];
  26. };
  27. THREE.TimelinerController.prototype = {
  28. constructor: THREE.TimelinerController,
  29. init: function( timeliner ) {
  30. var tracks = [],
  31. trackInfo = this._trackInfo;
  32. for ( var i = 0, n = trackInfo.length; i !== n; ++ i ) {
  33. var spec = trackInfo[ i ];
  34. tracks.push( this._addTrack(
  35. spec.type, spec.propertyPath,
  36. spec.initialValue, spec.interpolation ) );
  37. }
  38. this._clip = new THREE.AnimationClip( 'editclip', 0, tracks );
  39. this._action = this._mixer.clipAction( this._clip ).play();
  40. },
  41. setDisplayTime: function( time ) {
  42. this._action.time = time;
  43. this._mixer.update( 0 );
  44. this._onUpdate();
  45. },
  46. setDuration: function( duration ) {
  47. this._clip.duration = duration;
  48. },
  49. getChannelNames: function() {
  50. return this._channelNames;
  51. },
  52. getChannelKeyTimes: function( channelName ) {
  53. return this._tracks[ channelName ].times;
  54. },
  55. setKeyframe: function( channelName, time ) {
  56. var track = this._tracks[ channelName ],
  57. times = track.times,
  58. index = Timeliner.binarySearch( times, time ),
  59. values = track.values,
  60. stride = track.getValueSize(),
  61. offset = index * stride;
  62. if ( index < 0 ) {
  63. // insert new keyframe
  64. index = ~ index;
  65. offset = index * stride;
  66. var nTimes = times.length + 1,
  67. nValues = values.length + stride;
  68. for ( var i = nTimes - 1; i !== index; -- i ) {
  69. times[ i ] = times[ i - 1 ];
  70. }
  71. for ( var i = nValues - 1,
  72. e = offset + stride - 1; i !== e; -- i ) {
  73. values[ i ] = values[ i - stride ];
  74. }
  75. }
  76. times[ index ] = time;
  77. this._propRefs[ channelName ].getValue( values, offset );
  78. },
  79. delKeyframe: function( channelName, time ) {
  80. var track = this._tracks[ channelName ],
  81. times = track.times,
  82. index = Timeliner.binarySearch( times, time );
  83. // we disallow to remove the keyframe when it is the last one we have,
  84. // since the animation system is designed to always produce a defined
  85. // state
  86. if ( times.length > 1 && index >= 0 ) {
  87. var nTimes = times.length - 1,
  88. values = track.values,
  89. stride = track.getValueSize(),
  90. nValues = values.length - stride;
  91. // note: no track.getValueSize when array sizes are out of sync
  92. for ( var i = index; i !== nTimes; ++ i ) {
  93. times[ i ] = times[ i + 1 ];
  94. }
  95. times.pop();
  96. for ( var offset = index * stride; offset !== nValues; ++ offset ) {
  97. values[ offset ] = values[ offset + stride ];
  98. }
  99. values.length = nValues;
  100. }
  101. },
  102. moveKeyframe: function( channelName, time, delta, moveRemaining ) {
  103. var track = this._tracks[ channelName ],
  104. times = track.times,
  105. index = Timeliner.binarySearch( times, time );
  106. if ( index >= 0 ) {
  107. var endAt = moveRemaining ? times.length : index + 1,
  108. needsSort = times[ index - 1 ] <= time ||
  109. ! moveRemaining && time >= times[ index + 1 ];
  110. while ( index !== endAt ) times[ index ++ ] += delta;
  111. if ( needsSort ) this._sort( track );
  112. }
  113. },
  114. serialize: function() {
  115. var result = {
  116. duration: this._clip.duration,
  117. channels: {}
  118. },
  119. names = this._channelNames,
  120. tracks = this._tracks,
  121. channels = result.channels;
  122. for ( var i = 0, n = names.length; i !== n; ++ i ) {
  123. var name = names[ i ],
  124. track = tracks[ name ];
  125. channels[ name ] = {
  126. times: track.times,
  127. values: track.values
  128. };
  129. }
  130. return result;
  131. },
  132. deserialize: function( structs ) {
  133. var names = this._channelNames,
  134. tracks = this._tracks,
  135. channels = structs.channels;
  136. this.setDuration( structs.duration );
  137. for ( var i = 0, n = names.length; i !== n; ++ i ) {
  138. var name = names[ i ],
  139. track = tracks[ name ];
  140. data = channels[ name ];
  141. this._setArray( track.times, data.times );
  142. this._setArray( track.values, data.values );
  143. }
  144. // update display
  145. this.setDisplayTime( this._mixer.time );
  146. },
  147. _sort: function( track ) {
  148. var times = track.times,
  149. order = THREE.AnimationUtils.getKeyframeOrder( times );
  150. this._setArray( times,
  151. THREE.AnimationUtils.sortedArray( times, 1, order ) );
  152. var values = track.values,
  153. stride = track.getValueSize();
  154. this._setArray( values,
  155. THREE.AnimationUtils.sortedArray( values, stride, order ) );
  156. },
  157. _setArray: function( dst, src ) {
  158. dst.length = 0;
  159. dst.push.apply( dst, src );
  160. },
  161. _addTrack: function( type, prop, initialValue, interpolation ) {
  162. var track = new type(
  163. prop, [ 0 ], initialValue, interpolation );
  164. // data must be in JS arrays so it can be resized
  165. track.times = Array.prototype.slice.call( track.times );
  166. track.values = Array.prototype.slice.call( track.values );
  167. this._channelNames.push( prop );
  168. this._tracks[ prop ] = track;
  169. // for recording the state:
  170. this._propRefs[ prop ] =
  171. new THREE.PropertyBinding( this._scene, prop );
  172. return track;
  173. }
  174. };