md2 in action

by Millieyan

HTML

<div id="info">
	MD2 Animation <br/><br/>
	Press J to jump
</div>
<script src="https://threejs.org/build/three.min.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
	</script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
	<!--script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/DDSLoader.js"></script-->
	<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/loaders/MTLLoader.js"></script>
	<script src="https://raw.githack.com/mrdoob/three.js/dev/examples/js/loaders/OBJLoader.js"></script>

CSS

body {
  overflow: hidden
}
	#info {
		position: absolute;
		top: 20px; width: 100%;
		
		padding: 5px;
		text-align: center;
		color: #ffff00
	}

JavaScript

var scene, renderer, camera, mesh;
var clock = new THREE.Clock();
var orbitcontrols;
var keyboard = new KeyboardState();

init();
render();

function init () 
{
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

	renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(new THREE.Color(0x888888, 1.0));
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMapEnabled = true;
	document.body.appendChild (renderer.domElement);

	// position and point the camera to the center of the scene
	camera.position.x = -50;
	camera.position.y = 40;
	camera.position.z = 160;
	camera.lookAt(new THREE.Vector3(0, 0, 0));

	orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);

	// add spotlight for the shadows
	var spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(-50, 70, 60);
	spotLight.intensity = 1;
	scene.add(spotLight);

	var gridXZ = new THREE.GridHelper(150, 10);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	scene.add(gridXZ);

THREE.ImageUtils.crossOrigin = '';
	var loader = new THREE.JSONLoader();
	loader.load('https://jyunming-chen.github.io/tutsplus/models/laalaa.js', function (geometry, mat) {
		geometry.computeMorphNormals();

		var mat = new THREE.MeshBasicMaterial(
				{
					map: THREE.ImageUtils.loadTexture("https://jyunming-chen.github.io/tutsplus/models/laalaa.png"),
					morphTargets: true, morphNormals: true
				});

		mesh = new THREE.MorphAnimMesh(geometry, mat);
		mesh.parseAnimations();

		mesh.playAnimation('run', 10);

		scene.add(mesh);
	});

	window.addEventListener ('resize', onWindowResize, false);	
}

function onWindowResize()
{
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize (window.innerWidth, window.innerHeight);
}

var angle=0;
var inJump = false, startJump = false;

function render() 
{
	var delta = clock.getDelta();  // in...