MD2CharacterComplex.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. */
  4. import {
  5. Box3,
  6. MathUtils,
  7. MeshLambertMaterial,
  8. Object3D,
  9. TextureLoader,
  10. UVMapping,
  11. sRGBEncoding
  12. } from "../../../build/three.module.js";
  13. import { MD2Loader } from "../loaders/MD2Loader.js";
  14. import { MorphBlendMesh } from "../misc/MorphBlendMesh.js";
  15. var MD2CharacterComplex = function () {
  16. var scope = this;
  17. this.scale = 1;
  18. // animation parameters
  19. this.animationFPS = 6;
  20. this.transitionFrames = 15;
  21. // movement model parameters
  22. this.maxSpeed = 275;
  23. this.maxReverseSpeed = - 275;
  24. this.frontAcceleration = 600;
  25. this.backAcceleration = 600;
  26. this.frontDecceleration = 600;
  27. this.angularSpeed = 2.5;
  28. // rig
  29. this.root = new Object3D();
  30. this.meshBody = null;
  31. this.meshWeapon = null;
  32. this.controls = null;
  33. // skins
  34. this.skinsBody = [];
  35. this.skinsWeapon = [];
  36. this.weapons = [];
  37. this.currentSkin = undefined;
  38. //
  39. this.onLoadComplete = function () {};
  40. // internals
  41. this.meshes = [];
  42. this.animations = {};
  43. this.loadCounter = 0;
  44. // internal movement control variables
  45. this.speed = 0;
  46. this.bodyOrientation = 0;
  47. this.walkSpeed = this.maxSpeed;
  48. this.crouchSpeed = this.maxSpeed * 0.5;
  49. // internal animation parameters
  50. this.activeAnimation = null;
  51. this.oldAnimation = null;
  52. // API
  53. this.enableShadows = function ( enable ) {
  54. for ( var i = 0; i < this.meshes.length; i ++ ) {
  55. this.meshes[ i ].castShadow = enable;
  56. this.meshes[ i ].receiveShadow = enable;
  57. }
  58. };
  59. this.setVisible = function ( enable ) {
  60. for ( var i = 0; i < this.meshes.length; i ++ ) {
  61. this.meshes[ i ].visible = enable;
  62. this.meshes[ i ].visible = enable;
  63. }
  64. };
  65. this.shareParts = function ( original ) {
  66. this.animations = original.animations;
  67. this.walkSpeed = original.walkSpeed;
  68. this.crouchSpeed = original.crouchSpeed;
  69. this.skinsBody = original.skinsBody;
  70. this.skinsWeapon = original.skinsWeapon;
  71. // BODY
  72. var mesh = createPart( original.meshBody.geometry, this.skinsBody[ 0 ] );
  73. mesh.scale.set( this.scale, this.scale, this.scale );
  74. this.root.position.y = original.root.position.y;
  75. this.root.add( mesh );
  76. this.meshBody = mesh;
  77. this.meshes.push( mesh );
  78. // WEAPONS
  79. for ( var i = 0; i < original.weapons.length; i ++ ) {
  80. var meshWeapon = createPart( original.weapons[ i ].geometry, this.skinsWeapon[ i ] );
  81. meshWeapon.scale.set( this.scale, this.scale, this.scale );
  82. meshWeapon.visible = false;
  83. meshWeapon.name = original.weapons[ i ].name;
  84. this.root.add( meshWeapon );
  85. this.weapons[ i ] = meshWeapon;
  86. this.meshWeapon = meshWeapon;
  87. this.meshes.push( meshWeapon );
  88. }
  89. };
  90. this.loadParts = function ( config ) {
  91. this.animations = config.animations;
  92. this.walkSpeed = config.walkSpeed;
  93. this.crouchSpeed = config.crouchSpeed;
  94. this.loadCounter = config.weapons.length * 2 + config.skins.length + 1;
  95. var weaponsTextures = [];
  96. for ( var i = 0; i < config.weapons.length; i ++ ) weaponsTextures[ i ] = config.weapons[ i ][ 1 ];
  97. // SKINS
  98. this.skinsBody = loadTextures( config.baseUrl + "skins/", config.skins );
  99. this.skinsWeapon = loadTextures( config.baseUrl + "skins/", weaponsTextures );
  100. // BODY
  101. var loader = new MD2Loader();
  102. loader.load( config.baseUrl + config.body, function ( geo ) {
  103. var boundingBox = new Box3();
  104. boundingBox.setFromBufferAttribute( geo.attributes.position );
  105. scope.root.position.y = - scope.scale * boundingBox.min.y;
  106. var mesh = createPart( geo, scope.skinsBody[ 0 ] );
  107. mesh.scale.set( scope.scale, scope.scale, scope.scale );
  108. scope.root.add( mesh );
  109. scope.meshBody = mesh;
  110. scope.meshes.push( mesh );
  111. checkLoadingComplete();
  112. } );
  113. // WEAPONS
  114. var generateCallback = function ( index, name ) {
  115. return function ( geo ) {
  116. var mesh = createPart( geo, scope.skinsWeapon[ index ] );
  117. mesh.scale.set( scope.scale, scope.scale, scope.scale );
  118. mesh.visible = false;
  119. mesh.name = name;
  120. scope.root.add( mesh );
  121. scope.weapons[ index ] = mesh;
  122. scope.meshWeapon = mesh;
  123. scope.meshes.push( mesh );
  124. checkLoadingComplete();
  125. };
  126. };
  127. for ( var i = 0; i < config.weapons.length; i ++ ) {
  128. loader.load( config.baseUrl + config.weapons[ i ][ 0 ], generateCallback( i, config.weapons[ i ][ 0 ] ) );
  129. }
  130. };
  131. this.setPlaybackRate = function ( rate ) {
  132. if ( this.meshBody ) this.meshBody.duration = this.meshBody.baseDuration / rate;
  133. if ( this.meshWeapon ) this.meshWeapon.duration = this.meshWeapon.baseDuration / rate;
  134. };
  135. this.setWireframe = function ( wireframeEnabled ) {
  136. if ( wireframeEnabled ) {
  137. if ( this.meshBody ) this.meshBody.material = this.meshBody.materialWireframe;
  138. if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialWireframe;
  139. } else {
  140. if ( this.meshBody ) this.meshBody.material = this.meshBody.materialTexture;
  141. if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialTexture;
  142. }
  143. };
  144. this.setSkin = function ( index ) {
  145. if ( this.meshBody && this.meshBody.material.wireframe === false ) {
  146. this.meshBody.material.map = this.skinsBody[ index ];
  147. this.currentSkin = index;
  148. }
  149. };
  150. this.setWeapon = function ( index ) {
  151. for ( var i = 0; i < this.weapons.length; i ++ ) this.weapons[ i ].visible = false;
  152. var activeWeapon = this.weapons[ index ];
  153. if ( activeWeapon ) {
  154. activeWeapon.visible = true;
  155. this.meshWeapon = activeWeapon;
  156. if ( this.activeAnimation ) {
  157. activeWeapon.playAnimation( this.activeAnimation );
  158. this.meshWeapon.setAnimationTime( this.activeAnimation, this.meshBody.getAnimationTime( this.activeAnimation ) );
  159. }
  160. }
  161. };
  162. this.setAnimation = function ( animationName ) {
  163. if ( animationName === this.activeAnimation || ! animationName ) return;
  164. if ( this.meshBody ) {
  165. this.meshBody.setAnimationWeight( animationName, 0 );
  166. this.meshBody.playAnimation( animationName );
  167. this.oldAnimation = this.activeAnimation;
  168. this.activeAnimation = animationName;
  169. this.blendCounter = this.transitionFrames;
  170. }
  171. if ( this.meshWeapon ) {
  172. this.meshWeapon.setAnimationWeight( animationName, 0 );
  173. this.meshWeapon.playAnimation( animationName );
  174. }
  175. };
  176. this.update = function ( delta ) {
  177. if ( this.controls ) this.updateMovementModel( delta );
  178. if ( this.animations ) {
  179. this.updateBehaviors();
  180. this.updateAnimations( delta );
  181. }
  182. };
  183. this.updateAnimations = function ( delta ) {
  184. var mix = 1;
  185. if ( this.blendCounter > 0 ) {
  186. mix = ( this.transitionFrames - this.blendCounter ) / this.transitionFrames;
  187. this.blendCounter -= 1;
  188. }
  189. if ( this.meshBody ) {
  190. this.meshBody.update( delta );
  191. this.meshBody.setAnimationWeight( this.activeAnimation, mix );
  192. this.meshBody.setAnimationWeight( this.oldAnimation, 1 - mix );
  193. }
  194. if ( this.meshWeapon ) {
  195. this.meshWeapon.update( delta );
  196. this.meshWeapon.setAnimationWeight( this.activeAnimation, mix );
  197. this.meshWeapon.setAnimationWeight( this.oldAnimation, 1 - mix );
  198. }
  199. };
  200. this.updateBehaviors = function () {
  201. var controls = this.controls;
  202. var animations = this.animations;
  203. var moveAnimation, idleAnimation;
  204. // crouch vs stand
  205. if ( controls.crouch ) {
  206. moveAnimation = animations[ "crouchMove" ];
  207. idleAnimation = animations[ "crouchIdle" ];
  208. } else {
  209. moveAnimation = animations[ "move" ];
  210. idleAnimation = animations[ "idle" ];
  211. }
  212. // actions
  213. if ( controls.jump ) {
  214. moveAnimation = animations[ "jump" ];
  215. idleAnimation = animations[ "jump" ];
  216. }
  217. if ( controls.attack ) {
  218. if ( controls.crouch ) {
  219. moveAnimation = animations[ "crouchAttack" ];
  220. idleAnimation = animations[ "crouchAttack" ];
  221. } else {
  222. moveAnimation = animations[ "attack" ];
  223. idleAnimation = animations[ "attack" ];
  224. }
  225. }
  226. // set animations
  227. if ( controls.moveForward || controls.moveBackward || controls.moveLeft || controls.moveRight ) {
  228. if ( this.activeAnimation !== moveAnimation ) {
  229. this.setAnimation( moveAnimation );
  230. }
  231. }
  232. if ( Math.abs( this.speed ) < 0.2 * this.maxSpeed && ! ( controls.moveLeft || controls.moveRight || controls.moveForward || controls.moveBackward ) ) {
  233. if ( this.activeAnimation !== idleAnimation ) {
  234. this.setAnimation( idleAnimation );
  235. }
  236. }
  237. // set animation direction
  238. if ( controls.moveForward ) {
  239. if ( this.meshBody ) {
  240. this.meshBody.setAnimationDirectionForward( this.activeAnimation );
  241. this.meshBody.setAnimationDirectionForward( this.oldAnimation );
  242. }
  243. if ( this.meshWeapon ) {
  244. this.meshWeapon.setAnimationDirectionForward( this.activeAnimation );
  245. this.meshWeapon.setAnimationDirectionForward( this.oldAnimation );
  246. }
  247. }
  248. if ( controls.moveBackward ) {
  249. if ( this.meshBody ) {
  250. this.meshBody.setAnimationDirectionBackward( this.activeAnimation );
  251. this.meshBody.setAnimationDirectionBackward( this.oldAnimation );
  252. }
  253. if ( this.meshWeapon ) {
  254. this.meshWeapon.setAnimationDirectionBackward( this.activeAnimation );
  255. this.meshWeapon.setAnimationDirectionBackward( this.oldAnimation );
  256. }
  257. }
  258. };
  259. this.updateMovementModel = function ( delta ) {
  260. var controls = this.controls;
  261. // speed based on controls
  262. if ( controls.crouch ) this.maxSpeed = this.crouchSpeed;
  263. else this.maxSpeed = this.walkSpeed;
  264. this.maxReverseSpeed = - this.maxSpeed;
  265. if ( controls.moveForward ) this.speed = MathUtils.clamp( this.speed + delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed );
  266. if ( controls.moveBackward ) this.speed = MathUtils.clamp( this.speed - delta * this.backAcceleration, this.maxReverseSpeed, this.maxSpeed );
  267. // orientation based on controls
  268. // (don't just stand while turning)
  269. var dir = 1;
  270. if ( controls.moveLeft ) {
  271. this.bodyOrientation += delta * this.angularSpeed;
  272. this.speed = MathUtils.clamp( this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed );
  273. }
  274. if ( controls.moveRight ) {
  275. this.bodyOrientation -= delta * this.angularSpeed;
  276. this.speed = MathUtils.clamp( this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed );
  277. }
  278. // speed decay
  279. if ( ! ( controls.moveForward || controls.moveBackward ) ) {
  280. if ( this.speed > 0 ) {
  281. var k = exponentialEaseOut( this.speed / this.maxSpeed );
  282. this.speed = MathUtils.clamp( this.speed - k * delta * this.frontDecceleration, 0, this.maxSpeed );
  283. } else {
  284. var k = exponentialEaseOut( this.speed / this.maxReverseSpeed );
  285. this.speed = MathUtils.clamp( this.speed + k * delta * this.backAcceleration, this.maxReverseSpeed, 0 );
  286. }
  287. }
  288. // displacement
  289. var forwardDelta = this.speed * delta;
  290. this.root.position.x += Math.sin( this.bodyOrientation ) * forwardDelta;
  291. this.root.position.z += Math.cos( this.bodyOrientation ) * forwardDelta;
  292. // steering
  293. this.root.rotation.y = this.bodyOrientation;
  294. };
  295. // internal helpers
  296. function loadTextures( baseUrl, textureUrls ) {
  297. var textureLoader = new TextureLoader();
  298. var textures = [];
  299. for ( var i = 0; i < textureUrls.length; i ++ ) {
  300. textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], checkLoadingComplete );
  301. textures[ i ].mapping = UVMapping;
  302. textures[ i ].name = textureUrls[ i ];
  303. textures[ i ].encoding = sRGBEncoding;
  304. }
  305. return textures;
  306. }
  307. function createPart( geometry, skinMap ) {
  308. var materialWireframe = new MeshLambertMaterial( { color: 0xffaa00, wireframe: true, morphTargets: true, morphNormals: true } );
  309. var materialTexture = new MeshLambertMaterial( { color: 0xffffff, wireframe: false, map: skinMap, morphTargets: true, morphNormals: true } );
  310. //
  311. var mesh = new MorphBlendMesh( geometry, materialTexture );
  312. mesh.rotation.y = - Math.PI / 2;
  313. //
  314. mesh.materialTexture = materialTexture;
  315. mesh.materialWireframe = materialWireframe;
  316. //
  317. mesh.autoCreateAnimations( scope.animationFPS );
  318. return mesh;
  319. }
  320. function checkLoadingComplete() {
  321. scope.loadCounter -= 1;
  322. if ( scope.loadCounter === 0 ) scope.onLoadComplete();
  323. }
  324. function exponentialEaseOut( k ) {
  325. return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
  326. }
  327. };
  328. export { MD2CharacterComplex };