open in new window

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>