MD2CharacterComplex.js 12 KB

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