sábado, 2 de enero de 2010

Getting Started with PV3D (Papervision 3D)

Part 2 is out!!

Getting Started with PV3D(Papervision 3D) Part 2

Papervision 3D is a great API for developing 3D escenarios in Flash, but it can get a little confusing at the beggining, so here is a guide for how to start your first PV3D app.

The first thing you have to do is download PV3D from their webpage:
http://blog.papervision3d.org/
and download the files, you can use subversion or just download the zip or swc containing the classes, both are ok so it is up to you =).

Once you have downloaded the file, be sure that you have the class path pointing to the files you need (If you dont know whats the class path, dont worry), or otherwise you will need to add those folders to all the swf you create.

Ok, then with all the files settled, lets start:

First we will create our class, lets call it "Hello3DWorld" (just following the tradition =),
package {
 public class Hello3DWorld {
  public function Hello3DWorld() {
  }
 }
}

But in this case we will do something different, instead of extending the sprite class, as we would normally do, we will extend the BasicView class from the papervision package, we would also have to import that class which is in:

import org.papervision3d.view.BasicView;

complete code:
package {
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  public function Hello3DWorld() {
  }
 }
}

This class has all we need to use in order to create our 3d scene, it already has a camera, a scene, a view port and a renderer, which you would have to create if you dont extend this class.

ok, we already have almost everything, but right now if you run the code, you wont see anything,
cause we haven't added anything, so lets add a simple object, for example a cube.

First import the Cube class:

import org.papervision3d.objects.primitives.Cube;

and then we create a private variable named "cube":
package {
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  public function Hello3DWorld() {
   cube = new Cube();
  }
 }
}

Then add it to the scene, and start rendering it to see whats happening:
package {
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  public function Hello3DWorld() {
   cube = new Cube();
   scene.addChild(cube);
   startRendering();
  }
 }
}

But in order to see the cube, we need to give some materials to it, which are holded on a materialList variable, so lets create both variables.

For the material, we will use a colorMaterial with black (0x000000).
package {
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  private var matList:MaterialsList;
  private var color:ColorMaterial;
  public function Hello3DWorld() {
   color=new ColorMaterial(0x000000);
   matList = new MaterialsList();
   matList.addMaterial(color, "all");
   cube=new Cube(matList);
   scene.addChild(cube);
   startRendering();
  }
 }
}

Ok, so lets run the app and see the results =).

So there's the cube, but that's just a static cube. Lets make something better with it:
package {
package {
 import flash.events.Event;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  private var matList:MaterialsList;
  private var color:ColorMaterial;
  public function Hello3DWorld() {
   color=new ColorMaterial(0x000000);
   matList = new MaterialsList();
   matList.addMaterial(color, "all");
   cube=new Cube(matList);
   scene.addChild(cube);
   startRendering();
  }

  override protected function onRenderTick(event:Event = null):void {
   cube.yaw(2);
   cube.roll(2);
   super.onRenderTick(event);
  }
 }
}


and this is the result:


But i will explain this better on the next post, so se you there!

Getting Started with PV3D(Papervision 3D) Part 2

Here you can download the source: Hello3DWorld.rar

5 comentarios:

  1. Hi,
    thank your for your tutorial!
    I get the following error when I debug this:
    "1067: Implizite Umwandlung eines Werts des Typs Cube in einen nicht verwandten Typ org.papervision3d.objects:DisplayObject3D."
    Do you've got any idea what's wrong?
    Are there any changes made in the papervision function scene.addchild which cause the conversion error?
    best regards
    Stephan

    ResponderBorrar
  2. Hi,

    On line 2 of the final code there is an unessecary "Package".

    Andy

    ResponderBorrar
  3. What the heck is scene? How do I integrate this class into a Flash FLA file?

    ResponderBorrar
  4. I have the same "noob"-question like NoJuice:(

    ResponderBorrar
  5. Hi solares,
    The scene is basically where all your 3d objects exist, like the "stage" in 2d flash

    ResponderBorrar