javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095
							<!doctype html>
<html lang="en">
	<head>
		<title>three.js webgl - morphtargets - MD2</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
		    body {
			color: #fff;
			font-family:Monospace;
			font-size:13px;
			text-align:center;
			font-weight: bold;

			background-color: #000;
			margin: 0px;
			overflow: hidden;
		    }

		    #info {
			position: relative;
			margin: 0 auto -2.1em;
			top: 0px;

			padding: 5px;
			z-index:100;
		    }

		    a { color: skyblue; }
		</style>
	</head>

	<body>
		<div id="info">
			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - morphtargets -
			MD2 character by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=368">Brian Collins</a> -
			converted by <a href="https://twitter.com/#!/oosmoxiecode">@oosmoxiecode</a>'s <a href="http://oos.moxiecode.com/blog/2012/01/md2-to-json-converter/">MD2 converter<a>
		</div>

		<script src="../src/Three.js"></script>
		<script src="../src/core/Clock.js"></script>
		<script src="../src/core/Color.js"></script>
		<script src="../src/core/Vector2.js"></script>
		<script src="../src/core/Vector3.js"></script>
		<script src="../src/core/Vector4.js"></script>
		<script src="../src/core/Frustum.js"></script>
		<script src="../src/core/Ray.js"></script>
		<script src="../src/core/Rectangle.js"></script>
		<script src="../src/core/Math.js"></script>
		<script src="../src/core/Matrix3.js"></script>
		<script src="../src/core/Matrix4.js"></script>
		<script src="../src/core/Object3D.js"></script>
		<script src="../src/core/Projector.js"></script>
		<script src="../src/core/Quaternion.js"></script>
		<script src="../src/core/Vertex.js"></script>
		<script src="../src/core/Face3.js"></script>
		<script src="../src/core/Face4.js"></script>
		<script src="../src/core/UV.js"></script>
		<script src="../src/core/Geometry.js"></script>
		<script src="../src/core/Spline.js"></script>
		<script src="../src/core/Edge.js"></script>
		<script src="../src/cameras/Camera.js"></script>
		<script src="../src/cameras/OrthographicCamera.js"></script>
		<script src="../src/cameras/PerspectiveCamera.js"></script>
		<script src="../src/lights/Light.js"></script>
		<script src="../src/lights/AmbientLight.js"></script>
		<script src="../src/lights/DirectionalLight.js"></script>
		<script src="../src/lights/PointLight.js"></script>
		<script src="../src/lights/SpotLight.js"></script>
		<script src="../src/materials/Material.js"></script>
		<script src="../src/materials/LineBasicMaterial.js"></script>
		<script src="../src/materials/MeshBasicMaterial.js"></script>
		<script src="../src/materials/MeshLambertMaterial.js"></script>
		<script src="../src/materials/MeshPhongMaterial.js"></script>
		<script src="../src/materials/MeshDepthMaterial.js"></script>
		<script src="../src/materials/MeshNormalMaterial.js"></script>
		<script src="../src/materials/MeshFaceMaterial.js"></script>
		<script src="../src/materials/MeshShaderMaterial.js"></script>
		<script src="../src/materials/ParticleBasicMaterial.js"></script>
		<script src="../src/materials/ParticleCanvasMaterial.js"></script>
		<script src="../src/materials/ParticleDOMMaterial.js"></script>
		<script src="../src/materials/ShaderMaterial.js"></script>
		<script src="../src/textures/Texture.js"></script>
		<script src="../src/textures/DataTexture.js"></script>
		<script src="../src/objects/Particle.js"></script>
		<script src="../src/objects/ParticleSystem.js"></script>
		<script src="../src/objects/Line.js"></script>
		<script src="../src/objects/Mesh.js"></script>
		<script src="../src/objects/Bone.js"></script>
		<script src="../src/objects/SkinnedMesh.js"></script>
		<script src="../src/objects/MorphAnimMesh.js"></script>
		<script src="../src/objects/Ribbon.js"></script>
		<script src="../src/objects/LOD.js"></script>
		<script src="../src/objects/Sprite.js"></script>
		<script src="../src/scenes/Scene.js"></script>
		<script src="../src/scenes/Fog.js"></script>
		<script src="../src/scenes/FogExp2.js"></script>
		<script src="../src/renderers/DOMRenderer.js"></script>
		<script src="../src/renderers/CanvasRenderer.js"></script>
		<script src="../src/renderers/SVGRenderer.js"></script>
		<script src="../src/renderers/WebGLShaders.js"></script>
		<script src="../src/renderers/WebGLRenderer.js"></script>
		<script src="../src/renderers/WebGLRenderTarget.js"></script>
		<script src="../src/renderers/WebGLRenderTargetCube.js"></script>
		<script src="../src/renderers/renderables/RenderableVertex.js"></script>
		<script src="../src/renderers/renderables/RenderableFace3.js"></script>
		<script src="../src/renderers/renderables/RenderableFace4.js"></script>
		<script src="../src/renderers/renderables/RenderableObject.js"></script>
		<script src="../src/renderers/renderables/RenderableParticle.js"></script>
		<script src="../src/renderers/renderables/RenderableLine.js"></script>
		<script src="../src/extras/ColorUtils.js"></script>
		<script src="../src/extras/GeometryUtils.js"></script>
		<script src="../src/extras/ImageUtils.js"></script>
		<script src="../src/extras/SceneUtils.js"></script>
		<script src="../src/extras/ShaderUtils.js"></script>
		<script src="../src/extras/core/BufferGeometry.js"></script>
		<script src="../src/extras/core/Curve.js"></script>
		<script src="../src/extras/core/CurvePath.js"></script>
		<script src="../src/extras/core/EventTarget.js"></script>
		<script src="../src/extras/core/Gyroscope.js"></script>
		<script src="../src/extras/core/Path.js"></script>
		<script src="../src/extras/core/Shape.js"></script>
		<script src="../src/extras/core/TextPath.js"></script>
		<script src="../src/extras/animation/AnimationHandler.js"></script>
		<script src="../src/extras/animation/Animation.js"></script>
		<script src="../src/extras/animation/KeyFrameAnimation.js"></script>
		<script src="../src/extras/cameras/CubeCamera.js"></script>
		<script src="../src/extras/cameras/CombinedCamera.js"></script>
		<script src="../src/extras/controls/FirstPersonControls.js"></script>
		<script src="../src/extras/controls/PathControls.js"></script>
		<script src="../src/extras/controls/FlyControls.js"></script>
		<script src="../src/extras/controls/RollControls.js"></script>
		<script src="../src/extras/controls/TrackballControls.js"></script>
		<script src="../src/extras/geometries/CubeGeometry.js"></script>
		<script src="../src/extras/geometries/CylinderGeometry.js"></script>
		<script src="../src/extras/geometries/ExtrudeGeometry.js"></script>
		<script src="../src/extras/geometries/LatheGeometry.js"></script>
		<script src="../src/extras/geometries/PlaneGeometry.js"></script>
		<script src="../src/extras/geometries/SphereGeometry.js"></script>
		<script src="../src/extras/geometries/TextGeometry.js"></script>
		<script src="../src/extras/geometries/TorusGeometry.js"></script>
		<script src="../src/extras/geometries/TorusKnotGeometry.js"></script>
		<script src="../src/extras/geometries/PolyhedronGeometry.js"></script>
		<script src="../src/extras/geometries/IcosahedronGeometry.js"></script>
		<script src="../src/extras/geometries/OctahedronGeometry.js"></script>
		<script src="../src/extras/geometries/TetrahedronGeometry.js"></script>
		<script src="../src/extras/helpers/AxisHelper.js"></script>
		<script src="../src/extras/helpers/CameraHelper.js"></script>
		<script src="../src/extras/modifiers/SubdivisionModifier.js"></script>
		<script src="../src/extras/loaders/Loader.js"></script>
		<script src="../src/extras/loaders/BinaryLoader.js"></script>
		<script src="../src/extras/loaders/ColladaLoader.js"></script>
		<script src="../src/extras/loaders/JSONLoader.js"></script>
		<script src="../src/extras/loaders/SceneLoader.js"></script>
		<script src="../src/extras/loaders/UTF8Loader.js"></script>
		<script src="../src/extras/objects/MarchingCubes.js"></script>
		<script src="../src/extras/objects/LensFlare.js"></script>
		<script src="../src/extras/renderers/plugins/LensFlarePlugin.js"></script>
		<script src="../src/extras/renderers/plugins/ShadowMapPlugin.js"></script>
		<script src="../src/extras/renderers/plugins/SpritePlugin.js"></script>
		<script src="../src/extras/renderers/AnaglyphWebGLRenderer.js"></script>
		<script src="../src/extras/renderers/CrosseyedWebGLRenderer.js"></script>
		<script src="../src/extras/shaders/ShaderFlares.js"></script>
		<script src="../src/extras/shaders/ShaderSprite.js"></script>

		<script src="../src/objects/MorphBlendMesh.js"></script>
		<script src='js/MD2CharacterComplex.js'></script>

		<script src='js/ShaderExtras.js'></script>

		<script src="js/postprocessing/EffectComposer.js"></script>
		<script src="js/postprocessing/RenderPass.js"></script>
		<script src="js/postprocessing/BloomPass.js"></script>
		<script src="js/postprocessing/ShaderPass.js"></script>
		<script src="js/postprocessing/MaskPass.js"></script>
		<script src="js/postprocessing/SavePass.js"></script>

		<script src='js/Detector.js'></script>
		<script src='js/Stats.js'></script>
		<script src='js/DAT.GUI.min.js'></script>

		<script src="fonts/helvetiker_bold.typeface.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var MARGIN = 100;
			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;

			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 2048;

			var container, camera, scene, renderer;

			var character;

			var cameraControls;

			var morphs = [];

			var gui, playbackConfig = {

				speed: 1.0,
				wireframe: false

			};

			var controls = {

				moveForward: false,
				moveBackward: false,
				moveLeft: false,
				moveRight: false

			};

			var clock = new THREE.Clock();

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// SCENE

				scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0xffffff, 1000, 8000 );
				scene.fog.color.setHSV( 0.6, 0.2, 0.99 );

				// CAMERA

				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 8000 );
				camera.position.set( 0, 150, 800 );
				scene.add( camera );

				// LIGHTS

				scene.add( new THREE.AmbientLight( 0x222222 ) );

				light1 = new THREE.DirectionalLight( 0xffffff, 1.2 );
				light1.position.set( 200, 650, 500 );

				light1.castShadow = true;
				light1.shadowMapWidth = 1024;
				light1.shadowMapHeight = 1024;
				light1.shadowDarkness = 0.4;
				//light1.shadowCameraVisible = true;

				light1.shadowCascade = true;
				light1.shadowCascadeCount = 3;
				light1.shadowCascadeBias   = [ 0.001, 0, 0.0007 ];
				light1.shadowCascadeNearZ = [ -1.000, 0.9975, 0.9995 ];
				light1.shadowCascadeFarZ  = [  0.9975, 0.9995, 1.000 ];
				light1.shadowCascadeWidth  = [ SHADOW_MAP_WIDTH, SHADOW_MAP_WIDTH, SHADOW_MAP_WIDTH ];
				light1.shadowCascadeHeight = [ SHADOW_MAP_HEIGHT, SHADOW_MAP_HEIGHT, SHADOW_MAP_HEIGHT ];

				scene.add( light1 );

				//  GROUND

				var gt = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" );
				var gt = THREE.ImageUtils.loadTexture( "textures/patterns/bright_squares256.png" );
				var gg = new THREE.PlaneGeometry( 32000, 32000 );
				var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt, perPixel: true } );

				var ground = new THREE.Mesh( gg, gm );
				ground.material.map.repeat.set( 32, 32);
				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
				ground.rotation.x = - Math.PI/2;
				ground.receiveShadow = true;

				scene.add( ground );

				// OBJECTS

				var objMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, maps: gt, perPixel: true } );
				var geo = new THREE.CubeGeometry( 10, 10, 10, 1, 1, 1, objMaterial, { ny: false } );

				var mergedGeo = new THREE.Geometry();


				for ( var i = 0; i < 100; i ++ ) {

					var s = THREE.Math.randFloat( 1, 30 );
					var ss = THREE.Math.randFloat( 1, 75 );

					var mesh = new THREE.Mesh( geo, objMaterial );
					mesh.position.x = THREE.Math.randFloatSpread( 20000 );
					mesh.position.z = THREE.Math.randFloatSpread( 20000 );
					mesh.position.y = 0.5 * 10 * s;
					mesh.scale.y = s;
					mesh.scale.x = ss;
					mesh.scale.z = ss;

					mesh.matrixAutoUpdate = false;
					mesh.updateMatrix();

					THREE.GeometryUtils.merge( mergedGeo, mesh );

				}

				var mesh = new THREE.Mesh( mergedGeo, objMaterial );
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add( mesh );

				// TEXT

				var textGeo = new THREE.TextGeometry( "THREE.JS", {

					size: 200,
					height: 50,
					curveSegments: 12,

					font: "helvetiker",
					weight: "bold",
					style: "normal",

					bevelThickness: 2,
					bevelSize: 5,
					bevelEnabled: true

				});

				textGeo.computeBoundingBox();
				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

				var textMaterial = new THREE.MeshPhongMaterial( { color: 0x00aaff, specular: 0x00aaff, ambient: 0x00aaff, perPixel: true } );

				var mesh = new THREE.Mesh( textGeo, textMaterial );
				mesh.position.x = centerOffset;
				mesh.position.y = 67;

				mesh.castShadow = true;
				mesh.receiveShadow = true;

				scene.add( mesh );

				// CUBES

				var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1500, 220, 150 ), objMaterial );

				mesh.position.y = -50;
				mesh.position.z = 20;

				mesh.castShadow = true;
				mesh.receiveShadow = true;

				scene.add( mesh );

				var mesh = new THREE.Mesh( new THREE.CubeGeometry( 1600, 170, 250 ), objMaterial );

				mesh.position.y = -50;
				mesh.position.z = 20;

				mesh.castShadow = true;
				mesh.receiveShadow = true;

				scene.add( mesh );

				// MORPHS

				function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {

					var s = 1;

					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 10, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading, perPixel: true } );

					if ( 1 || fudgeColor ) {

						THREE.ColorUtils.adjustHSV( material.color, 0, 0.5 - Math.random(), 0.5 - Math.random() );
						material.ambient = material.color;

					}

					var meshAnim = new THREE.MorphAnimMesh( geometry, material );

					meshAnim.speed = speed;
					meshAnim.duration = duration;
					meshAnim.time = 600 * Math.random();

					meshAnim.position.set( x, y, z );
					meshAnim.rotation.y = Math.PI/2;

					meshAnim.scale.set( s, s, s );

					meshAnim.castShadow = true;
					meshAnim.receiveShadow = true;

					scene.add( meshAnim );

					morphs.push( meshAnim );

				}

				function morphColorsToFaceColors( geometry ) {

					if ( geometry.morphColors && geometry.morphColors.length ) {

						var colorMap = geometry.morphColors[ 0 ];

						for ( var i = 0; i < colorMap.colors.length; i ++ ) {

							geometry.faces[ i ].color = colorMap.colors[ i ];

						}

					}

				}

				var loader = new THREE.JSONLoader();

				loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {

					geometry.computeMorphNormals();
					morphColorsToFaceColors( geometry );

					for ( var i = 0; i < 50; i ++ ) {

						addMorph( geometry, 40, 2000, -3000 + Math.random() * 6000, 0 + 60, -3000 + Math.random() * 6000 );

					}


				} );


				loader.load( "models/animated/horse.js", function( geometry ) {

					geometry.computeMorphNormals();
					morphColorsToFaceColors( geometry );

					for ( var i = 0; i < 50; i ++ ) {

						addMorph( geometry, 550, 1000, -5000 + Math.random() * 10000, 0, -5000 + Math.random() * 10000 );

					}


				} );

				loader.load( "obj/morphs/flamingo.js", function( geometry ) {

					geometry.computeMorphNormals();
					morphColorsToFaceColors( geometry );

					for ( var i = 0; i < 50; i ++ ) {

						addMorph( geometry, 850, 750, -5000 + Math.random() * 10000, 0 + 500 + 500 * Math.random(), -5000 + Math.random() * 10000 );

					}


				} );

				// RENDERER

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				renderer.domElement.style.position = "relative";
				renderer.domElement.style.top = MARGIN + 'px';
				renderer.setClearColor( scene.fog.color, 1 );

				container.appendChild( renderer.domElement );

				// CONTROLS

				cameraControls = new THREE.TrackballControls( camera, renderer.domElement );
				cameraControls.target.set( 0, 0, 0 );

				//

				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				//renderer.physicallyBasedShading = true;

				renderer.shadowMapEnabled = true;
				//renderer.shadowMapSoft = false;
				//renderer.shadowMapCullFrontFaces = false;

				renderer.shadowMapCascade = true;
				//renderer.shadowMapDebug = true;

				renderer.autoClear = false;

				// STATS

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				stats.domElement.style.zIndex = 100;
				container.appendChild( stats.domElement );

				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
				stats.domElement.children[ 0 ].style.background = "transparent";
				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";

				// EVENTS

				window.addEventListener( 'resize', onWindowResize, false );
				document.addEventListener( 'keydown', onKeyDown, false );
				document.addEventListener( 'keyup', onKeyUp, false );

				// GUI

				gui = new DAT.GUI();

				gui.add( playbackConfig, 'speed', 0, 2 ).onChange( function() {

					character.setPlaybackRate( playbackConfig.speed );

				} );

				gui.add( playbackConfig, 'wireframe', false ).onChange( function() {

					character.setWireframe( playbackConfig.wireframe );

				} );

				// CHARACTER

				var configOgro = {

					baseUrl: "models/animated/ogro/",

					body: "ogro.js",
					skins: [ "ogro.jpg", "igdosh.jpg" ],
					weapons:  [ [ "weapon.js", "weapon.jpg" ]
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "cwalk",
						crouchIdle: "cstand",
						crouchAttach: "crattack"
					},

					walkSpeed: 350,
					crouchSpeed: 175

				};

				var configSoldier = {

					baseUrl: "models/animated/ss-soldier/",

					body: "ss-soldier.js",
					skins: [ "ss-soldier.jpg" ],
					weapons:  [ [ "ss-weapon.js", "ss-weapon.jpg" ]
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "cwalk",
						crouchIdle: "cstand",
						crouchAttach: "crattack"
					},

					walkSpeed: 275,
					crouchSpeed: 175

				};

				var configArchvile = {

					baseUrl: "models/animated/archvile/",

					body: "archvile.js",
					skins: [ "archvile.jpg" ],
					weapons:  [
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "cwalk",
						crouchIdle: "cstand",
						crouchAttach: "crattack"
					},

					walkSpeed: 275,
					crouchSpeed: 175

				};

				var configRevenant = {

					baseUrl: "models/animated/revenant/",

					body: "revenant.js",
					skins: [ "revenant.jpg", "revenant2.jpg", "revenant3.jpg", "revenant4.jpg", "revenantfire.jpg", "revenantfire2.jpg", "revenantfire3.jpg", "revenantfire4.jpg" ],
					weapons:  [ [ "revenant_mf.js", "revenant_mf1.png" ],
								//[ "revenant_mf.js", "revenant_mf2.png" ]
								],
					animations: {
						move: "walk",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "cwalk",
						crouchIdle: "cstand",
						crouchAttach: "crattack"
					},

					walkSpeed: 275,
					crouchSpeed: 175

				};

				var configKnight = {

					baseUrl: "models/animated/knight/",

					body: "knight.js",
					skins: [ "skin.jpg" ],
					weapons:  [
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "crwalk",
						crouchIdle: "crstnd",
						crouchAttach: "crattk"
					},

					walkSpeed: 275,
					crouchSpeed: 175

				};

				var configGoblin = {

					baseUrl: "models/animated/goblin/",

					body: "goblin.js",
					skins: [ "skin.jpg" ],
					weapons:  [
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "crwalk",
						crouchIdle: "crstnd",
						crouchAttach: "crattk"
					},

					walkSpeed: 275,
					crouchSpeed: 175

				};

				var configBauul = {

					baseUrl: "models/animated/bauul/",

					body: "bauul.js",
					skins: [ "skin.jpg", "ctf_r.png", "ctf_b.png" ],
					weapons:  [ [ "weapon.js", "weapon.png" ]
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "crwalk",
						crouchIdle: "crstnd",
						crouchAttach: "crattak"
					},

					walkSpeed: 275,
					crouchSpeed: 175

				};

				var configRata = {

					baseUrl: "models/animated/ratamahatta/",

					body: "ratamahatta.js",
					skins: [ "ratamahatta.png", "ctf_b.png", "ctf_r.png", "dead.png", "gearwhore.png" ],
					weapons:  [  [ "weapon.js", "weapon.png" ],
								 [ "w_bfg.js", "w_bfg.png" ],
								 [ "w_blaster.js", "w_blaster.png" ],
								 [ "w_chaingun.js", "w_chaingun.png" ],
								 [ "w_glauncher.js", "w_glauncher.png" ],
								 [ "w_hyperblaster.js", "w_hyperblaster.png" ],
								 [ "w_machinegun.js", "w_machinegun.png" ],
								 [ "w_railgun.js", "w_railgun.png" ],
								 [ "w_rlauncher.js", "w_rlauncher.png" ],
								 [ "w_shotgun.js", "w_shotgun.png" ],
								 [ "w_sshotgun.js", "w_sshotgun.png" ]
								],
					animations: {
						move: "run",
						idle: "stand",
						jump: "jump",
						attack: "attack",
						crouchMove: "crwalk",
						crouchIdle: "crstand",
						crouchAttach: "crattack"
					},

					walkSpeed: 400,
					crouchSpeed: 175

				};

				character = new THREE.MD2CharacterComplex();
				character.scale = 3.5;
				character.controls = controls;
				//character.animationFPS = 1;

				character.onLoadComplete = function() {

					setupSkinsGUI( character );
					setupWeaponsGUI( character );
					setupGUIAnimations( character );

					//console.log( character );

					scene.add( character.root );

					var gyro = new THREE.Gyroscope();
					gyro.add( camera );
					character.root.add( gyro );

				}

				character.loadParts( configOgro );

				//createOverlay();

				// COMPOSER

				renderer.autoClear = false;

				renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );

				effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
				var effectVignette = new THREE.ShaderPass( THREE.ShaderExtras[ "vignette" ] );

				hblur = new THREE.ShaderPass( THREE.ShaderExtras[ "horizontalTiltShift" ] );
				vblur = new THREE.ShaderPass( THREE.ShaderExtras[ "verticalTiltShift" ] );

				var bluriness = 4;

				hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
				vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;

				hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.5;

				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );

				composer = new THREE.EffectComposer( renderer, renderTarget );

				var renderModel = new THREE.RenderPass( scene, camera );

				effectVignette.renderToScreen = true;
				vblur.renderToScreen = true;

				composer = new THREE.EffectComposer( renderer, renderTarget );

				composer.addPass( renderModel );

				composer.addPass( effectFXAA );

				composer.addPass( hblur );
				composer.addPass( vblur );

			}

			// OVERLAY

			function createOverlay() {

				cameraOrtho = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2,  SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10, 1000 );
				cameraOrtho.position.z = 10;

				var shader = THREE.ShaderExtras[ "screen" ];
				var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );

				hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );

				var hudGeo = new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT );
				var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );

				sceneHUD = new THREE.Scene();
				sceneHUD.add( hudMesh );

				sceneHUD.add( cameraOrtho );

				hudMaterial.uniforms.tDiffuse.texture = THREE.ImageUtils.loadTexture( "textures/vignette.png" );
				hudMaterial.uniforms.opacity.value = 0.5;

			}


			// EVENT HANDLERS

			function onWindowResize( event ) {

				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight - 2 * MARGIN;

				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				camera.aspect = SCREEN_WIDTH/ SCREEN_HEIGHT;
				camera.updateProjectionMatrix();

			}

			function onKeyDown ( event ) {

				switch( event.keyCode ) {

					case 38: /*up*/
					case 87: /*W*/ 	controls.moveForward = true; break;

					case 40: /*down*/
					case 83: /*S*/ 	 controls.moveBackward = true; break;

					case 37: /*left*/
					case 65: /*A*/   controls.moveLeft = true; break;

					case 39: /*right*/
					case 68: /*D*/    controls.moveRight = true; break;

					case 67: /*C*/     controls.crouch = true; break;
					case 32: /*space*/ controls.jump = true; break;
					case 17: /*ctrl*/  controls.attack = true; break;

					case 49: /*1*/	setWeapon( 0 ); break;
					case 50: /*2*/	setWeapon( 1 ); break;
					case 51: /*3*/	setWeapon( 2 ); break;
					case 52: /*4*/	setWeapon( 3 ); break;
					case 53: /*5*/	setWeapon( 4 ); break;
					case 54: /*6*/	setWeapon( 5 ); break;
					case 55: /*7*/	setWeapon( 6 ); break;
					case 56: /*8*/	setWeapon( 7 ); break;
					case 57: /*9*/	setWeapon( 8 ); break;
					case 48: /*0*/	setWeapon( 10 ); break;

				}

			};

			function onKeyUp ( event ) {

				switch( event.keyCode ) {

					case 38: /*up*/
					case 87: /*W*/ controls.moveForward = false; break;

					case 40: /*down*/
					case 83: /*S*/ 	 controls.moveBackward = false; break;

					case 37: /*left*/
					case 65: /*A*/ 	 controls.moveLeft = false; break;

					case 39: /*right*/
					case 68: /*D*/ 	  controls.moveRight = false; break;

					case 67: /*C*/     controls.crouch = false; break;
					case 32: /*space*/ controls.jump = false; break;
					case 17: /*ctrl*/  controls.attack = false; break;

				}

			};

			//

			function setWeapon( index ) {

				character.setWeapon( index );

			};

			// GUI

			function addGuiHeader( label, h, s, v ) {

				// add dummy item

				playbackConfig[ label ] = function() {};

				// hack GUI item styling

				var dummy = gui.add( playbackConfig, label, label );
				setGuiHeaderStyle( dummy, h, s, v );

			}

			function setGuiHeaderStyle( g, h, s, v ) {

				var color = "hsl(" + h + "," + s + "%, " + v + "%)";

				g.domElement.style.borderLeft = "solid 5px " + color;
				g.domElement.style.background = color;
				g.domElement.style.fontWeight = "bold";

			}

			function setGuiElementStyle( a, h, s, v, display ) {

				var i, s, color = "hsl(" + h + "," + s + "%, " + v + "%)";

				for( i = 0; i < a.length; i ++ ) {

					s = a[ i ].domElement.style;
					s.borderLeft = "solid 5px " + color;
					s.display = display ? display : "none";

				}

			}

			function labelize( text ) {

				var parts = text.split( "." );

				if ( parts.length > 1 ) {

					parts.length -= 1;
					return parts.join( "." );

				}

				return text;

			}

			//

			function setupWeaponsGUI( character ) {

				addGuiHeader( "Weapons", 20, 90, 30 );

				var generateCallback = function( index ) {

					return function () { character.setWeapon( index ); };

				}

				var guiItems = [];

				for ( var i = 0; i < character.weapons.length; i ++ ) {

					var name = character.weapons[ i ].name;

					playbackConfig[ name ] = generateCallback( i );
					guiItems[ i ] = gui.add( playbackConfig, name ).name( labelize( name ) );

				}

				setGuiElementStyle( guiItems, 20, 90, 30, "block" );

			}

			//

			function setupSkinsGUI( character ) {

				addGuiHeader( "Skins", 0, 90, 30 );

				var generateCallback = function( index ) {

					return function () { character.setSkin( index ); };

				}

				var guiItems = [];

				for ( var i = 0; i < character.skinsBody.length; i ++ ) {

					var name = character.skinsBody[ i ].name;

					playbackConfig[ name ] = generateCallback( i );
					guiItems[ i ] = gui.add( playbackConfig, name ).name( labelize( name ) );

				}

				setGuiElementStyle( guiItems, 0, 90, 30, "block" );

			}

			//

			function setupGUIAnimations( character ) {

				addGuiHeader( "Animations", 100, 90, 30 );

				var generateCallback = function( animationName ) {

					return function () { character.setAnimation( animationName ); };

				}

				var i = 0, guiItems = [];
				var animations = character.meshBody.geometry.animations;

				for ( var a in animations ) {

					playbackConfig[ a ] = generateCallback( a );
					guiItems[ i ] = gui.add( playbackConfig, a, a );

					i ++;

				}

				setGuiElementStyle( guiItems, 100, 90, 30, "block" );

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				render();

				stats.update();

			}

			function render() {

				var delta = clock.getDelta();

				for ( var i = 0; i < morphs.length; i ++ ) {

					morph = morphs[ i ];

					morph.updateAnimation( 1000 * delta );

					morph.position.x += morph.speed * delta;

					if ( morph.position.x  > 4000 )  {

						morph.position.x = -4000 - Math.random() * 500;

					}

				}

				cameraControls.update( delta );
				character.update( delta );

				//if (  character.meshBody )
				//console.log( character.meshBody.length, character.meshBody.lastKeyframe,  character.meshBody.currentKeyframe, character.meshBody.morphTargetInfluences );

				//renderer.clear();
				//renderer.render( scene, camera );

				//renderer.render( sceneHUD, cameraOrtho );

				// render shadow map

				renderer.autoUpdateObjects = false;

				renderer.initWebGLObjects( scene );
				renderer.updateShadowMap( scene, camera );

				// render scene

				renderer.autoUpdateObjects = true;

				//renderer.render( scene, camera );
				//renderer.clearTarget( null, 1, 1, 1 );
				composer.render( 0.1 );


			}

		</script>

	</body>
</html>