MD2Character.js 5.1 KB

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