Wanna click that button on that 3D object? Now you can. Oh, and it’s so easy, a caveman could do it.

[kml_flashembed movie=”http://www.acmewebworks.com/papervision3d/interactiveBoxDemo/boxDemo.swf” width=”450″ height=”350″/]

So, lately, on the Papervision3D list, we’ve been getting alot of requests for the ability to have mouse events on elements in a MovieClip/Sprite used as a material on a 3D object. Tons in fact.

Well, with a bit of research and help from guys like De’Angelo Richardson and Jim Kremens, we were able to finally crack this nut and make it work out of the box! It’s so easy a caveman could do it🙂

The magic is really supplied by Pierre Lepers with his 3D>2D point conversion methods and drawing demo (see blackpawn explanation).

Inspiration, was really provided by Patrick Matte over at Blitz Agency with his original cube demo and interaction – really an ingenious implementation and idea! This was actually where the bar was set in my mind – if we couldn’t provide this level of interactivity with our way of implementing it, then it wasn’t going to be good enough. Well, thankfully, it DOES work😉

The new ISM sports Face level interactivity now. This opens up a whole new world of accessibility with your 3D scene and the 2D screen. ISM now makes it easier than ever to give you interactivity with your movieclip materials.

Here are the steps:

  • create MovieClip
  • add objects that you want to be clickable (IE: UI components, or other movieclips/sprite objects)
  • use this MovieClip with an InteractiveMovieMaterial
  • apply InteractiveMovieMaterial to 3D object
  • done.

With the addition of the new VirtualMouse by Trevor McCauley, we were able to modify is slightly to work with multiple objects that might not necessarily exist on a stage🙂 With VirtualMouse, you’re able to receive the pure events from those objects in your MovieClip/Sprite container.

The code you end up writing looks like any other day at the office:

[as]public function createPlane():void
{
var movie:MovieClip = formUIContainer.formUI;
material = new InteractiveMovieMaterial( movie );

material.animated = true;
material.smooth = true;

// establish your MouseEvent listeners as normal

movie.btn.addEventListener(MouseEvent.CLICK, handleBTNClick);
movie.btn.addEventListener(MouseEvent.MOUSE_OVER, handleBTNOver);
movie.btn.addEventListener(MouseEvent.MOUSE_OUT, handleBTNOut);

var plane:Plane = new Plane(material, 250,250,8,8);
scene.addChild(plane);
}
[/as]

There are 5 demos for you to sample and learn from in the FaceLevelInteractivity branch of the google repository:

updated docs here:http://www.rockonflash.com/demos/pv3d/docs/index.html

Now, there’s alot that went into getting the ISM to this level and there’s alot of features that have been added to give developer the best possible scenario in getting the most FPS possible. You can use object level mode, like we’ve been doing, and now face level mode.

InteractiveSceneManager.faceLevelMode = false; // object level interaction
InteractiveSceneManager.faceLevelMode = true; // fade level interaction

We’ve also added a new static boolean property to DisplayObject3D (DO3D for short) – faceLevelMode. When set to true, all DO3D’s will create sprite containers for their faces. This is a bit heavier on the cpu, and should only be done when necessary.

The cool thing about the ISM is that, it only draws the faces you specifiy. By using an Interactive material, you designate which object will have it’s faces drawn in the ISM. Now, you can be utlra picky about WHICH objects are getting face level interactivity!

We went even a step further with mouseInteractionMode property. This basically tells the ISM “don’t draw anything unless they’re mouse interaction”. Now we have a completely new level of determining WHEN something needs interaction and not.

Also, a note about the ISM: it only receives drawing instructions if the face of a DO3D is actually drawn. So with the new culling features, we’re only drawing whats absolutely necessary to save on CPU.

Anyway, theres’ just the tip of the iceberg, but with the docs and samples, you should be well on your way to using the ISM features!

I’ll be covering the ISM in detail at the RMI classes in Toronto, so don’t miss that!
UI components notes

Now that we have this level of interactivity, we need help from the community to figure out the remaining details of *how* to use UI components with this setup. You’ll see in the formUITest that I’ve put the movieclip container inside of a parent container and set a blendMode to that parent. This allows the components to be on stage and hide the content from screen.

The UI Components will not work without a stage property being set. Also, there are issues with some of the components and their registered sizes, which if you put a component too far down on a material, it’ll change the size of the movieclip, and the mapping will be wrong if you’re using a model you textured in a 3D app like 3D Studio Max.

So, any and all help would be greatly appreciated as we figure out how to deal with the UI components and streamline the process as much as possible – thanks!

  1. Just when you thought the envelope was pushed as far as it could go…

    Fantastic work guys.

    e k z

  2. THX ! Crazy work !

  3. Thanks for bringing the dream to reality!. stunning work.

  4. This rocks excellent job.

  5. Wow! Awesome work! This really kicks open some doors.

  6. maybe im worse than a caveman
    i cant get interactive mouse in 3d
    and the examples look ugly to me
    i dont get it ?????????

  7. [@snail] Can you give us a little more detail on what you’re doing?

    what version of Flash Player are you testing on?

  8. Not bad, to wipe my butt with!

    LOVE YOU JOHN!!!
    🙂

  9. [@keith] [ shakes fist in air ]… you’ll get yours😉

    • hosey
    • August 20th, 2007

    I wanna grab the scrollbar tab…

  10. Done! I just have to wait until they update the fire wall so I can upload the changes for the sample on this page.

    I added the press/release calls for VirtualMouse and that makes it work😉

    • snail
    • August 21st, 2007

    no the examples work great
    but i cant understand the mouse things
    i created a MovieClip with UI components
    applied InteractiveMovieMaterial on a cube
    now how the mouse will interact with this cube texture
    // establish your MouseEvent listeners as normal
    and then what?
    those virtualmouse classes is not work for me
    give bunch of errors
    maybe if you can do it easier than this
    for snail brains like me lol

  11. [@snail] are you using Flash CS3 or Flex2 to compile to an AS3/Flash9 swf?

    what errors do you get?

    • Steven Lin
    • August 21st, 2007

    can I use InteractiveMovieMaterial in Flex 2?
    I try to establish an movieclip by using

    var myMC:MovieClip=new MovieClip();
    myMC.addChild(new Button());

    and throw it into the InteractiveMovieMaterial

    the Error generate in BitmapData Invalid parameter(the movie clip width and height is zero.)

    how can I use an Flex UI Component in InteractiveMovieScene.

    I can figure out an way to to it.

    by the way. the trunk won’t compile with flex2.
    I have to merge some branch and to get rid of some errors to get it work. and each branch have different version of file.

    maybe a central control of co-use files is good for latter merge.

  12. [@Steven] – I would first, call drawNow() on the button before adding it in the constructor for the new material. That might be the issue there.

    As for the Flex2 compile errors, they should be gone now that the trunks’ been updated last night with those fixes. What revision # are you at?

    • Steven Lin
    • August 21st, 2007

    I update it to revision 203

    1. fl/LivePreviewParent.as
    wrong package name or wrong file path
    “package fl.livepreview”

    2.BitmapAssetMaterial.as line 106
    “correctBitmap( bitmap, true );”
    function parameter doesn’t match with BitmapMaterial.as
    I copy seem newer version from branch ascollada but it file doesn’t have resetMapping(), so I copy them together.

  13. [@Steven] – yeah, you need to sync with the trunk or just update the entire repository. I’ve since removed the FaceLevelInteractivity branch and the trunk has these fixes already applied.

  14. nice now there is drag and drop in 3d…
    about the new Cube class with 6 faces
    it gives me error on mergeVertices();
    i deleted it and my cube compiled
    what about a glass cube
    the alpha in material doesn’t work

    • Moo
    • August 22nd, 2007

    MovieScene3D.as didn’t clear resources when removing children.
    “containerList”
    “spriteList”
    and children can’t be garbage collected

    you might apply this to MovieScene3D

    public override function removeChild( child:DisplayObject3D ):DisplayObject3D{
    var removed:DisplayObject3D=super.removeChild(child);
    for(var i:int=0;i

    • Alex
    • August 22nd, 2007

    newest version BitmapMaterial.as
    didn’t init “uvMatrices”
    and cause an runtime error.

  15. Fixed in Rev 207 [@Moo and Alex]

  16. hi,
    it’s possible download .fla?
    i have many problems, with this property…

  17. if you sync with the PV3D repository, you see IncteractiveBoxDemo – the files are there

    • Steven Lin
    • August 27th, 2007

    PreciseBitmapFileMaterial exception
    drawFace3D()–>
    if the file not loaded yet,
    mapping will be null and
    renderRec throws null exception when trying to access null members

    fix:
    add BitmapFileMaterial-> drawFace3D
    checking block

  18. Thanks very much Steven for finding and posting!

  19. That’s cool as hell.

    • jenkle
    • August 31st, 2007

    nice work.

    could you please post the source?

  20. if you sync up with the SVN repository, it’s in the AS3 examples folder along with a ton of other Papervision3D examples

    http://code.google.com/p/papervision3d/source

    • Doug
    • September 1st, 2007

    I’m in the same dilema as Steve Lin, creating a new MovieClip() and adding a button. I was up to date as of yesterday (213). I’m not sure that I understand the drawOn() reommendation.

    Would someone be willing to publish a simple example of a single control which doesn’t rely on a *.fla file?

    This is awesome work. Thanks for blogging.

    • Tyler
    • September 3rd, 2007

    This stuff is fantastic. Unfortunately all this code is gibberish to me. I am a 3d artist wanting to put some of my artwork online. I hope one day this stuff will be retard friendly.

    • Nico
    • September 4th, 2007

    That cube is amazing.
    I’m a newbie to flash, but I’ve been trying to figure out how to map photographs onto a 3D sphere which you can both rotate, and have each photo area on the sphere as a link to the normal photo file; any ideas?
    Andries Ondendaal has done some done it with shockwave here
    http://www.interact10ways.com/usa/sumona.asp
    Do you think it’s possible in flash?

  21. Yes, you can map images to a sphere and click them for a bigger representation😉

    I’d suggest getting signed up with the papervision3d email list and checking out the wiki:

    wiki.papervision3d.org

    That’ll get you started!

    • Kana
    • September 9th, 2007

    thx for this amazing step ahead!!

    i am trying to update this source by using a InteractiveMovieAssetMaterial instead of InteractiveMovieMaterial.

    material = new InteractiveMovieAssetMaterial(“canvas”);

    it compiles but the form is not rendered properly and not clickable.

    any idea?
    thx a lot

  22. Yeah it’s because the UIComponents need to be on stage to work properly unfortunately. They rely on being added to stage to “come alive”😉

    • Kana
    • September 9th, 2007

    thx a lot john for this fast update!🙂
    i am changing my source right now

    • Kana
    • September 9th, 2007

    john.. sorry to bother you! but i am blocked and can not find why.

    here are the steps i follow as per your sample:
    – created MovieClip
    – added one sprite to be clickable
    – used this MovieClip with an InteractiveMovieMaterial
    – applied InteractiveMovieMaterial to a plane

    now my sprite is not clickable by default.
    but it is only when i am zooming the animation (right click > zoom)!!

  23. are you using InteractiveScene3D for your scene?

    • kana
    • September 9th, 2007

    yep
    i find a turnaround for this issue.
    i moved my flat component (taken from the library) on the upper part of the canvas (it was outside the canvas initially).
    it works now. strange!
    thx

  24. Yeah I should have mentioned, you need to have the movie that’s used as a material at 0,0 on stage for that to work correctly.

    If you don’t have to use UIComponents, it SHOULD work from the library just fine.

    • cayennecode
    • September 12th, 2007

    I’m just noticing that if you change the x, or y property of the plane, the interactive movie materials x and y must need to update as well, or else the events won’t fire.

    • cayennecode
    • September 12th, 2007

    correction, I’m not sure how to handle this yet.

  25. if you’ve moved the formUIContainer movieclip that’s on stage from the 0/0 location, the the x/y coordinates will be off. This is because we assume 0,0 to make our calculations.

    When a sprite or moviecllip is created, their x/y values are automatically 0,0 (top,left) – regardless of being added to a display list or not. When added to a display list, they’ll still be 0,0 until you move them elsewhere.

    And so why do we have that movieclip on stage in the first place then? because the Form UI compnents have to be added to a display list that’s been added to the stage or they won’t initialize fully.

    • cayennecode
    • September 12th, 2007

    I’m not familiar with the formUIContainer. I’m just using an InteractiveMovieMaterial. I’m not using any components.

    I thought that the registration point might be the issue, and am tracking back through code to see where I might’ve modified it.

    • cayennecode
    • September 14th, 2007

    It was the registration point = ]

    I’m loving this Interactive 3D! Do you know of any solid papervision3D performance reading resources? Anytime a papervision3D object is added to the display list and rendering, all other ENTER_FRAME anims slow down ALOT

    • jason
    • December 1st, 2007

    Hey guys, awesome stuff! I have 2 questions:

    1. Is it possible to make the faces on the Cube separate SWF’s all w/ their own animation? right now I’m trying to get an imported SWF’s animation to work on the face of my cube and it just doesn’t run the animation?

    2. This Papervision stuff is all new to me…can you point in the right direction for the most complete documentation…tutorials would be nice to!

    Thx!

    • droid9
    • January 7th, 2008

    Hi, this is exactly what I’ve been looking for. I have been playing around with papervision3d and its great. I must be sub caveman because I’m not sure how to set this up. Is there any FLA files available for this?

    • Jeff Marshall
    • January 31st, 2008

    John this is great. I was wondering if any one has tried to do this with a primative cube. I am working with cubeDemo. It uses materials from the library and places it onto the primative. How do I add these to the ISM?

    • TK
    • March 13th, 2008

    When will this be committed to GreatWhite?

  26. There IS a 2.0 component that’s not been released. We have effects, DAE and GW to combine still and with over 350,000 downloads of the 1.5 component, I don’t want to just throw stuff up there😉

    • Gérald
    • April 17th, 2008

    Hello john,
    i’m very interested in such a component for 2.0. It will be very cool to have full interaction with 3D object over Flex written components.
    Do you have a release date in mind for it ?

  27. @Gerald: I actually have been releasing it to class members only – the 2.0 version that is. Since 2.0 isn’t final release yet, and we have over 350,000 downloads of the component, I don’t want to release until we have a final 2.0 version of PV3D. So, if you come to one of the last 2 classes, you’ll get the 2.0 component way before anyone else does😉

    • nirav v. patel
    • August 21st, 2009

    Could someone post up an FLA that has the InteractiveMovieMaterial within?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s