PV3D: setting up Papervision3D in Flex 3

Friday, 7 November 2008 00:56 by shawny

Setting up your Flex project to use Papervision 3D is actually quite simple.  There is only one minor difference between using PV3D in Flash and using it in Flex.  That difference comes from how you add your papervision objects to the stage.  In Flash, you can add papervision objects directly to the stage, but this doesn't work in Flex.  Flex requires objects to be UIComponents when added directly to the stage.  In other words, you have to have add an object to the stage in flex that descends from a UIComponent.  Papervision objects do not extend this class directly.

One option is to create a custom class that extends the UIComponent and then add your papervision objects to this class.  The simplier option, as demonstrated in this North Kentucky University YouTube video, which is incredibly simple, is to simply add a standard Flex Canvas to the stage and then add the papervision objects to that canvas.  Since canvas is a UIComponent, the problem is solved.

The following demonstrates how this works using a simple sphere primitive and without having tocreate any custom classes:

ACTIONSCRIPT:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     applicationComplete="initApp()">
    <mx:Script>
        <![CDATA[
            import org.papervision3d.objects.primitives.Sphere;
            import org.papervision3d.typography.Font3D;
            import org.papervision3d.materials.special.Letter3DMaterial;
            import org.papervision3d.typography.Text3D;
            import org.papervision3d.view.Viewport3D;
            import mx.collections.ArrayCollection;
            import org.papervision3d.render.BasicRenderEngine;
            import org.papervision3d.scenes.Scene3D;
            import org.papervision3d.cameras.Camera3D;
           
           
            private var camera:Camera3D;
            private var scene:Scene3D;
            private var render:BasicRenderEngine;           
            private var view:Viewport3D;           
            private var primitive:Sphere;
           
            private var xmlList:XML =
            <root>
                <word name="Red" times="5"/>
                <word name="Yellow" times="1"/>
                <word name="Green" times="10"/>
                <word name="Blue" times="10"/>
                <word name="Purple" times="1"/>               
            </root>
           
           
            private function initApp():void
            {
                view = new Viewport3D(this.width, this.height, false, true);
                // The next line is the key to this easy use of the canvas.  You can not add the papervision directly to the canvas without generating an error.
                // However, adding it to the rawChildren works beautifully.
                pv3dStage.rawChildren.addChild(view);               
                scene = new Scene3D();
                camera = new Camera3D();
                render = new BasicRenderEngine();               
                primitive = new Sphere(null, 100, 20, 20);
                scene.addChild(primitive);
                addEventListener(Event.ENTER_FRAME, onEnterFrame);  
            }
            private function onEnterFrame(event:Event):void
            {               
                render.renderScene(scene, camera, view);
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="pv3dStage" left="0" right="0" top="0" bottom="0">
    </mx:Canvas>
</mx:Application>

There is another way that is rather easy and doesn't require you to add objects to the rawChildren of the canvas control and that is to create a UIComponent and then you can just add the papervision objects directly to the object using addChild.

    <mx:UIComponent id="pv3dStage" left="0" right="0" top="0" bottom="0">

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:   , ,
Categories:   3D | Flex, Flash, Actionscript
Actions:   E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading