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