MarcPelland.com
Welcome at » Guide to Getting Started in Papervision 3D
«
»

Guide to Getting Started in Papervision 3D

Building your First Papervision Application

What goes into a Papervision Scene?

At first it can be a little bit overwhelming when looking at the sheer number of classes that come with Papervision. But fear not, these are of no concern to you (yet).

Think of a Papervision world as a movie set, there are actors, props, cameras, costumes, and a ton of other things. You as a director just have to look/ask around to see who and what you need for this particular scene. There are always the basic necessities though: a camera and a stage.

Fortunately, the developers of Papervision thought of that for you and set up some basic classes that you can use to get started with all the necessities in them already; the most common of them being the BasicView.

Setting up the Basics

Let’s start off by taking advantage of the BasicView class by extending it, because BasicView extends Sprite we can make it our document class in Flash.

We will create a main class for our application and call it HelloPapervision.as and enter the following:

package {
  1.  import org.papervision3d.view.BasicView;
  2.  public class HelloPapervision extends BasicView {
  3.   public function HelloPapervision() {
  4.    trace("hello papervision");
  5.   }
  6.  }
  7. }

That is all well and good, but it didn’t do anything other than set up a scene and trace a couple things to the output window. So now we will work on adding some content to the scene.

Working with Primitives

The first thing that we need to do is figure out what we want to add, here I will show you how to add some basic shapes (primitives). You can take a look at the documentation for the included primitives here: http://www.papervision3d.org/docs/as3/org/papervision3d/objects/package-detail.html

Adding primitives is simple, it is just like creating an instance of anything else on the stage. You simply import the correct class, create an instance and add it to the scene.

package {
  1.  import org.papervision3d.objects.primitives.PaperPlane;
  2.  import org.papervision3d.objects.primitives.Sphere;
  3.  import org.papervision3d.view.BasicView;
  4.  
  5.  public class HelloPrimitives extends BasicView {
  6.  
  7.   // create a sphere and a paper airplane
  8.   // create these at class level in case they are to be used in other functions later
  9.   var myFirstSphere:Sphere;
  10.   var myFirstPlane:PaperPlane;
  11.  
  12.   public function HelloPrimitives() {
  13.  
  14.    myFirstSphere = new Sphere();
  15.    myFirstPlane = new PaperPlane(null, 3);
  16.    // move the plane in 3d space
  17.    myFirstPlane.x = 150;
  18.    myFirstPlane.y = 150;
  19.    myFirstPlane.z = -50;
  20.    // add the objects to the Papervision scene
  21.    scene.addChild(myFirstSphere);
  22.    scene.addChild(myFirstPlane);
  23.    // this is an inherited method (onRenderTick) that starts an
  24.    // enterframe event to render the scene
  25.    startRendering();
  26.   }
  27.  }
  28. }

Hopefully this little addition didn’t scare you off. All that I have done is created a Sphere and a Paper Plane, moved the plane and added the items to the scene. Simple, right? But what are shapes without materials? Boring !

Working with Materials

It is possible to get away without using materials on most objects, but it because a very confusing scene if everything is sitting there without proper textures. Papervision allows for numerous types of materials that you can apply to different parts (or all) of your objects. You can take a look at the documentation for the materials here: http://www.papervision3d.org/docs/as3/org/papervision3d/materials/package-detail.html

Creating a material is much like creating a primitive, just instead of adding the material to the scene, you apply it to the object.

package {
  1.  import org.papervision3d.materials.ColorMaterial;
  2.  import org.papervision3d.materials.MovieAssetMaterial;
  3.  import org.papervision3d.objects.primitives.PaperPlane;
  4.  import org.papervision3d.objects.primitives.Sphere;
  5.  import org.papervision3d.view.BasicView;
  6.  
  7.  public class HelloMaterials extends BasicView {
  8.   // create a sphere and a paper airplane
  9.   var myFirstSphere:Sphere;
  10.   var myFirstPlane:PaperPlane;
  11.  
  12.   public function HelloMaterials() {
  13.    // create a movie material for the sphere from the library
  14.    var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
  15.    // create a color material for the plane
  16.    var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
  17.    // set the properties of the sphere instance
  18.    // set material, radius and segements
  19.    myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
  20.    // set the properties of the paper plane instance
  21.    // set the material and the scale
  22.    myFirstPlane = new PaperPlane(planeMaterial, 3);
  23.    // move the plane in 3d space
  24.    myFirstPlane.x = 150;
  25.    myFirstPlane.y = 150;
  26.    myFirstPlane.z = -50;
  27.    // add the objects to the Papervision scene
  28.    scene.addChild(myFirstSphere);
  29.    scene.addChild(myFirstPlane);
  30.    // this is an inherited method (onRenderTick) that starts an
  31.    // enterframe event to render the scene
  32.    startRendering();
  33.   }
  34.  }
  35. }

All that we did here was we took what we did in the HelloPrimitives class and brought in a couple of materials. One thing to note is the use of the MovieAssetMaterial, for this I had to create a MovieClip in the Flash library and export it for actionscript (Linkage). Once defined, the materials can be used on any object, over and over again. You can even compound materials if you want to, but that is beyond the scope of this tutorial.

Playing in 3D Space

So now you know how to create objects and make them look half-way decent. But what about animation? I am sure that you don’t want to stop with static objects on your stage, what a boring movie that would be.

Well, little do you know, you have already started the animation when you wrote startRendering. That told Papervision to call its renderer and renders the scene every frame that passes.

package {
  1.  import flash.events.Event;
  2.  import org.papervision3d.materials.ColorMaterial;
  3.  import org.papervision3d.materials.MovieAssetMaterial;
  4.  import org.papervision3d.objects.DisplayObject3D;
  5.  import org.papervision3d.objects.primitives.PaperPlane;
  6.  import org.papervision3d.objects.primitives.Sphere;
  7.  import org.papervision3d.view.BasicView;
  8.  
  9.  public class HelloAnimation extends BasicView {
  10.  
  11.   // move the definitions out here so the whole class can get them
  12.   private var myFirstSphere:Sphere;
  13.   private var myFirstPlane:PaperPlane;
  14.   private var pivotContainer:DisplayObject3D;
  15.  
  16.   public function HelloAnimation() {
  17.    // create a movie material for the sphere from the library
  18.    var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
  19.    // create a color material for the plane
  20.    var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
  21.    planeMaterial.doubleSided = true;
  22.    // create a sphere and a paper airplane, increase the triangles on the sphere
  23.    myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
  24.    myFirstPlane = new PaperPlane(planeMaterial, 3);
  25.    // move the plane in 3d space
  26.    myFirstPlane.x = 150;
  27.    myFirstPlane.y = 150;
  28.    myFirstPlane.z = -50;
  29.    // set an initial rotation for the plane
  30.    myFirstPlane.rotationY = -135;
  31.    // add the sphere to the scene
  32.    scene.addChild(myFirstSphere);
  33.    // add a container to use for pivoting the plane rotation
  34.    pivotContainer = new DisplayObject3D();
  35.    // add the plane to the container
  36.    pivotContainer.addChild(myFirstPlane);
  37.    // add the container to the scene
  38.    scene.addChild(pivotContainer);
  39.    // this is an inherited method (onRenderTick) that starts an
  40.    // enterframe event to render the scene
  41.    startRendering();
  42.   }
  43.  
  44.   override protected function onRenderTick(event:Event = null):void {
  45.    // rotate the pivot container (will offset the plane rotation)
  46.    pivotContainer.rotationY += 1;
  47.    // rotate the sphere
  48.    myFirstSphere.rotationY -= 1;
  49.    // make sure that it is calling the renderer
  50.    super.onRenderTick();
  51.   }
  52.  }
  53. }

Now things are getting interesting ! Lets break down what happened here. In an attempt to make the paperplane orbit around the sphere, we had to create a container for it to act as a pivot point. To do this, we created a DisplayObject3D (do3d) object in the scene which is basically like a blank MovieClip. The reason we use the do3d is because it is empty but it can have children and maintains properties that we can then animate (just like in this example).

This is our first time using the onRenderTick method. Since the method is protected, we had to override it and we eventually call the super at the end. This method is what that startRendering call starts. It is just an onEnterFrame that tells the renderer to render the scene, overriding and using this method is helpful for many types of animation and interactivity in the Papervision world. We have added two lines of code here that simply rotate our object. Notice that the Plane isn’t listed, but it is animating. That is because it is a child of the pivotContainer and the pivotContainer is set to rotate.

Pages: 1 2 3 4 5

This entry was posted on Thursday, January 22nd, 2009 at 8:13 pm and is filed under 3D, adobe, AS3, Flash, flex, Papervision, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Digg it | Bookmark at del.icio.us

48 Responses

  1. Posted on 2. February 2009 at 04:50 #comment-497



    If your looking for some tutorials on Papervision you can check out http://hubpages.com/hub/Papervision-3D-programming-tutorial-Depth-of-Field and http://hubpages.com/hub/Papvervision-3D-programming-tutorial-Casting-Shadows

  2. Posted on 3. February 2009 at 17:11 #comment-498

    chris




    nice article. it has been a huge help in getting me going. thanks for taking the time to write it.

  3. Posted on 5. February 2009 at 15:00 #comment-499

    KS




    The latest SVN branch is http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/

  4. Posted on 7. February 2009 at 11:27 #comment-501

    kkx




    Thank you very much!

  5. Posted on 15. February 2009 at 05:45 #comment-505

    XIII




    after setting up the primitives, i dont see any objects when i test the movie, just background without anything objects.

    i script and import onto the main FLA, what did i missed? O_o

  6. Posted on 15. February 2009 at 12:41 #comment-506

    raj




    Hi,
    I am a beginner who just started learning papervision3D. I am using Flex builder for it.
    So far I found your article very nice until I encountered the statement, “One thing to note is the use of the MovieAssetMaterial, for this I had to create a MovieClip in the Flash library and export it for actionscript (Linkage). Once defined, the materials can be used on any object, over and over again”.
    Could you please tell me or point me to a tutorial which describes how to create a MovieClip in the Flash Library and export it for actionscript (linkage).

  7. Posted on 15. February 2009 at 14:05 #comment-507



    In flex i believe that you can just use the [Embed] metatag and point it to a swf. Give it an id and then use that as a movieassetmaterial, take a look here: http://www.bit-101.com/blog/?p=853.

  8. Posted on 15. February 2009 at 21:04 #comment-508



    Super helpful tutorial. Thanks Matthew.

    When I try to compile HelloMaterials.as in Flex Builder 3 using [Embed(source="spheremat1.swf", symbol='spheremat')] to give sphereMaterial a texture i keep getting this in the Problems panel:

    “An Embed variable must not have an existing value.”

  9. Posted on 16. February 2009 at 07:54 #comment-509

    Lauri




    Just a little thing I noticed:

    I checked out revision 876 today and tryed these tutorials with flash cs4 and I had to add opacity to this line to make it work:

    var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11, 100);

  10. Posted on 17. February 2009 at 05:45 #comment-511



    Yes! in this line:
    var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11);
    I have the same error… why??
    1084: Error de sintaxis: se esperaba rightparen antes de 55.

  11. Posted on 17. February 2009 at 11:31 #comment-512



    very odd errors with the materials because the constructor doesn’t even require a color. it is provided with a default:

    public function ColorMaterial( color:Number=0xFF00FF, alpha:Number = 1, interactive:Boolean = false )

    unfortunately I don’t have a copy of CS4 but i might be able to play around tonight to see if i can reproduce the issue

  12. Posted on 22. February 2009 at 20:46 #comment-513

    tim




    Marc,
    Is there a way to make it work with CS3 using an external swf for assets, like so:

    [Embed(source="assets.swf", symbol="sphereMaterial")]
    var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial(“sphereMaterial”);

  13. Posted on 22. February 2009 at 20:53 #comment-514



    using an external file is done with the BitmapFileMaterial for images or the asset material with a swf. but you have to properly load it in. the embed tag that you are showing there is a flex meta tag that isn’t valid in CS3. you could just use a loader in cs3 and reference that movie once it has finished loading.

  14. Posted on 2. March 2009 at 10:58 #comment-515

    yukimi




    Hi Marc, I’m using papervision3d and flash cs3. How do I add a swf as an object/movieclip (just like any other primitives – sphere, cube, etc)? And I want this swf object appear at a highest index (so that it appears at the front)? Please advise. Thanks.

  15. Posted on 11. March 2009 at 16:43 #comment-520



    Thank you for your website and the tutorials Marc :) , now all I have to do is learn Flash, Actionscript3 and Papervision3D :(

    Porly G

  16. Posted on 14. March 2009 at 15:04 #comment-521



    Marc,
    I am going to keep working on this my self, but in case you have any insight, I get the following error when publishing HelloMaterials:
    INFO: Papervision3D 2.0.0 (March 12th, 2009)

    INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode.
    ReferenceError: Error #1065: Variable sphereMaterial is not defined.
    at global/flash.utils::getDefinitionByName()
    at org.papervision3d.materials::MovieAssetMaterial/createMovie()
    at org.papervision3d.materials::MovieAssetMaterial/set texture()
    at org.papervision3d.materials::MovieAssetMaterial()
    at HelloAnimation()

    I’ve never seen a MovieClip referred to as a Class before. Is there a Script that goes with the MovieAssetMaterial MovieClip?

  17. Posted on 14. March 2009 at 15:53 #comment-522



    Figured this part out:
    The Linkage to the empty MovieClip should be sphereMaterial… NOT MovieAssetMaterial

  18. Posted on 14. March 2009 at 20:13 #comment-523



    Hey Danny,
    you have lost me. sphereMaterial is the linkage name of the movieclip in the library. I am applying it as a MovieAssetMaterial

  19. Posted on 17. March 2009 at 19:17 #comment-527

    Joe




    Hello Marc !
    Thank you a lot for this tutorial.
    After lots of research on the web, I can’t fix my problem :
    I Create a FLA files with HelloPapervision.as as Document CLASS, and I have my HelloPapervision.as with the first simple code.
    When I extends BasiView, the flash compiler say :

    TriangleMaterial.as, line 24 :
    1020: Method marked override must override another method.

    Is it the good way to lunch the application ?

    Thank you for you help …
    I still continue to search my nut

  20. Posted on 17. March 2009 at 19:53 #comment-528

    Joe




    Ok it’s work … it was the mess in my org folder… sorry !!
    Let’s go :)

  21. Posted on 31. March 2009 at 07:30 #comment-533

    Roberto




    Hi! A very nice job!!
    But if you cancel the rotationY of sphere and container in the overrided function in the “Controlling Objects with the Mouse” section, it will be better…

    Bye!

  22. Posted on 7. April 2009 at 11:31 #comment-535

    Jay




    Very nice tutorials. Please, keep’em coming!! =)

  23. Posted on 9. July 2009 at 05:40 #comment-570



    You’re so GOOD.
    It works properly! Thanx

  24. Posted on 3. October 2009 at 22:41 #comment-593

    hackdan




    Cool anybody knows how import or parse collada with animation and run it in PV3d ?

  25. Posted on 5. October 2009 at 07:17 #comment-595

    Krodil




    Hey.. nice work.. :)

    I get the cam feed and such, but when I run I get error
    1017: the definition of base class ObjectContainer3D was not found..
    Any help…

  26. Posted on 20. February 2010 at 20:05 #comment-613



    I tried this code with Papervision 2 and it gives me a huge error in Papervision 2 code.
    The Papervision version is Papervision3D_2.1.920

    there about 20 compiler errors for package org.papervision3d.objects.parsers.Max3DS
    like this one:
    ” 1178: Attempted access of inaccessible property _textureExtensionReplacements through a reference with static type org.papervision3d.objects.parsers:Max3DS. ”

    also compiler errors for few more classes.

    I took a look at the code, and I saw that some variables are declared later than they are used, for example in the class
    org.papervision3d.objects.parsers.Max3DS ,
    the variable
    private var _textureExtensionReplacements:Object;
    is declared in line 636, but the compiler error is in the line 41 – “1178: Attempted access of inaccessible property _textureExtensionReplacements through a reference with static type org.papervision3d.objects.parsers:Max3DS.”
    I had this mistake in my work but PV3D2 developers knows better. Maybe I should contact them? Does anyone use PV3D 2 ? WHat results do you get?

  27. Posted on 9. August 2010 at 03:57 #comment-641



    MovieAssetMaterial, for this I had to create a MovieClip in the Flash library and export it for actionscript (Linkage). Once defined, the materials can be used on any object, over and over again”.

  28. Posted on 4. November 2010 at 03:28 #comment-656



    Thanks for the introduction! I am always reading your blog and only today I have spotted the post with introduction! I am one hundred percent sure that Jodi is cool as other members are.

  29. Posted on 2. December 2010 at 23:27 #comment-662



    Such an interesting post never had any of this informative blog till now. I might suggest my friends to visit here too.

  30. Posted on 5. January 2011 at 17:28 #comment-671



    This a nice tutorial and very detailed with matching table of contents. I like the way you elaborated each step since it is easy to follow. Even if those people who don’t have enough knowledge about programing would have an ease to follow each step.

  31. Posted on 26. January 2011 at 02:36 #comment-712



    Thanks for sharing!

  32. Posted on 30. January 2011 at 06:18 #comment-717



    Many thanks to the person who made this post, this was very informative for me. Please continue this awesome work. Sincerely…

    The article is very well!

  33. Posted on 14. February 2011 at 02:24 #comment-721



    Very good post. Made me realize I was totally wrong about this issue. I figure that one learns something new everyday. Mrs Right learned her lesson! Nice, informative website by the way.

  34. Posted on 14. February 2011 at 02:41 #comment-722



    i dont see any objects when i test the movie, just background without anything objects.

  35. Posted on 17. February 2011 at 06:14 #comment-728



    Nice topic and post, as we were just talking about what things can happen in the medicine industry.

  36. Posted on 4. March 2011 at 08:44 #comment-763



    This design is incredible! You definitely know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  37. Posted on 15. March 2011 at 22:02 #comment-795



    I took a look at the code, and I saw that some variables are declared later than they are used, for example in the class

  38. Posted on 24. March 2011 at 11:33 #comment-804



    Thank you for this article. That’s all I can say. You most definitely have made this blog into something special. You clearly know what you are doing, you’ve covered so many bases.Thanks!

  39. Posted on 13. April 2011 at 20:27 #comment-862



    Very good an article details write very in place thanks for sharing

  40. Posted on 14. April 2011 at 04:33 #comment-863



    Really valuable written content. the information that you shown is amazing and many prominently i liked the way you provided things here.

  41. Posted on 15. April 2011 at 03:52 #comment-864



    you have lost me. sphereMaterial is the linkage name of the movieclip in the library. I am applying it as a MovieAssetMaterial

  42. Posted on 17. April 2011 at 11:16 #comment-866



    A great post, thanks for taking the time to share, continued success to your site in the future! GOOD Work!!

  43. Posted on 21. April 2011 at 02:37 #comment-915



    Hi there,
    Really nice job,There are many people searching about that now they will find enough sources by your tips.
    Also looking forward for more tips about that

  44. Posted on 14. May 2011 at 00:33 #comment-998



    thank you very Retrojordansbuy.com.

  45. Posted on 6. June 2011 at 22:26 #comment-1115



    A great post, thanks for taking the time to share, continued success to your site in the future! GOOD Work!!

  46. Posted on 10. June 2011 at 17:12 #comment-1160

    MUHAMMAD Junaid




    Hi, I want to develop web based 3d Virtual book Shop/store(website)
    as my BS-Software Engineering final year project

    Basic scenario that the shop must be capable of is as follow

    The Shop is as it is physically , the online customer will go to the shop website when the user entered the URL of website the website opens and ask for MALE OR FEMALE—when the customer select one it will enter in the shop(A BOOK STORE IN MY MIND) with the selected MALE OR FEMALE character/AVATAR—now he is allowed freely to move in the shop and interact freely with different products (preview the books ,Cdz and other media available) and add to cart and at the end SHOP I/ Pay for it

    I want another functionality i.e online users that currently on that webpage are also visible to the other user on that website

    THE ADMIN PANEL WILL ALLOW ME TO Customize the web content if it is going to deploy for another shop some how like this

    What SHOULD I NEED/USE
    Flash, Google O3d , WebGL , Java3d ,X3D ,VRML , Unity3D , Infinity or etc…etc
    HTML 5 …??? Support or Help me ??? paper Vision ???

    I need Help about Technologies/platforms/languages should and shouldn’t

    I NEED A GUIDANCE for it

    I need help regarding it . .ALSO IF YOU KNOW any 1 having experience or knowledge about it that will help me please sent his/her EMAIL ID so that I contact him or Forward my Email or Refer me

    I’ll Be very thankful to you

    BEST REGARDS
    MUHAMMAD Junaid

  47. Posted on 11. June 2011 at 05:35 #comment-1163



    Great tips, I would like to join your blog anyway

  48. Posted on 22. June 2011 at 06:49 #comment-1189



    Hi Junaid,

    That sounds like a plausible site, with the exception of being able to see everyone else that is in the store as well.. I would limit that to a couple people, just to keep the complexity down.

    If you were to consider it in Flash (3d), I would recommend building with the latest (Molehill) version of a 3d engine. The engine that you use is up to you, I have been playing around mostly with Alternativa and Away 3D but have seen good things with Flash and Yogurt. I don’t really know enough about the rest of the 3d technologies to give much advice with them, but if you are focusing on a website and don’t want to restrict people who are coming to your site, then i would suggest Flash.

Leave a Reply

Captcha
Enter the letters you see above.