Papervision3D : Introduction of 3D world in Flash

Without 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.
seting-document-class.gif
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(0x000000,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
final3d.gif
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(0x000000,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 ;)

Advertisements

5 thoughts on “Papervision3D : Introduction of 3D world in Flash

  1. Hello Saumya,

    My name is Danny, I’m from Colombia, and I’m currently studying “Design” at Los Andes University (http://uniandes.edu.co) I’m being thought how to program in Flash and we’ve been asked to make a game using Flash. I figured out I could make a 3dworld with a plane (the camera) flying over it and some random enemy planes flying there too, where I have to fire at them and well… shoot them down.
    The thing is I thought it was going to be easier but I’ve read all the documents there to read over 3D and Camera building, but its been much harder than expected….

    Can you please please help me to do it?

    thank you for your time,

    Danny Díaz Duque

  2. Can you give me some of your code.It seems you have imported one package into another or like that. Could not help you without knowing the exact code or what is going wrong.
    For me it seems, you are a first timer to flash.If it is so then go through the flash help to get to know the following points:
    1. Classpaths and how to define them?
    2. How to use packages?
    3. Basic Object Oriented Programming.

  3. I have used ur code but dont know why i got some error in
    wireMat = new WireframeMaterial(0×000000,1);
    myMatList.addMaterial(wireMat,”all”);
    when I did wireMat = new WireframeMaterial(“0×000000”,1,1);
    error gone but come up with few more . can u help me

  4. This is the first time I comment here and I should say that you share us genuine, and quality information for other bloggers! Great job.
    p.s. You have an awesome template . Where did you find it?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s