Simple Papervision3D Tutorial

The following example is the source and some comments for our first papervision3D project. It demonstrates how to create a simple cube, instantiate the papervision3D objects and classes, and how to use the mouse to control camera movement. Hope this helps!
One of the keys to setting up a flex and papervision project, is to first make sure you import all of the packages you will be using. For this project, these are the required imports:

import flash.display.Bitmap;
import  flash.display.Sprite;
import  org.papervision3d.cameras.FreeCamera3D;
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;
import  org.papervision3d.core.proto.DisplayObjectContainer3D;
import  org.papervision3d.objects.Cube;
import  org.papervision3d.materials.ColorMaterial;

After importing the new papervision classes, and flash events, we need to define some variables, and also embed our png’s for the textures we are going to use, like this:

[Embed(source="../assets/cmmlogo.png")] private var  CubeTexture:Class;
[Embed(source="../assets/cmmorange.png")] private var  crazyTexture:Class;
private var myMaterials:Object;
private var  container:Sprite;
private var scene:Scene3D;
private var  camera:FreeCamera3D;
private var rootNode:DisplayObject3D;

The top 2 lines here embed the png’s for flash, and then we just define some variables.The next step, is in your public function, make a call to a new function that will setup your stage, and basically initialize the papervision engine. I do that like this:

public function  P3DTutorial()
addEventListener(Event.ENTER_FRAME,  loop3D);

The other thing that was added here, is we created an enterframe event for the mouse cursor to update the cube/spin it. I’ll explain that function in a bit. Next, we create the init3D function like so:

private function init3D():void {
container =  new Sprite();
addChild( container );
container.x =  200;
container.y = 200;
scene = new Scene3D( container  );
camera = new FreeCamera3D();
camera.z = -600;

rootNode = scene.addChild( new DisplayObject3D(“rootNode”) );
var cubeTexture:Bitmap = new CubeTexture() as Bitmap;
rootNode.addChild( new Cube( new BitmapMaterial( cubeTexture.bitmapData ), 200, 200, 200, 1, 1, 1 ), “myCube01” );

Ok.. the first half of that chunk, creates the “3D” container. Then, we position the container relative to the stage, and setup a standard free-flowing 3D camera. (Tip: You can substitute FreeCamera3D, for Camera3D if you want a stationary camera instead of a moving one)

The second half of that snippet creates our first 3D object. With the papervision engine, that’s all there is to it. What happens here, is since we defined our texture above as a class, we can apply that as a bitmap material now to the newly instantiated object. You can do it at the same time the object is created by adding the new BitmapMaterial line right in with the addChild.

Lastly, all thats left to do, is setup the enterframe to rotate things/capture mouse movement. All I did was create a simple function like this one:

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

This function simply rotates the cube/spins it according to mouse placement.

And that’s it for this simple tutorial. Not much to it, It goes over the basics of importing, setting up a 3D cube, and instantiating the papervision 3d engine.


About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.