277 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			277 lines
		
	
	
		
			5.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import {
 | 
						|
	AnimationMixer,
 | 
						|
	Box3,
 | 
						|
	Mesh,
 | 
						|
	MeshLambertMaterial,
 | 
						|
	Object3D,
 | 
						|
	TextureLoader,
 | 
						|
	UVMapping,
 | 
						|
	SRGBColorSpace
 | 
						|
} from 'three';
 | 
						|
import { MD2Loader } from '../loaders/MD2Loader.js';
 | 
						|
 | 
						|
class MD2Character {
 | 
						|
 | 
						|
	constructor() {
 | 
						|
 | 
						|
		this.scale = 1;
 | 
						|
		this.animationFPS = 6;
 | 
						|
 | 
						|
		this.root = new Object3D();
 | 
						|
 | 
						|
		this.meshBody = null;
 | 
						|
		this.meshWeapon = null;
 | 
						|
 | 
						|
		this.skinsBody = [];
 | 
						|
		this.skinsWeapon = [];
 | 
						|
 | 
						|
		this.weapons = [];
 | 
						|
 | 
						|
		this.activeAnimation = null;
 | 
						|
 | 
						|
		this.mixer = null;
 | 
						|
 | 
						|
		this.onLoadComplete = function () {};
 | 
						|
 | 
						|
		this.loadCounter = 0;
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	loadParts( config ) {
 | 
						|
 | 
						|
		const scope = this;
 | 
						|
 | 
						|
		function createPart( geometry, skinMap ) {
 | 
						|
 | 
						|
			const materialWireframe = new MeshLambertMaterial( { color: 0xffaa00, wireframe: true } );
 | 
						|
			const materialTexture = new MeshLambertMaterial( { color: 0xffffff, wireframe: false, map: skinMap } );
 | 
						|
 | 
						|
			//
 | 
						|
 | 
						|
			const mesh = new Mesh( geometry, materialTexture );
 | 
						|
			mesh.rotation.y = - Math.PI / 2;
 | 
						|
 | 
						|
			mesh.castShadow = true;
 | 
						|
			mesh.receiveShadow = true;
 | 
						|
 | 
						|
			//
 | 
						|
 | 
						|
			mesh.materialTexture = materialTexture;
 | 
						|
			mesh.materialWireframe = materialWireframe;
 | 
						|
 | 
						|
			return mesh;
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
		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.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 = createPart( geo, scope.skinsBody[ 0 ] );
 | 
						|
			mesh.scale.set( scope.scale, scope.scale, scope.scale );
 | 
						|
 | 
						|
			scope.root.add( mesh );
 | 
						|
 | 
						|
			scope.meshBody = mesh;
 | 
						|
 | 
						|
			scope.meshBody.clipOffset = 0;
 | 
						|
			scope.activeAnimationClipName = mesh.geometry.animations[ 0 ].name;
 | 
						|
 | 
						|
			scope.mixer = new AnimationMixer( mesh );
 | 
						|
 | 
						|
			checkLoadingComplete();
 | 
						|
 | 
						|
		} );
 | 
						|
 | 
						|
		// WEAPONS
 | 
						|
 | 
						|
		const generateCallback = function ( index, name ) {
 | 
						|
 | 
						|
			return function ( geo ) {
 | 
						|
 | 
						|
				const mesh = 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;
 | 
						|
 | 
						|
				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 ( rate !== 0 ) {
 | 
						|
 | 
						|
			this.mixer.timeScale = 1 / rate;
 | 
						|
 | 
						|
		} else {
 | 
						|
 | 
						|
			this.mixer.timeScale = 0;
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	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 ];
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	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;
 | 
						|
 | 
						|
			this.syncWeaponAnimation();
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	setAnimation( clipName ) {
 | 
						|
 | 
						|
		if ( this.meshBody ) {
 | 
						|
 | 
						|
			if ( this.meshBody.activeAction ) {
 | 
						|
 | 
						|
				this.meshBody.activeAction.stop();
 | 
						|
				this.meshBody.activeAction = null;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
			const action = this.mixer.clipAction( clipName, this.meshBody );
 | 
						|
 | 
						|
			if ( action ) {
 | 
						|
 | 
						|
				this.meshBody.activeAction = action.play();
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
		this.activeClipName = clipName;
 | 
						|
 | 
						|
		this.syncWeaponAnimation();
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	syncWeaponAnimation() {
 | 
						|
 | 
						|
		const clipName = this.activeClipName;
 | 
						|
 | 
						|
		if ( this.meshWeapon ) {
 | 
						|
 | 
						|
			if ( this.meshWeapon.activeAction ) {
 | 
						|
 | 
						|
				this.meshWeapon.activeAction.stop();
 | 
						|
				this.meshWeapon.activeAction = null;
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
			const action = this.mixer.clipAction( clipName, this.meshWeapon );
 | 
						|
 | 
						|
			if ( action ) {
 | 
						|
 | 
						|
				this.meshWeapon.activeAction = action.syncWith( this.meshBody.activeAction ).play();
 | 
						|
 | 
						|
			}
 | 
						|
 | 
						|
		}
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
	update( delta ) {
 | 
						|
 | 
						|
		if ( this.mixer ) this.mixer.update( delta );
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
}
 | 
						|
 | 
						|
export { MD2Character };
 |