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="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit(event);">
            <mx:Script>
                    <![CDATA[
    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);
            scene.addChild(plane);
           
            // update the scene every frame
            canvasPv3D.addEventListener(Event.ENTER_FRAME,onEnterFrame);
    }

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

    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: FlexPapervisionBase.zip

This is what the end product looks like:

Your welcome.

Popularity: 33% [?]

Related posts:

  1. Notes from Chicago Flex Users Group meeting August 2008
  2. Flex E4X XML Filtering
  3. Flex AS3 Swf to Swf Communication via LocalConnection
  4. Issues With Embedding Flash SWF into Flex
  5. How To Count Cards In 5 Minutes