Sealyu

creating a 3D model in Flex using Blender and Papervision3D - a beginning tutorial

This tutorial is for beginners using papervision3d with flex. I’m not an expert, but I’ve been experimenting with it, and here’s a way to get started with collada files in Flex. Here we will be creating a 3D model from the very beginning.

First, a few notes:
It seems that papervision3D/Flex are finicky with the collada files, so they must be exported in a very specifc way in order to import properly. In this example I’m using Blender. With other apps (like sketchup) there will be a different method to create and acceptable collada file, and some will need to be edited manually in order to work (I’ll do a tutorial on that later)

I haven’t gone into depth with textures/materials here, but I put in a real basic bitmap texture that works for this example. I’ll do more on textures later ….

---

To create the model in flex, we need a few things:
1) the papervision3D class package : you can find it here: http://blog.papervision3d.org/
2) a properly prepared .collada file - here we use Blender - found here: http://www.blender.org
3) an actionscript file to load and control the collada1) First make sure that your papervision class folders are in the appropriate path. For now you can just drag the org folder in to your flex project folder.2) open Blender and delete the default cube. (press x)
3)click add->mesh->torus4) in the editing window, click new material, then new UV texture
5)click the textures button, and select texture type->image
6) load a bitmap image to use as your texture
7) goto file->export->collda1.4in the export window, the following items are selected: (the rest are deselected)
triangles
only export selection
disable physics
use relative paths

export the file and rename it torus.dae

open the dae file in a text editor and scroll until you see a line similar to this:
<instance_material symbol=”Material_001″ target=”#Material_001″>
this is the name of your material you need to reference in your as file, here it is “Material_001″ if yours is different, write it down.

9) create an image called grid.png (or use the downloaded one)

10)make sure the .dae file and the image file are in your flex project folder (or write the full path to where they are in the as file.)

The flex Project:
open a new actionscript project, name it ColladaBlender, and add the following code:

If you are unfamiliar with what’s going on in the code read it carefully - it’s not commented, but if you are familiar at all with Acstionscript 3.0 classes, you should see what’s going on here.

package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.objects.Collada;

[SWF(backgroundColor=”#000000″, frameRate=”40″)]
public class BlenderCollada extends Sprite
{
/* this reference to an image file overrides whatever image file is referenced in the collada file as long as the material name is the same*/
[Embed(source=”./grid.png”)] private var Material_001:Class;
[Embed(source=”./torus.dae”, mimeType=”application/octet-stream”)] private var MyObject:Class;
private var myMaterials:Object;
private var container:Sprite;
private var scene:Scene3D;
private var camera:Camera3D;
private var rootNode:DisplayObject3D;

public function BlenderCollada()
{
var Material_001:Bitmap = new Material_001() as Bitmap;

myMaterials = {
/*
open your collada (.dae) file and look at where the material is defined:
<instance_material symbol=”Your Material Name” target=”#Your Material Name>
replace all references to “Material_001″ in this actionscript file with your material name
*/
Material_001: new BitmapMaterial( Material_001.bitmapData )
};

init3D();

addEventListener(Event.ENTER_FRAME, loop3D);
}

private function init3D():void {

container = new Sprite();
addChild( container );

container.x = 200;
container.y = 200;

scene = new Scene3D( container );

camera = new Camera3D();
camera.x = 3000;
camera.z = -50;
camera.zoom = 150;
camera.focus = 10;

rootNode = scene.addChild( new DisplayObject3D(”rootNode”) );
rootNode.addChildren( new Collada( XML( new MyObject() ), new MaterialsList( myMaterials ) ) );

}

private function loop3D( event:Event ):void {
var screen: DisplayObject3D = scene.getChildByName(”rootNode”);
var rotationY: Number = -(mouseX / stage.stageWidth * 360);
var rotationX: Number = -(mouseY / stage.stageHeight * 360);
screen.rotationY += (rotationY - screen.rotationY) / 12;
screen.rotationX += (rotationX - screen.rotationX) / 12;
scene.renderCamera(camera);
}
}
}

Test the application.

I will be posting more tutorials and examples as I continue to work with Papervision3DGood Luck!

example: http://www.tetraktysdesign.com/experiments/BlenderCollada/bin/BlenderCollada.html

download a zip of the source files here