Committed wrong file.

ca0d5586 · alteredq · e19f442f · e19f442f · ca0d5586
Showing with 327 addition and 1095 deletion

examples/webgl_morphtargets_md2_complex.html examples/webgl_morphtargets_md2_complex.html +0 -1095

examples/webgl_morphtargets_md2_control.html examples/webgl_morphtargets_md2_control.html +327 -0

未找到文件。
--- a/examples/webgl_morphtargets_md2_complex.html
+++ b/examples/webgl_morphtargets_md2_complex.html
--- a/examples/webgl_morphtargets_md2_control.html
+++ b/examples/webgl_morphtargets_md2_control.html
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - morphtargets - MD2 controls</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: #000;
+			font-family:Monospace;
+			font-size:13px;
+			text-align:center;
+			font-weight: bold;
+
+			background-color: #fff;
+			margin: 0px;
+			overflow: hidden;
+		    }
+
+		    #info {
+			color:#000;
+			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 -
+			Ogro by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=556">Magarnigal</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> -
+			use arrows to control characters, mouse for camera
+		</div>
+
+		<script src="../build/Three.js"></script>
+
+		<script src='js/MD2CharacterComplex.js'></script>
+
+		<script src='js/Detector.js'></script>
+		<script src='js/Stats.js'></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+
+			var container, camera, scene, renderer;
+
+			var characters = [];
+			var nCharacters = 0;
+
+			var cameraControls;
+
+			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, 4000 );
+
+				// CAMERA
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
+				camera.position.set( 0, 150, 1300 );
+				scene.add( camera );
+
+				// LIGHTS
+
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
+
+				var light = new THREE.DirectionalLight( 0xffffff, 2.25 );
+				light.position.set( 200, 450, 500 );
+
+				light.castShadow = true;
+				light.shadowMapWidth = 1024;
+				light.shadowMapHeight = 1024;
+				light.shadowMapDarkness = 0.95;
+				//light.shadowCameraVisible = true;
+
+				light.shadowCascade = true;
+				light.shadowCascadeCount = 3;
+				light.shadowCascadeNearZ = [ -1.000, 0.995, 0.998 ];
+				light.shadowCascadeFarZ  = [  0.995, 0.998, 1.000 ];
+				light.shadowCascadeWidth = [ 1024, 1024, 1024 ];
+				light.shadowCascadeHeight = [ 1024, 1024, 1024 ];
+
+				scene.add( light );
+
+
+				//  GROUND
+
+				var gt = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" );
+				var gg = new THREE.PlaneGeometry( 16000, 16000 );
+				var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt, perPixel: true } );
+
+				var ground = new THREE.Mesh( gg, gm );
+				ground.material.map.repeat.set( 64, 64 );
+				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
+				ground.rotation.x = - Math.PI/2;
+				ground.receiveShadow = true;
+
+				scene.add( ground );
+
+				// RENDERER
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setClearColor( scene.fog.color, 1 );
+
+				container.appendChild( renderer.domElement );
+
+				//
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+				renderer.shadowMapEnabled = true;
+				//renderer.shadowMapCullFrontFaces = false;
+
+				renderer.shadowMapCascade = true;
+				//renderer.shadowMapDebug = true;
+
+				// 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 );
+
+				// CONTROLS
+
+				cameraControls = new THREE.TrackballControls( camera, renderer.domElement );
+				cameraControls.target.set( 0, 50, 0 );
+
+
+				// CHARACTER
+
+				var configOgro = {
+
+					baseUrl: "models/animated/ogro/",
+
+					body: "ogro-light.js",
+					skins: [ "grok.jpg", "ogrobase.png", "arboshak.png", "ctf_r.png", "ctf_b.png", "darkam.png", "freedom.png",
+							 "gib.png", "gordogh.png", "igdosh.png", "khorne.png", "nabogro.png",
+							 "sharokh.png" ],
+					weapons:  [ [ "weapon-light.js", "weapon.jpg" ] ],
+					animations: {
+						move: "run",
+						idle: "stand",
+						jump: "jump",
+						attack: "attack",
+						crouchMove: "cwalk",
+						crouchIdle: "cstand",
+						crouchAttach: "crattack"
+					},
+
+					walkSpeed: 350,
+					crouchSpeed: 175
+
+				};
+
+				function generateCallback( character, i ) {
+
+					return function() {
+
+						character.setWeapon( 0 );
+						character.setSkin( i );
+
+						character.root.position.x = ( i - nCharacters/2 ) * 150;
+
+					};
+
+				};
+
+				nCharacters = configOgro.skins.length;
+
+				for ( var i = 0; i < nCharacters; i ++ ) {
+
+					var character = new THREE.MD2CharacterComplex();
+					character.scale = 3;
+					character.controls = controls;
+
+					character.onLoadComplete = generateCallback( character, i );
+
+					character.loadParts( configOgro );
+
+					scene.add( character.root );
+
+					characters[ i ] = character;
+
+				}
+
+				var gyro = new THREE.Gyroscope();
+				gyro.add( camera );
+				characters[ Math.floor( nCharacters/2 ) ].root.add( gyro );
+
+			}
+
+			// EVENT HANDLERS
+
+			function onWindowResize( event ) {
+
+				SCREEN_WIDTH = window.innerWidth;
+				SCREEN_HEIGHT = window.innerHeight;
+
+				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;
+
+				}
+
+			};
+
+			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 animate() {
+
+				requestAnimationFrame( animate );
+				render();
+
+				stats.update();
+
+			}
+
+			function render() {
+
+				var delta = clock.getDelta();
+
+				cameraControls.update( delta );
+
+				for ( var i = 0; i < nCharacters; i ++ ) {
+
+					characters[ i ].update( delta );
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>