MD2CharacterComplex.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. */
  4. THREE.MD2CharacterComplex = function () {
  5. var scope = this;
  6. this.scale = 1;
  7. // animation parameters
  8. this.animationFPS = 6;
  9. this.transitionFrames = 15;
  10. // movement model parameters
  11. this.maxSpeed = 275;
  12. this.maxReverseSpeed = - 275;
  13. this.frontAcceleration = 600;
  14. this.backAcceleration = 600;
  15. this.frontDecceleration = 600;
  16. this.angularSpeed = 2.5;
  17. // rig
  18. this.root = new THREE.Object3D();
  19. this.meshBody = null;
  20. this.meshWeapon = null;
  21. this.controls = null;
  22. // skins
  23. this.skinsBody = [];
  24. this.skinsWeapon = [];
  25. this.weapons = [];
  26. this.currentSkin = undefined;
  27. //
  28. this.onLoadComplete = function () {};
  29. // internals
  30. this.meshes = [];
  31. this.animations = {};
  32. this.loadCounter = 0;
  33. // internal movement control variables
  34. this.speed = 0;
  35. this.bodyOrientation = 0;
  36. this.walkSpeed = this.maxSpeed;
  37. this.crouchSpeed = this.maxSpeed * 0.5;
  38. // internal animation parameters
  39. this.activeAnimation = null;
  40. this.oldAnimation = null;
  41. // API
  42. this.enableShadows = function ( enable ) {
  43. for ( var i = 0; i < this.meshes.length; i ++ ) {
  44. this.meshes[ i ].castShadow = enable;
  45. this.meshes[ i ].receiveShadow = enable;
  46. }
  47. };
  48. this.setVisible = function ( enable ) {
  49. for ( var i = 0; i < this.meshes.length; i ++ ) {
  50. this.meshes[ i ].visible = enable;
  51. this.meshes[ i ].visible = enable;
  52. }
  53. };
  54. this.shareParts = function ( original ) {
  55. this.animations = original.animations;
  56. this.walkSpeed = original.walkSpeed;
  57. this.crouchSpeed = original.crouchSpeed;
  58. this.skinsBody = original.skinsBody;
  59. this.skinsWeapon = original.skinsWeapon;
  60. // BODY
  61. var mesh = createPart( original.meshBody.geometry, this.skinsBody[ 0 ] );
  62. mesh.scale.set( this.scale, this.scale, this.scale );
  63. this.root.position.y = original.root.position.y;
  64. this.root.add( mesh );
  65. this.meshBody = mesh;
  66. this.meshes.push( mesh );
  67. // WEAPONS
  68. for ( var i = 0; i < original.weapons.length; i ++ ) {
  69. var meshWeapon = createPart( original.weapons[ i ].geometry, this.skinsWeapon[ i ] );
  70. meshWeapon.scale.set( this.scale, this.scale, this.scale );
  71. meshWeapon.visible = false;
  72. meshWeapon.name = original.weapons[ i ].name;
  73. this.root.add( meshWeapon );
  74. this.weapons[ i ] = meshWeapon;
  75. this.meshWeapon = meshWeapon;
  76. this.meshes.push( meshWeapon );
  77. }
  78. };
  79. this.loadParts = function ( config ) {
  80. this.animations = config.animations;
  81. this.walkSpeed = config.walkSpeed;
  82. this.crouchSpeed = config.crouchSpeed;
  83. this.loadCounter = config.weapons.length * 2 + config.skins.length + 1;
  84. var weaponsTextures = [];
  85. for ( var i = 0; i < config.weapons.length; i ++ ) weaponsTextures[ i ] = config.weapons[ i ][ 1 ];
  86. // SKINS
  87. this.skinsBody = loadTextures( config.baseUrl + "skins/", config.skins );
  88. this.skinsWeapon = loadTextures( config.baseUrl + "skins/", weaponsTextures );
  89. // BODY
  90. var loader = new THREE.MD2Loader();
  91. loader.load( config.baseUrl + config.body, function( geo ) {
  92. geo.computeBoundingBox();
  93. scope.root.position.y = - scope.scale * geo.boundingBox.min.y;
  94. var mesh = createPart( geo, scope.skinsBody[ 0 ] );
  95. mesh.scale.set( scope.scale, scope.scale, scope.scale );
  96. scope.root.add( mesh );
  97. scope.meshBody = mesh;
  98. scope.meshes.push( mesh );
  99. checkLoadingComplete();
  100. } );
  101. // WEAPONS
  102. var generateCallback = function ( index, name ) {
  103. return function( geo ) {
  104. var mesh = createPart( geo, scope.skinsWeapon[ index ] );
  105. mesh.scale.set( scope.scale, scope.scale, scope.scale );
  106. mesh.visible = false;
  107. mesh.name = name;
  108. scope.root.add( mesh );
  109. scope.weapons[ index ] = mesh;
  110. scope.meshWeapon = mesh;
  111. scope.meshes.push( mesh );
  112. checkLoadingComplete();
  113. }
  114. };
  115. for ( var i = 0; i < config.weapons.length; i ++ ) {
  116. loader.load( config.baseUrl + config.weapons[ i ][ 0 ], generateCallback( i, config.weapons[ i ][ 0 ] ) );
  117. }
  118. };
  119. this.setPlaybackRate = function ( rate ) {
  120. if ( this.meshBody ) this.meshBody.duration = this.meshBody.baseDuration / rate;
  121. if ( this.meshWeapon ) this.meshWeapon.duration = this.meshWeapon.baseDuration / rate;
  122. };
  123. this.setWireframe = function ( wireframeEnabled ) {
  124. if ( wireframeEnabled ) {
  125. if ( this.meshBody ) this.meshBody.material = this.meshBody.materialWireframe;
  126. if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialWireframe;
  127. } else {
  128. if ( this.meshBody ) this.meshBody.material = this.meshBody.materialTexture;
  129. if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialTexture;
  130. }
  131. };
  132. this.setSkin = function( index ) {
  133. if ( this.meshBody && this.meshBody.material.wireframe === false ) {
  134. this.meshBody.material.map = this.skinsBody[ index ];
  135. this.currentSkin = index;
  136. }
  137. };
  138. this.setWeapon = function ( index ) {
  139. for ( var i = 0; i < this.weapons.length; i ++ ) this.weapons[ i ].visible = false;
  140. var activeWeapon = this.weapons[ index ];
  141. if ( activeWeapon ) {
  142. activeWeapon.visible = true;
  143. this.meshWeapon = activeWeapon;
  144. if ( this.activeAnimation ) {
  145. activeWeapon.playAnimation( this.activeAnimation );
  146. this.meshWeapon.setAnimationTime( this.activeAnimation, this.meshBody.getAnimationTime( this.activeAnimation ) );
  147. }
  148. }
  149. };
  150. this.setAnimation = function ( animationName ) {
  151. if ( animationName === this.activeAnimation || ! animationName ) return;
  152. if ( this.meshBody ) {
  153. this.meshBody.setAnimationWeight( animationName, 0 );
  154. this.meshBody.playAnimation( animationName );
  155. this.oldAnimation = this.activeAnimation;
  156. this.activeAnimation = animationName;
  157. this.blendCounter = this.transitionFrames;
  158. }
  159. if ( this.meshWeapon ) {
  160. this.meshWeapon.setAnimationWeight( animationName, 0 );
  161. this.meshWeapon.playAnimation( animationName );
  162. }
  163. };
  164. this.update = function ( delta ) {
  165. if ( this.controls ) this.updateMovementModel( delta );
  166. if ( this.animations ) {
  167. this.updateBehaviors( delta );
  168. this.updateAnimations( delta );
  169. }
  170. };
  171. this.updateAnimations = function ( delta ) {
  172. var mix = 1;
  173. if ( this.blendCounter > 0 ) {
  174. mix = ( this.transitionFrames - this.blendCounter ) / this.transitionFrames;
  175. this.blendCounter -= 1;
  176. }
  177. if ( this.meshBody ) {
  178. this.meshBody.update( delta );
  179. this.meshBody.setAnimationWeight( this.activeAnimation, mix );
  180. this.meshBody.setAnimationWeight( this.oldAnimation, 1 - mix );
  181. }
  182. if ( this.meshWeapon ) {
  183. this.meshWeapon.update( delta );
  184. this.meshWeapon.setAnimationWeight( this.activeAnimation, mix );
  185. this.meshWeapon.setAnimationWeight( this.oldAnimation, 1 - mix );
  186. }
  187. };
  188. this.updateBehaviors = function ( delta ) {
  189. var controls = this.controls;
  190. var animations = this.animations;
  191. var moveAnimation, idleAnimation;
  192. // crouch vs stand
  193. if ( controls.crouch ) {
  194. moveAnimation = animations[ "crouchMove" ];
  195. idleAnimation = animations[ "crouchIdle" ];
  196. } else {
  197. moveAnimation = animations[ "move" ];
  198. idleAnimation = animations[ "idle" ];
  199. }
  200. // actions
  201. if ( controls.jump ) {
  202. moveAnimation = animations[ "jump" ];
  203. idleAnimation = animations[ "jump" ];
  204. }
  205. if ( controls.attack ) {
  206. if ( controls.crouch ) {
  207. moveAnimation = animations[ "crouchAttack" ];
  208. idleAnimation = animations[ "crouchAttack" ];
  209. } else {
  210. moveAnimation = animations[ "attack" ];
  211. idleAnimation = animations[ "attack" ];
  212. }
  213. }
  214. // set animations
  215. if ( controls.moveForward || controls.moveBackward || controls.moveLeft || controls.moveRight ) {
  216. if ( this.activeAnimation !== moveAnimation ) {
  217. this.setAnimation( moveAnimation );
  218. }
  219. }
  220. if ( Math.abs( this.speed ) < 0.2 * this.maxSpeed && ! ( controls.moveLeft || controls.moveRight || controls.moveForward || controls.moveBackward ) ) {
  221. if ( this.activeAnimation !== idleAnimation ) {
  222. this.setAnimation( idleAnimation );
  223. }
  224. }
  225. // set animation direction
  226. if ( controls.moveForward ) {
  227. if ( this.meshBody ) {
  228. this.meshBody.setAnimationDirectionForward( this.activeAnimation );
  229. this.meshBody.setAnimationDirectionForward( this.oldAnimation );
  230. }
  231. if ( this.meshWeapon ) {
  232. this.meshWeapon.setAnimationDirectionForward( this.activeAnimation );
  233. this.meshWeapon.setAnimationDirectionForward( this.oldAnimation );
  234. }
  235. }
  236. if ( controls.moveBackward ) {
  237. if ( this.meshBody ) {
  238. this.meshBody.setAnimationDirectionBackward( this.activeAnimation );
  239. this.meshBody.setAnimationDirectionBackward( this.oldAnimation );
  240. }
  241. if ( this.meshWeapon ) {
  242. this.meshWeapon.setAnimationDirectionBackward( this.activeAnimation );
  243. this.meshWeapon.setAnimationDirectionBackward( this.oldAnimation );
  244. }
  245. }
  246. };
  247. this.updateMovementModel = function ( delta ) {
  248. var controls = this.controls;
  249. // speed based on controls
  250. if ( controls.crouch ) this.maxSpeed = this.crouchSpeed;
  251. else this.maxSpeed = this.walkSpeed;
  252. this.maxReverseSpeed = - this.maxSpeed;
  253. if ( controls.moveForward ) this.speed = THREE.Math.clamp( this.speed + delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed );
  254. if ( controls.moveBackward ) this.speed = THREE.Math.clamp( this.speed - delta * this.backAcceleration, this.maxReverseSpeed, this.maxSpeed );
  255. // orientation based on controls
  256. // (don't just stand while turning)
  257. var dir = 1;
  258. if ( controls.moveLeft ) {
  259. this.bodyOrientation += delta * this.angularSpeed;
  260. this.speed = THREE.Math.clamp( this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed );
  261. }
  262. if ( controls.moveRight ) {
  263. this.bodyOrientation -= delta * this.angularSpeed;
  264. this.speed = THREE.Math.clamp( this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed );
  265. }
  266. // speed decay
  267. if ( ! ( controls.moveForward || controls.moveBackward ) ) {
  268. if ( this.speed > 0 ) {
  269. var k = exponentialEaseOut( this.speed / this.maxSpeed );
  270. this.speed = THREE.Math.clamp( this.speed - k * delta * this.frontDecceleration, 0, this.maxSpeed );
  271. } else {
  272. var k = exponentialEaseOut( this.speed / this.maxReverseSpeed );
  273. this.speed = THREE.Math.clamp( this.speed + k * delta * this.backAcceleration, this.maxReverseSpeed, 0 );
  274. }
  275. }
  276. // displacement
  277. var forwardDelta = this.speed * delta;
  278. this.root.position.x += Math.sin( this.bodyOrientation ) * forwardDelta;
  279. this.root.position.z += Math.cos( this.bodyOrientation ) * forwardDelta;
  280. // steering
  281. this.root.rotation.y = this.bodyOrientation;
  282. };
  283. // internal helpers
  284. function loadTextures( baseUrl, textureUrls ) {
  285. var textureLoader = new THREE.TextureLoader();
  286. var textures = [];
  287. for ( var i = 0; i < textureUrls.length; i ++ ) {
  288. textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], checkLoadingComplete );
  289. textures[ i ].mapping = THREE.UVMapping;
  290. textures[ i ].name = textureUrls[ i ];
  291. }
  292. return textures;
  293. }
  294. function createPart( geometry, skinMap ) {
  295. var materialWireframe = new THREE.MeshLambertMaterial( { color: 0xffaa00, wireframe: true, morphTargets: true, morphNormals: true } );
  296. var materialTexture = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: false, map: skinMap, morphTargets: true, morphNormals: true } );
  297. //
  298. var mesh = new THREE.MorphBlendMesh( geometry, materialTexture );
  299. mesh.rotation.y = - Math.PI / 2;
  300. //
  301. mesh.materialTexture = materialTexture;
  302. mesh.materialWireframe = materialWireframe;
  303. //
  304. mesh.autoCreateAnimations( scope.animationFPS );
  305. return mesh;
  306. }
  307. function checkLoadingComplete() {
  308. scope.loadCounter -= 1;
  309. if ( scope.loadCounter === 0 ) scope.onLoadComplete();
  310. }
  311. function exponentialEaseOut( k ) {
  312. return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
  313. }
  314. };