MD2Character.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. ( function () {
  2. class MD2Character {
  3. constructor() {
  4. this.scale = 1;
  5. this.animationFPS = 6;
  6. this.root = new THREE.Object3D();
  7. this.meshBody = null;
  8. this.meshWeapon = null;
  9. this.skinsBody = [];
  10. this.skinsWeapon = [];
  11. this.weapons = [];
  12. this.activeAnimation = null;
  13. this.mixer = null;
  14. this.onLoadComplete = function () {};
  15. this.loadCounter = 0;
  16. }
  17. loadParts( config ) {
  18. const scope = this;
  19. function createPart( geometry, skinMap ) {
  20. const materialWireframe = new THREE.MeshLambertMaterial( {
  21. color: 0xffaa00,
  22. wireframe: true,
  23. morphTargets: true,
  24. morphNormals: true
  25. } );
  26. const materialTexture = new THREE.MeshLambertMaterial( {
  27. color: 0xffffff,
  28. wireframe: false,
  29. map: skinMap,
  30. morphTargets: true,
  31. morphNormals: true
  32. } ); //
  33. const mesh = new THREE.Mesh( geometry, materialTexture );
  34. mesh.rotation.y = - Math.PI / 2;
  35. mesh.castShadow = true;
  36. mesh.receiveShadow = true; //
  37. mesh.materialTexture = materialTexture;
  38. mesh.materialWireframe = materialWireframe;
  39. return mesh;
  40. }
  41. function loadTextures( baseUrl, textureUrls ) {
  42. const textureLoader = new THREE.TextureLoader();
  43. const textures = [];
  44. for ( let i = 0; i < textureUrls.length; i ++ ) {
  45. textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], checkLoadingComplete );
  46. textures[ i ].mapping = THREE.UVMapping;
  47. textures[ i ].name = textureUrls[ i ];
  48. textures[ i ].encoding = THREE.sRGBEncoding;
  49. }
  50. return textures;
  51. }
  52. function checkLoadingComplete() {
  53. scope.loadCounter -= 1;
  54. if ( scope.loadCounter === 0 ) scope.onLoadComplete();
  55. }
  56. this.loadCounter = config.weapons.length * 2 + config.skins.length + 1;
  57. const weaponsTextures = [];
  58. for ( let i = 0; i < config.weapons.length; i ++ ) weaponsTextures[ i ] = config.weapons[ i ][ 1 ]; // SKINS
  59. this.skinsBody = loadTextures( config.baseUrl + 'skins/', config.skins );
  60. this.skinsWeapon = loadTextures( config.baseUrl + 'skins/', weaponsTextures ); // BODY
  61. const loader = new THREE.MD2Loader();
  62. loader.load( config.baseUrl + config.body, function ( geo ) {
  63. const boundingBox = new THREE.Box3();
  64. boundingBox.setFromBufferAttribute( geo.attributes.position );
  65. scope.root.position.y = - scope.scale * boundingBox.min.y;
  66. const mesh = createPart( geo, scope.skinsBody[ 0 ] );
  67. mesh.scale.set( scope.scale, scope.scale, scope.scale );
  68. scope.root.add( mesh );
  69. scope.meshBody = mesh;
  70. scope.meshBody.clipOffset = 0;
  71. scope.activeAnimationClipName = mesh.geometry.animations[ 0 ].name;
  72. scope.mixer = new THREE.AnimationMixer( mesh );
  73. checkLoadingComplete();
  74. } ); // WEAPONS
  75. const generateCallback = function ( index, name ) {
  76. return function ( geo ) {
  77. const mesh = createPart( geo, scope.skinsWeapon[ index ] );
  78. mesh.scale.set( scope.scale, scope.scale, scope.scale );
  79. mesh.visible = false;
  80. mesh.name = name;
  81. scope.root.add( mesh );
  82. scope.weapons[ index ] = mesh;
  83. scope.meshWeapon = mesh;
  84. checkLoadingComplete();
  85. };
  86. };
  87. for ( let i = 0; i < config.weapons.length; i ++ ) {
  88. loader.load( config.baseUrl + config.weapons[ i ][ 0 ], generateCallback( i, config.weapons[ i ][ 0 ] ) );
  89. }
  90. }
  91. setPlaybackRate( rate ) {
  92. if ( rate !== 0 ) {
  93. this.mixer.timeScale = 1 / rate;
  94. } else {
  95. this.mixer.timeScale = 0;
  96. }
  97. }
  98. setWireframe( wireframeEnabled ) {
  99. if ( wireframeEnabled ) {
  100. if ( this.meshBody ) this.meshBody.material = this.meshBody.materialWireframe;
  101. if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialWireframe;
  102. } else {
  103. if ( this.meshBody ) this.meshBody.material = this.meshBody.materialTexture;
  104. if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialTexture;
  105. }
  106. }
  107. setSkin( index ) {
  108. if ( this.meshBody && this.meshBody.material.wireframe === false ) {
  109. this.meshBody.material.map = this.skinsBody[ index ];
  110. }
  111. }
  112. setWeapon( index ) {
  113. for ( let i = 0; i < this.weapons.length; i ++ ) this.weapons[ i ].visible = false;
  114. const activeWeapon = this.weapons[ index ];
  115. if ( activeWeapon ) {
  116. activeWeapon.visible = true;
  117. this.meshWeapon = activeWeapon;
  118. this.syncWeaponAnimation();
  119. }
  120. }
  121. setAnimation( clipName ) {
  122. if ( this.meshBody ) {
  123. if ( this.meshBody.activeAction ) {
  124. this.meshBody.activeAction.stop();
  125. this.meshBody.activeAction = null;
  126. }
  127. const action = this.mixer.clipAction( clipName, this.meshBody );
  128. if ( action ) {
  129. this.meshBody.activeAction = action.play();
  130. }
  131. }
  132. this.activeClipName = clipName;
  133. this.syncWeaponAnimation();
  134. }
  135. syncWeaponAnimation() {
  136. const clipName = this.activeClipName;
  137. if ( this.meshWeapon ) {
  138. if ( this.meshWeapon.activeAction ) {
  139. this.meshWeapon.activeAction.stop();
  140. this.meshWeapon.activeAction = null;
  141. }
  142. const action = this.mixer.clipAction( clipName, this.meshWeapon );
  143. if ( action ) {
  144. this.meshWeapon.activeAction = action.syncWith( this.meshBody.activeAction ).play();
  145. }
  146. }
  147. }
  148. update( delta ) {
  149. if ( this.mixer ) this.mixer.update( delta );
  150. }
  151. }
  152. THREE.MD2Character = MD2Character;
  153. } )();