Papervision head-first introduction

Papervision   /  

Let's get started on some PV3D quickly. I will try to explain what the hell is going on while I give some code snippets.

The libraries you will need:
-Papervision (d'uh). the subversion link is there, right under the downloads category on the right. You will also need a subversion client, you can get the Tortoise SVN client here.
-knowledge of how to use external libraries in Flash
-knowledge of how to setup a document class

Let's make a document class for the whole thing first, I am calling it Main.as.

  1. package
  2. {
  3. import flash.display.Sprite;
  5. public class Main extends Sprite
  6. {
  7. public function Main()
  8. {
  10. }//end of constructor
  11. }//end of class
  12. }//end of package

We will start with setting up a scene first. To make a visible scene, we need a viewport, a camera, a scene and a renderer to render those. This is simple and painless enough. Let's declare some objects.

  1. private var scene:Scene3D;
  2. private var viewport:Viewport3D;
  3. private var camera:Camera3D;
  4. private var renderer:BasicRenderEngine;

The above code goes before the constructor, under the class definiton. We will create those objects in our constructor function. You can also make an init() function so your constructor is cleaner, I won't.

  1. scene = new Scene3D();
  2. viewport = new Viewport3D();
  3. camera = new Camera3D();
  4. renderer = new BasicRenderEngine();

You will get a ton of errors if you compile now, unless you have imported the packages required. Flash Develop does that automagically for me, so I will just give you the required ones in the end, before we compile.

Now, we need to add the viewport object to the stage and scale it to be as big/small as the stage.

  1. addChild(viewport);
  2. viewport.autoScaleToStage = true;

Allright, now, whatever geometry we add, we will add it to our scene object. We can now start adding some 3D objects to our scene. To do that, we need to create a material ro assign to our geometry first. This part looks rather complicated but after you do it a few times, it will make sense so do not worry if you do not understand why we are doing some of the things we do just yet.

  1. var colorMatList:MaterialsList = new MaterialsList();
  2. var colorMat:ColorMaterial = new ColorMaterial(0x4444ff, 1);
  3. colorMatList.addMaterial(colorMat,"all");

What we did in the first line is, create a new MaterialsList(colorMatList) object which will hold the new material (colorMat) and will be used when we create an instance of a 3D object.
In the second line, we define a new ColorMaterial called colorMat. ColorMaterial's constructor takes 2 parameters, color and alpha. I picked a tone of blue and an alpha of 1, which makes the object non-transparent.
Third line is pretty straight-forward, we add the ColorMaterial instance to our MaterialsList instance. This method of MaterialsList takes in 2 parameters. First on is a MaterialObject3D, which has all of the material types under it (MovieMaterial, ColorMaterial and so on). The second parameter is a string, I decided to use "all" since I want my cube to have the same color/material on all it's faces. You can assign different colors to each face with other strings such as "front","back","bottom","left","right","up".

Now we can create an instance of a cube (gasp) and add it to our scene.

  1. var cube:Cube = new Cube(colorMatList);
  2. scene.addChild(cube);

Above, we created a variable called "cube" with a type of "Cube" and passed in our colorMatList which holds the colorMat and the instructon to assign it on all the faces in it. scene.addChild adds the object(cube) to the scene so now it can be rendered.

Now we can compile our program, if you have not figured out what packages to import yet, here are the ones you need:

  1. import flash.display.Sprite;
  2. import flash.media.Camera;
  3. import org.papervision3d.cameras.Camera3D;
  4. import org.papervision3d.materials.ColorMaterial;
  5. import org.papervision3d.materials.utils.MaterialsList;
  6. import org.papervision3d.objects.primitives.Cube;
  7. import org.papervision3d.render.BasicRenderEngine;
  8. import org.papervision3d.scenes.Scene3D;
  9. import org.papervision3d.view.Viewport3D;

If you compile now, you will get a big blue square in the center of your stage. If all went well, you just succesfully made your first cube. "Wait, what cube? That's just a square!" Yeah, what's the point of putting a cube out there if all we see will be a square? Let's remedy that by rotating it a bit.

After adding the cube, let's give it an initial rotation. We need to replace

  1. scene.addChild(cube);


  1. scene.addChild(cube);
  2. cube.rotationX = 20;
  3. cube.rotationY = 20;
  4. cube.rotationZ = 20;

This will give our cube an initial rotation of 20 on each axis. Now it looks more like a cube, but still not there yet, there's no shading or any indication of form and shape. Next part will be all about that, I hope this part was a helpful start 🙂


 likes / 0 Comments
Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

× 7 = twenty one


> <
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec