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:

• boxDemo
• drawingTest - draw on a sphere
• helloMouse3D - Thanks to De’Angelo for creating Mouse3D and this demo to show it’s use! Awesome work
• formUITest - using a movieclip with UI components on a plane object
• TestInteractiveSceneSimple - thanks to Jim for making this very simple how-to sample

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!