MD2CharacterComplex.js 12 KB

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