Demos : Parsing MD2
Code:
<html>
<head>
<script type="text/javascript" src="//lib.ivank.net/ivank.js"></script>
<script type="text/javascript" src="//k3d.ivank.net/K3D.js"></script>
<script type="text/javascript">
function Start()
{
K3D.load("lion.md2", loaded); // loading
}
function loaded(data)
{
var m = K3D.parse.fromMD2(data); // done !
console.log(m);
var stage = new Stage("c");
var s = new Sprite();
stage.addChild(s);
s.x = stage.stageWidth/2;
s.y = stage.stageHeight/2 + 300;
s.z = 200;
s.scaleX = s.scaleY = s.scaleZ = 14;
var bd = new BitmapData("lion.jpg");
var frame = 0;
var uvrts = []; // array for "unwrapped" vertices for each frame
for(var i=0; i<m.frames.length; i++)
{
var f = m.frames[i];
uvrts[i] = K3D.edit.unwrap(m.i_verts, f.verts, 3);
// in my model, Y and Z are swapped
K3D.edit.transform(uvrts[i], K3D.mat.rotateDeg(-90,0,0));
}
var uvt = K3D.edit.unwrap(m.i_uvt, m.c_uvt, 2);
var ind = [];
for(var i=0; i<m.i_verts.length; i++) ind.push(i);
stage.addEventListener(Event.ENTER_FRAME,
function(e) {
frame += 0.3;
// figuring out two frames and interpolating between them
var f1 = Math.floor(frame)%16, f2 = (f1+1)%16;
var vertices = [];
K3D.edit.interpolate(uvrts[f1], uvrts[f2], vertices, frame-Math.floor(frame));
s.graphics.clear();
s.graphics.beginBitmapFill(bd);
s.graphics.drawTriangles3D(vertices, ind, uvt);
s.rotationY += 0.01*(stage.mouseX - stage.stageWidth/2);
} );
}
</script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>