MD2Character.js 5.3 KB

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