Set Up Papervision 2.0 for Flex 3 in 3 Minutes Flat


Anybody who knows me knows that I’m all about quick and dirty, get it done, up and running and worry about it later. I don’t like to waste time and I’m sure you don’t either. If you want to set up Papervision Great White for Flex fast, you’ve come to the right place. You got your timer ready? Here we go:

  1. Create a new Flex project, called it FlexPapervision Base. Time elapsed: 20 seconds.
  2. Drop the Papervision library into your libs folder. You can download the Papervision library at the Google Code repository, but that’s too messy and going to take too much time. I’ve taken the liberty of downloading it and compiling it into an easy to consume swc right here. Time elapsed: 15 seconds. [If you are using Eclipse, create a libs folder in your project. You'll also need to add the libs folder to your build path - Go to Project -> Properties -> Flex Build Path -> Library Path, and add the libs folder]
  3. Assuming you have some Flex basics and Papervision basics, here’s the essential code:
            // these 3 lines are key to putting Papervision in Flex
            var uicomp:UIComponent = new UIComponent();
            canvasPv3D.addChild( uicomp );
            uicomp.addChild( viewport );

    canvasPv3D is just a regular Flex Canvas. You add a Papervision viewport to a UIComponent which can then be added to a Flex Canvas. That’s it. Here’s the complete FlexPapervisionBase.mxml file

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="" layout="absolute" creationComplete="onInit(event);">
    import mx.core.UIComponent;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.objects.primitives.Plane;

    private var renderer:BasicRenderEngine = new BasicRenderEngine();
    private var scene:Scene3D = new Scene3D();
    private var camera:Camera3D = new Camera3D;
    private var viewport:Viewport3D;

    private var plane:Plane;
    private var angle:int = 0;
    protected function onInit( event:Event ) : void {

            viewport = new Viewport3D(canvasPv3D.width, canvasPv3D.height, true, true);
            // these 3 lines are key to putting Papervision in Flex
            var uicomp:UIComponent = new UIComponent();
            canvasPv3D.addChild( uicomp );
            uicomp.addChild( viewport );
            camera.z = -500;
            var mat:ColorMaterial = new ColorMaterial();
            mat.doubleSided = true;
            plane = new Plane(mat, 200, 200, 4, 4);
            // update the scene every frame

    private function onEnterFrame( event : Event ):void {
            angle = angle+=1%360;
            plane.rotationY = angle;
            // render the scene on every frame
            <mx:Canvas id="canvasPv3D" width="100%" height="100%"/>

    All this project does is put a 3D plane in the scene and rotates it 1 degree every frame.

    Time to read this bullet point and copy paste this piece of code into your project: 40 seconds.

If you’re feeling super lazy and can’t even be bothered to create a project of your own, here’s the project:

This is what the end product looks like:

Your welcome.

Popularity: 17% [?]

August 15 2008 Weekly Links

No Comments

  1. Roxik Sharikura – Japanese Flash 3D Library
  2. FaceYourManga – Create your own manga avatar
  3. Rocky Montage Papervision video
  4. Article on Bernie Mac – working class millionaire
  5. Touching photo journal – Days with my father
  6. Nice mockup tool Balsamiq
  7. 7 Questions VCs Will Ask You, What They Really Mean, and How You Can Answer Them – Mashable
  8. Star Wars Stormtrooper Figures Flickr set

Popularity: 2% [?]

Newer Entries