Spaces:
Running
Running
| import { | |
| Box3, | |
| MathUtils, | |
| MeshLambertMaterial, | |
| Object3D, | |
| TextureLoader, | |
| UVMapping, | |
| SRGBColorSpace | |
| } from 'three'; | |
| import { MD2Loader } from '../loaders/MD2Loader.js'; | |
| import { MorphBlendMesh } from '../misc/MorphBlendMesh.js'; | |
| class MD2CharacterComplex { | |
| constructor() { | |
| this.scale = 1; | |
| // animation parameters | |
| this.animationFPS = 6; | |
| this.transitionFrames = 15; | |
| // movement model parameters | |
| this.maxSpeed = 275; | |
| this.maxReverseSpeed = - 275; | |
| this.frontAcceleration = 600; | |
| this.backAcceleration = 600; | |
| this.frontDecceleration = 600; | |
| this.angularSpeed = 2.5; | |
| // rig | |
| this.root = new Object3D(); | |
| this.meshBody = null; | |
| this.meshWeapon = null; | |
| this.controls = null; | |
| // skins | |
| this.skinsBody = []; | |
| this.skinsWeapon = []; | |
| this.weapons = []; | |
| this.currentSkin = undefined; | |
| // | |
| this.onLoadComplete = function () {}; | |
| // internals | |
| this.meshes = []; | |
| this.animations = {}; | |
| this.loadCounter = 0; | |
| // internal movement control variables | |
| this.speed = 0; | |
| this.bodyOrientation = 0; | |
| this.walkSpeed = this.maxSpeed; | |
| this.crouchSpeed = this.maxSpeed * 0.5; | |
| // internal animation parameters | |
| this.activeAnimation = null; | |
| this.oldAnimation = null; | |
| // API | |
| } | |
| enableShadows( enable ) { | |
| for ( let i = 0; i < this.meshes.length; i ++ ) { | |
| this.meshes[ i ].castShadow = enable; | |
| this.meshes[ i ].receiveShadow = enable; | |
| } | |
| } | |
| setVisible( enable ) { | |
| for ( let i = 0; i < this.meshes.length; i ++ ) { | |
| this.meshes[ i ].visible = enable; | |
| this.meshes[ i ].visible = enable; | |
| } | |
| } | |
| shareParts( original ) { | |
| this.animations = original.animations; | |
| this.walkSpeed = original.walkSpeed; | |
| this.crouchSpeed = original.crouchSpeed; | |
| this.skinsBody = original.skinsBody; | |
| this.skinsWeapon = original.skinsWeapon; | |
| // BODY | |
| const mesh = this._createPart( original.meshBody.geometry, this.skinsBody[ 0 ] ); | |
| mesh.scale.set( this.scale, this.scale, this.scale ); | |
| this.root.position.y = original.root.position.y; | |
| this.root.add( mesh ); | |
| this.meshBody = mesh; | |
| this.meshes.push( mesh ); | |
| // WEAPONS | |
| for ( let i = 0; i < original.weapons.length; i ++ ) { | |
| const meshWeapon = this._createPart( original.weapons[ i ].geometry, this.skinsWeapon[ i ] ); | |
| meshWeapon.scale.set( this.scale, this.scale, this.scale ); | |
| meshWeapon.visible = false; | |
| meshWeapon.name = original.weapons[ i ].name; | |
| this.root.add( meshWeapon ); | |
| this.weapons[ i ] = meshWeapon; | |
| this.meshWeapon = meshWeapon; | |
| this.meshes.push( meshWeapon ); | |
| } | |
| } | |
| loadParts( config ) { | |
| const scope = this; | |
| function loadTextures( baseUrl, textureUrls ) { | |
| const textureLoader = new TextureLoader(); | |
| const textures = []; | |
| for ( let i = 0; i < textureUrls.length; i ++ ) { | |
| textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], checkLoadingComplete ); | |
| textures[ i ].mapping = UVMapping; | |
| textures[ i ].name = textureUrls[ i ]; | |
| textures[ i ].colorSpace = SRGBColorSpace; | |
| } | |
| return textures; | |
| } | |
| function checkLoadingComplete() { | |
| scope.loadCounter -= 1; | |
| if ( scope.loadCounter === 0 ) scope.onLoadComplete(); | |
| } | |
| this.animations = config.animations; | |
| this.walkSpeed = config.walkSpeed; | |
| this.crouchSpeed = config.crouchSpeed; | |
| this.loadCounter = config.weapons.length * 2 + config.skins.length + 1; | |
| const weaponsTextures = []; | |
| for ( let i = 0; i < config.weapons.length; i ++ ) weaponsTextures[ i ] = config.weapons[ i ][ 1 ]; | |
| // SKINS | |
| this.skinsBody = loadTextures( config.baseUrl + 'skins/', config.skins ); | |
| this.skinsWeapon = loadTextures( config.baseUrl + 'skins/', weaponsTextures ); | |
| // BODY | |
| const loader = new MD2Loader(); | |
| loader.load( config.baseUrl + config.body, function ( geo ) { | |
| const boundingBox = new Box3(); | |
| boundingBox.setFromBufferAttribute( geo.attributes.position ); | |
| scope.root.position.y = - scope.scale * boundingBox.min.y; | |
| const mesh = scope._createPart( geo, scope.skinsBody[ 0 ] ); | |
| mesh.scale.set( scope.scale, scope.scale, scope.scale ); | |
| scope.root.add( mesh ); | |
| scope.meshBody = mesh; | |
| scope.meshes.push( mesh ); | |
| checkLoadingComplete(); | |
| } ); | |
| // WEAPONS | |
| const generateCallback = function ( index, name ) { | |
| return function ( geo ) { | |
| const mesh = scope._createPart( geo, scope.skinsWeapon[ index ] ); | |
| mesh.scale.set( scope.scale, scope.scale, scope.scale ); | |
| mesh.visible = false; | |
| mesh.name = name; | |
| scope.root.add( mesh ); | |
| scope.weapons[ index ] = mesh; | |
| scope.meshWeapon = mesh; | |
| scope.meshes.push( mesh ); | |
| checkLoadingComplete(); | |
| }; | |
| }; | |
| for ( let i = 0; i < config.weapons.length; i ++ ) { | |
| loader.load( config.baseUrl + config.weapons[ i ][ 0 ], generateCallback( i, config.weapons[ i ][ 0 ] ) ); | |
| } | |
| } | |
| setPlaybackRate( rate ) { | |
| if ( this.meshBody ) this.meshBody.duration = this.meshBody.baseDuration / rate; | |
| if ( this.meshWeapon ) this.meshWeapon.duration = this.meshWeapon.baseDuration / rate; | |
| } | |
| setWireframe( wireframeEnabled ) { | |
| if ( wireframeEnabled ) { | |
| if ( this.meshBody ) this.meshBody.material = this.meshBody.materialWireframe; | |
| if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialWireframe; | |
| } else { | |
| if ( this.meshBody ) this.meshBody.material = this.meshBody.materialTexture; | |
| if ( this.meshWeapon ) this.meshWeapon.material = this.meshWeapon.materialTexture; | |
| } | |
| } | |
| setSkin( index ) { | |
| if ( this.meshBody && this.meshBody.material.wireframe === false ) { | |
| this.meshBody.material.map = this.skinsBody[ index ]; | |
| this.currentSkin = index; | |
| } | |
| } | |
| setWeapon( index ) { | |
| for ( let i = 0; i < this.weapons.length; i ++ ) this.weapons[ i ].visible = false; | |
| const activeWeapon = this.weapons[ index ]; | |
| if ( activeWeapon ) { | |
| activeWeapon.visible = true; | |
| this.meshWeapon = activeWeapon; | |
| if ( this.activeAnimation ) { | |
| activeWeapon.playAnimation( this.activeAnimation ); | |
| this.meshWeapon.setAnimationTime( this.activeAnimation, this.meshBody.getAnimationTime( this.activeAnimation ) ); | |
| } | |
| } | |
| } | |
| setAnimation( animationName ) { | |
| if ( animationName === this.activeAnimation || ! animationName ) return; | |
| if ( this.meshBody ) { | |
| this.meshBody.setAnimationWeight( animationName, 0 ); | |
| this.meshBody.playAnimation( animationName ); | |
| this.oldAnimation = this.activeAnimation; | |
| this.activeAnimation = animationName; | |
| this.blendCounter = this.transitionFrames; | |
| } | |
| if ( this.meshWeapon ) { | |
| this.meshWeapon.setAnimationWeight( animationName, 0 ); | |
| this.meshWeapon.playAnimation( animationName ); | |
| } | |
| } | |
| update( delta ) { | |
| if ( this.controls ) this.updateMovementModel( delta ); | |
| if ( this.animations ) { | |
| this.updateBehaviors(); | |
| this.updateAnimations( delta ); | |
| } | |
| } | |
| updateAnimations( delta ) { | |
| let mix = 1; | |
| if ( this.blendCounter > 0 ) { | |
| mix = ( this.transitionFrames - this.blendCounter ) / this.transitionFrames; | |
| this.blendCounter -= 1; | |
| } | |
| if ( this.meshBody ) { | |
| this.meshBody.update( delta ); | |
| this.meshBody.setAnimationWeight( this.activeAnimation, mix ); | |
| this.meshBody.setAnimationWeight( this.oldAnimation, 1 - mix ); | |
| } | |
| if ( this.meshWeapon ) { | |
| this.meshWeapon.update( delta ); | |
| this.meshWeapon.setAnimationWeight( this.activeAnimation, mix ); | |
| this.meshWeapon.setAnimationWeight( this.oldAnimation, 1 - mix ); | |
| } | |
| } | |
| updateBehaviors() { | |
| const controls = this.controls; | |
| const animations = this.animations; | |
| let moveAnimation, idleAnimation; | |
| // crouch vs stand | |
| if ( controls.crouch ) { | |
| moveAnimation = animations[ 'crouchMove' ]; | |
| idleAnimation = animations[ 'crouchIdle' ]; | |
| } else { | |
| moveAnimation = animations[ 'move' ]; | |
| idleAnimation = animations[ 'idle' ]; | |
| } | |
| // actions | |
| if ( controls.jump ) { | |
| moveAnimation = animations[ 'jump' ]; | |
| idleAnimation = animations[ 'jump' ]; | |
| } | |
| if ( controls.attack ) { | |
| if ( controls.crouch ) { | |
| moveAnimation = animations[ 'crouchAttack' ]; | |
| idleAnimation = animations[ 'crouchAttack' ]; | |
| } else { | |
| moveAnimation = animations[ 'attack' ]; | |
| idleAnimation = animations[ 'attack' ]; | |
| } | |
| } | |
| // set animations | |
| if ( controls.moveForward || controls.moveBackward || controls.moveLeft || controls.moveRight ) { | |
| if ( this.activeAnimation !== moveAnimation ) { | |
| this.setAnimation( moveAnimation ); | |
| } | |
| } | |
| if ( Math.abs( this.speed ) < 0.2 * this.maxSpeed && ! ( controls.moveLeft || controls.moveRight || controls.moveForward || controls.moveBackward ) ) { | |
| if ( this.activeAnimation !== idleAnimation ) { | |
| this.setAnimation( idleAnimation ); | |
| } | |
| } | |
| // set animation direction | |
| if ( controls.moveForward ) { | |
| if ( this.meshBody ) { | |
| this.meshBody.setAnimationDirectionForward( this.activeAnimation ); | |
| this.meshBody.setAnimationDirectionForward( this.oldAnimation ); | |
| } | |
| if ( this.meshWeapon ) { | |
| this.meshWeapon.setAnimationDirectionForward( this.activeAnimation ); | |
| this.meshWeapon.setAnimationDirectionForward( this.oldAnimation ); | |
| } | |
| } | |
| if ( controls.moveBackward ) { | |
| if ( this.meshBody ) { | |
| this.meshBody.setAnimationDirectionBackward( this.activeAnimation ); | |
| this.meshBody.setAnimationDirectionBackward( this.oldAnimation ); | |
| } | |
| if ( this.meshWeapon ) { | |
| this.meshWeapon.setAnimationDirectionBackward( this.activeAnimation ); | |
| this.meshWeapon.setAnimationDirectionBackward( this.oldAnimation ); | |
| } | |
| } | |
| } | |
| updateMovementModel( delta ) { | |
| function exponentialEaseOut( k ) { | |
| return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1; | |
| } | |
| const controls = this.controls; | |
| // speed based on controls | |
| if ( controls.crouch ) this.maxSpeed = this.crouchSpeed; | |
| else this.maxSpeed = this.walkSpeed; | |
| this.maxReverseSpeed = - this.maxSpeed; | |
| if ( controls.moveForward ) this.speed = MathUtils.clamp( this.speed + delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed ); | |
| if ( controls.moveBackward ) this.speed = MathUtils.clamp( this.speed - delta * this.backAcceleration, this.maxReverseSpeed, this.maxSpeed ); | |
| // orientation based on controls | |
| // (don't just stand while turning) | |
| const dir = 1; | |
| if ( controls.moveLeft ) { | |
| this.bodyOrientation += delta * this.angularSpeed; | |
| this.speed = MathUtils.clamp( this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed ); | |
| } | |
| if ( controls.moveRight ) { | |
| this.bodyOrientation -= delta * this.angularSpeed; | |
| this.speed = MathUtils.clamp( this.speed + dir * delta * this.frontAcceleration, this.maxReverseSpeed, this.maxSpeed ); | |
| } | |
| // speed decay | |
| if ( ! ( controls.moveForward || controls.moveBackward ) ) { | |
| if ( this.speed > 0 ) { | |
| const k = exponentialEaseOut( this.speed / this.maxSpeed ); | |
| this.speed = MathUtils.clamp( this.speed - k * delta * this.frontDecceleration, 0, this.maxSpeed ); | |
| } else { | |
| const k = exponentialEaseOut( this.speed / this.maxReverseSpeed ); | |
| this.speed = MathUtils.clamp( this.speed + k * delta * this.backAcceleration, this.maxReverseSpeed, 0 ); | |
| } | |
| } | |
| // displacement | |
| const forwardDelta = this.speed * delta; | |
| this.root.position.x += Math.sin( this.bodyOrientation ) * forwardDelta; | |
| this.root.position.z += Math.cos( this.bodyOrientation ) * forwardDelta; | |
| // steering | |
| this.root.rotation.y = this.bodyOrientation; | |
| } | |
| // internal | |
| _createPart( geometry, skinMap ) { | |
| const materialWireframe = new MeshLambertMaterial( { color: 0xffaa00, wireframe: true } ); | |
| const materialTexture = new MeshLambertMaterial( { color: 0xffffff, wireframe: false, map: skinMap } ); | |
| // | |
| const mesh = new MorphBlendMesh( geometry, materialTexture ); | |
| mesh.rotation.y = - Math.PI / 2; | |
| // | |
| mesh.materialTexture = materialTexture; | |
| mesh.materialWireframe = materialWireframe; | |
| // | |
| mesh.autoCreateAnimations( this.animationFPS ); | |
| return mesh; | |
| } | |
| } | |
| export { MD2CharacterComplex }; | |