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

Guide to Getting Started in Papervision 3D

Add Interactivity

Controlling Objects with the Mouse

Mouse interactivity is a must when it comes to web pages, so I had to include a little bit about that functionality in a basic tutorial.

By default, mouse interactivity isn’t enabled in any aspect of Papervision. This is because it takes up processor time which doesn’t need to be taken up.

There are several different types of interactivity and we will start with having the scene detect the mouse position and have that control the camera.

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 HelloInteractivity 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 HelloInteractivity() {
  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.    // get the rotation values for the camera based on where the mouse is in the scene
  50.    var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
  51.    var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;
  52.    // set the camera's position
  53.    camera.x -= (rotX + camera.x) / 10;
  54.    camera.y -= (rotY + camera.y) / 10;
  55.    // make sure that it is calling the renderer
  56.    super.onRenderTick();
  57.   }
  58.  }
  59. }

If you compare this script with the animation script you will notice that the constructor has not changed at all yet it is able to interact with the mouse now. What we added was in the enterframe (onRenderTick) function. All that it does is get the position of the mouse on the stage and move the camera based on that position. The equation looks more complicated than that, but that is basically what it does.

There are a ton of ways that you can use this in your applications, maybe adding a keyboard listener to let the user control the camera and have the mouse control the camera’s rotation. If you have ever seen a first person shooter, that is basically how it functions.

Making Objects Interactive

Another type of interactivity is when you want to actually interact with an object itself. Once again, this functionality is not enabled by default but can easily be enabled and used in Papervision.

package {
  1.  import flash.events.Event;
  2.  import org.papervision3d.events.InteractiveScene3DEvent;
  3.  import org.papervision3d.materials.ColorMaterial;
  4.  import org.papervision3d.materials.MovieAssetMaterial;
  5.  import org.papervision3d.objects.DisplayObject3D;
  6.  import org.papervision3d.objects.primitives.PaperPlane;
  7.  import org.papervision3d.objects.primitives.Sphere;
  8.  import org.papervision3d.view.BasicView;
  9.  
  10.  public class HelloClickability extends BasicView {
  11.  
  12.   // move the definitions out here so the whole class can get them
  13.   private var myFirstSphere:Sphere;
  14.   private var myFirstPlane:PaperPlane;
  15.   private var pivotContainer:DisplayObject3D;
  16.  
  17.   public function HelloClickability() {
  18.    // call the super to turn on interactivity
  19.    super(0, 0, true, true);
  20.    // create a movie material for the sphere from the library
  21.    var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
  22.    sphereMaterial.interactive = true;
  23.    sphereMaterial.smooth = true;
  24.    // create a color material for the plane
  25.    var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
  26.    planeMaterial.doubleSided = true;
  27.    planeMaterial.interactive = true;
  28.    // create a sphere and a paper airplane, increase the triangles on the sphere
  29.    myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
  30.    myFirstPlane = new PaperPlane(planeMaterial, 3);
  31.    // add the event listener to the object using the InteractiveScene3DEvent
  32.    myFirstSphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
  33.    myFirstPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
  34.    // move the plane in 3d space
  35.    myFirstPlane.x = 150;
  36.    myFirstPlane.y = 150;
  37.    myFirstPlane.z = -50;
  38.    // set an initial rotation for the plane
  39.    myFirstPlane.rotationY = -135;
  40.    // add the sphere to the scene
  41.    scene.addChild(myFirstSphere);
  42.    // add a container to use for pivoting the plane rotation
  43.    pivotContainer = new DisplayObject3D();
  44.    // add the plane to the container
  45.    pivotContainer.addChild(myFirstPlane);
  46.    // add the container to the scene
  47.    scene.addChild(pivotContainer);
  48.    // this is an inherited method (onRenderTick) that starts an
  49.    // enterframe event to render the scene
  50.    startRendering();
  51.   }
  52.  
  53.   private function onObjectClick(ARG_evt:InteractiveScene3DEvent):void {
  54.    // here is your event listener to control the object you clicked.
  55.    trace(ARG_evt.currentTarget);
  56.   }
  57.  
  58.   override protected function onRenderTick(event:Event = null):void {
  59.    // rotate the pivot container (will offset the plane rotation)
  60.    pivotContainer.rotationY += 1;
  61.    // rotate the sphere
  62.    myFirstSphere.rotationY -= 1;
  63.    // get the rotation values for the camera based on where the mouse is in the scene
  64.    var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
  65.    var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;
  66.    // set the camera's position
  67.    camera.x -= (rotX + camera.x) / 10;
  68.    camera.y -= (rotY + camera.y) / 10;
  69.    // make sure that it is calling the renderer
  70.    super.onRenderTick();
  71.   }
  72.  }
  73. }

What we added to this version is an event listener. There were a couple requirements in order to have the event listener actually do anything, but that is basically all that we did. To start, we called the super and enabled interactivity (that is the fourth parameter). Next, we made the sphereMaterial and planeMaterial interactive by setting the interactive property to true. Finally, we added the InteractiveScene3DEvent listener. This fires custom events that Papervision objects handle. The only result in what we did was a trace of the object that was clicked, I will let you use your imagination for enhancing this.

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.