Papervision3D : Introduction of 3D world in Flash
August 30, 2007Without going in detail about how to download and configure the classpath to use Papervision3D ( if anybody needs the informatin, we can discuss it in the replies 
),I will jump directly into code to make a cube, add a material to it and view the object through a camera.To keep things simple, We will be using Flash CS3 IDE, though it can be done in Flex Builder IDE or even free Flex SDK.
1. Create a new Flash file, and name it “intro.fla”.
2. Apply a Document class for “intro.fla” and name it as “Main”. A class file with name “Main.as” must be present in the same folder where “intro.fla” is present.
Lets write the class now in the “Main.as” file. As usual we will start it with a package declaration as below.
package {
public class Main extends Sprite{
}
}
Now, we will add some import statements for we are going to use those classes in our code as below.
import flash.display.Sprite;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.Cube;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
A new method call is added inside the constructor to make things organised.The updated “Main” class will look as below
package {
import flash.display.Sprite;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.Cube;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
public class Main extends Sprite{
public function Main():void{
init3D();
}
private function init3D():void{
}
}
Now its time to define some properties of the class.We need a container to contain all of our objects.To create the 3D objects we must need a “Scene”.Inside scene we need a “container” for our 3D objects.We are going to make a cube, so we need a “cube” property type also.Till now we need below properties
private var container:Sprite;
private var myScene:Scene3D;
private var rootNode:DisplayObject3D;
private var myCube:Cube;
But without applying material, we can not see a 3D object.So we need Material type also.For this example we will use “Wireframe” material.To apply material we must have a “MaterialsList”, so the new properties are
private var myMatList:MaterialsList;
private var wireMat:WireframeMaterial;
Well, everything is set, finally to look at the 3D scene, we must need a Camera.
private var myCam:Camera3D;
As all the properties are set, I am going to write down the full class file below, then we will discuss about the inside code.
package {
import flash.display.Sprite;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.Cube;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
public class Main extends Sprite{
private var container:Sprite;
private var myScene:Scene3D;
private var rootNode:DisplayObject3D;
private var myCube:Cube;
private var myMatList:MaterialsList;
private var wireMat:WireframeMaterial;
private var myCam:Camera3D;
public function Main():void{
init3D();
}
private function init3D():void{
container=new Sprite();
addChild(container);
container.x=300;
container.y=300;
myScene=new Scene3D(container);
rootNode=new DisplayObject3D(”rootNode”);
myScene.addChild(rootNode);
myMatList=new MaterialsList();
wireMat=new WireframeMaterial(0×000000,1);
myMatList.addMaterial(wireMat,”all”);
myCube=new Cube(myMatList,400,400,400,1,1,1);
rootNode.addChild(myCube);
myCam=new Camera3D();
myCam.x=800;
myCam.y=250;
myCam.z=-400;
//myCam.zoom=10;
//myCam.focus=100;
myScene.renderCamera(myCam);
}
}
}
Well, at this point if you compile and publish the file, you should be able to see a cube with wireframe material as below
Lets see,what have we done.Firstly “container” is created which is a “Sprite”.This is added to stage and positioned at (300,300).Positioning is required because of the way flash uses its co-ordinate system.We know that flash co-ordinate starts at the left hand top cornore of the stage.If we do not move “container” to the positive direction, then we might not see the created objects as they will go beyound the stage.
Next, a “Scene3D” object created inside the “container”.This object will have all the 3D objects we will create.But to create a 3D object we will need another object of type “DisplayObject3D”, which is actually the container of all the 3D objects and the “Scene3D” is the container of all the “DisplayObject3D” objects.The hyrarchy is as below
Sprite>>>Scene3D>>>DisplayObject3D>>>3D objects
Well, now we will create the 3D object “cube”.But for any 3D objects to be created a material must be created to apply to the object.So first we will create the material and then proceed to create the 3D object with the material.We are going to use “WireframeMaterial” and this material must be added to a “MaterialsList” object type.This is required for a 3D object a material is applied as a “MaterialsList” object.Actually there is more to it, but for simplycity lets assume that we must create a “MaterialsList” and add a matrial to it, so that while creating a 3D object we will apply “MaterialsList”.The material creation is done as
myMatList=new MaterialsList();
wireMat=new WireframeMaterial(0×000000,1);
myMatList.addMaterial(wireMat,”all”);
Next, we will create the 3D object “Cube” as below
myCube=new Cube(myMatList,400,400,400,1,1,1);
rootNode.addChild(myCube);
Thats all for the creation of a 3D object.Hold on a minute, but how to see it.In a 3D environment, one needs a camera to look at objects, even we have our “eyes” which are nothing but cameras to view the world ( Which I think is a 3D enviroment, do not you think so ? ).So finally we must add a camera to view the scene as below
myCam=new Camera3D();
myCam.x=800;
myCam.y=250;
myCam.z=-400;
Again, we have positioned the camera, so as to it will look at the scene not any where else, you can play arround with the camera position and see for yourself how it affects the view.
The last step is to tell flash that everythign is set, now please render the view.This is done by telling to render a particular camera view.There may be more than one cameras in your environment, but you are intersted to view it from a specific camera.So you have to tell, which camera to be rendered.In our case we will do it as
myScene.renderCamera(myCam);
Try experimenting different values for the positioning of “container”, “camera” etc and see the result.This shows a very basic Object creation with a very standard material type.This basically takes you to a quick tour of the PV3D engine.Hopefully this makes some sence and may encourage you to do a lot of 3D Flashing
