Integrating Papervision3D into the Adobe Flash Builder Sparks containers architecture.

July 7th, 2009 by Slav

It all started when I decided to try out the new Flex 4 Beta. The aim was to build Collada viewer that loads the dae files from the users’ filesystem / harddrive using new flash 10 FileRef API. What seemed like a pretty straightforward task turned into a Nightmare Lite after I realised I can’t just grab a new BasicView and dump it into a new sparks group container! The problem was, the group container didn’t support rawChildren.addChild(), as it didn’t contain rawChildren property.

After spending couple of hours trying and failing I came upon a working solution :

PV3D in Flex 4

Use UIComponent as a wrapper for a BaseView which is implemented via composition. UIComponent is compatible with Sparks containers and can be added via addElement(); Thankfully UIComponents allows adding BaseView via addChild.. If you need to access a camera, scene, light etc, just use public variables on your UIComponent class to expose them and link them to your baseview camera lights etc.

This simple example utilises camera and materials light color change, but you can expose and change anything you like of course..

It is implemented directly inside of mxml but of course you could still have a group with id (let’s say “scene”) and add the whole component BasicView3D programmatically.

e.g. :

scene.addElement(new BasicView3D);

Check out the sample and right click to view source script and download the entire project.

Posted in AS3, Flex 4, papervision

14 Responses

  1. Sean Moore

    Pure awesomeness!! Great work!!!

  2. Dave Gamez

    Very good work !!!

  3. Daily Tweet Roundup for 2009-07-08 | Z3bb Blog

    […] – #Papervision3D integrated into the new #Flex 4 "Spark" component model – (via @tomkrcha @ryanstewart) […]

  4. Twitter Weekly Updates for 2009-07-13 at .swfgeek

    […] – Papervision3D integrated into the new Flex 4 "Spark" component model – (via @tomkrcha) […]

  5. Mark Simon

    Pure awesomeness says it!
    Just one change for the production release of Flex 4: Change (the last element, 2 instances in the example code) xmlns:mx=”library:// to xmlns:mx=”library://

  6. xpf

    why appear the error:
    Can not be “” analysis for the component implementation.
    Can not be “” analysis for the component implementation.

  7. xpf

    why appear the error:
    Can not be “mx:UIComponent” analysis for the component implementation.

  8. RoYan

    You can use tag s:SpriteVisualElement to get the same result, too.And more easily.

  9. somebody

    Very nice Example!! But i can not run the orginal code… Thanks to “Mark Simon” and “RoYan”, good comments! Now it worked perfectly!

  10. somebody

    And change this Line here at BasicView3D.mxml, checkForResize:

    if (this.parent.width > 0 && !(this.parent.width == oldWidth || this.parent.height == oldHeight))

    Change the || to &&.

  11. andrea

    Thank you mate! You help me a lot!!! i was working with an actionscript class instead of an mx component and i was getting crazy! :)

  12. Manu

    Hi there, great tutorial -> got it to work brilliantly on Flex 4.6 in both a desktop and mobile application.

    Only had one problem: tried to add interactivity to the cone element, by making obj3d.interactive = true and setting the interactive boolean in the BasicView to true. I then added InteractiveScene3DEvent listener to the cond. The problem is that when I run this the program just closes/crashes unexpectedly. I would appreciate anybody’s help, as I can’t seem to figure out what’s happening, as no debug errors are coming up.


  13. android 4.3 jelly bean

    What’s up, its fastidious article about media print, we all know
    media is a great source of facts.

  14. ecommerce search engine optimization

    Good day! This is my first comment here so I just wanted to give a
    quick shout out and tell you I really enjoy reading your blog posts.
    Can you recommend any other blogs/websites/forums that deal with the same topics?
    Appreciate it!