MD2Character.js 5.5 KB

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