La Miscela

Yesterday a friend shown me a video where a human interacted with a 3D object built in papervision3D using a camera. I stayed curious with this, and started with my own experiment.

The first step, is load a animated model into papervision, than is what this post will cover for now.

After built your animated model, load it, into papervision is quite easy, the most hard work, is of the our 3D brothers, but if you don't have 3D habilities( like me) you can download a MD2 Quake model here, to perform the steps to follow.

Open a new as3 flash file in Flash authoring tool and give it Fooze3D name in document class (ignore any error message). For now, Flash no will be more necessary, just to publish your swf, then keep it opened. Before we beginning the codification, we go convert the .pcx files for .jpg files (only if your download your model from Quake 2 models website). Open any .pcx file in your Photoshop and just save it at .jpg format.

Now we can start the play, open your AS3 code editor (mine is Flex 3), and create a new class named Fooze3D.as

Inside this class, put the code below. (Attention to comments)

/**
 *
 * @author Junio Vitorino
 * description: Working with animated models with and texture into papervision 3D
 * date: 01/12/2009 10:29
 *
 */
 
package  {
 
	// Importing Flash Event Class
	import flash.events.Event;
 
	// Importing Papervision Class
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.parsers.MD2;
	import org.papervision3d.view.BasicView;
 
	public class Fooze3D extends BasicView {
 
		public function Fooze3D() {
 
			// Calling super constructor from BasicView and set width, height and scaleToStage parameters
			super(400, 400, true);
 
			initPapervisionEnv();
			builtModel();
		}
 
		// Here we initialize all properties to your papervision environment
		private function initPapervisionEnv():void {
 
			// Add a listener to render the scene using ENTER_FRAME
			addEventListener(Event.ENTER_FRAME, render);
		}
 
		// This method will begin to built your animated model inside papervision environment
		private function builtModel():void {
 
			// This variable load the skin/texture to your model from a external Bitmap
			var foozeSkin:BitmapFileMaterial = new BitmapFileMaterial('fooze/RUNAR.jpg', true);
 
			// Create a new instance of MD2 type. Is with her than you will can manipulate your model in runtime
			var fooze:MD2 = new MD2();
 
			// Setting model name, with this you can use methods as, getChildByName in scene object.
			fooze.name = 'fooze';
 
			/* Here we using load method to set the path to mine MD2 file. The others parameters are, the material to cover the model,
			   the framerate than your model should be run (animation) and the last is the scale of this model (i didn't know why, but the
			   models when loaded are very small) */
			fooze.load('fooze/tris.md2', foozeSkin, 10, 10);
 
			// Setup X an Z rotation, to start in desired position
			fooze.rotationZ = fooze.rotationY = 90;
 
			// Adding the model to the inherited scene variable.
			scene.addChild(fooze);
		}
 
		private function render(event:Event):void {
			/* Inside render method, we calling another inherited variable, called renderer
			 * this variable is a BasicRenderEgine,is who render the objects.
			 * renderScene method require 3 parameters
			 * your scene, your camera, and your viewport.
			 * All these variables, are inherited from BasicView class */
			renderer.renderScene(scene, camera, viewport);
		}
 
	}
 
}

Well, if all is okay, you already can publish your swf and see your animated model performing yours movements inside your flash.
This was a quickly explanation, i always recommend you to give a look in papervision documentation (unofficial), to uncover more about the methods used here.

Download the source files here.