MD2CharacterComplex.js 12 KB

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