Button Panel Inside a Panorama

November 20, 2008

Intro

I wrote this code a little time ago, but it’s got some good stuff in it. It demonstrates how to put a button panel inside of a panorama using multiple viewports and cameras. It also shows how to use the switch case to handle button interactivity.

I’ve already lost it once and had to decompile it from the web and reconstruct it. So don’t be surprised if you see the loc_2 variable. I decompiled my own code – the best use of sothink. To see a demo click the image below.

Button Panel Inside of a Panorama

Button Panel Inside of a Panorama

Demo: http://www.professionalpapervision.com/demos/web/buttonpano/

Download (buttonPano): http://code.google.com/p/flex3cookbook2/downloads

Discussion

This is essentially a combination of the button panel and panorama discussed in previous posts. But if you put them together they will not work. The button panel has sorting issues with the panorama. So the trick to make this work is to use 2 separate viewports and two separate cameras. One viewport for the button panel and one for the panorama and similarly for the cameras.

Important Trick(multiple viewports)

The use of multiple viewports to overcome sorting issues is an important trick in Papervision. In addition to solving sorting problems you can use multiple viewports to enhance application performance by separately throttling the viewports based on user interactions.

It’s easy to add more than one viewport, you just declare a new one and add it as shown below

viewport = new Viewport3D(800, 600, true, false);
viewport2 = new Viewport3D(800, 600, true, true);
viewport2.buttonMode=true;
pv3Canvas.rawChildren.addChild(viewport);
pv3Canvas.rawChildren.addChild(viewport2);

Note: This was a Flex program and required the use of rawChildren.

There is an important difference when working with Flex applications where you are using script tags (not an actionscript project). In order to add children to the Flex stage you must put them in a canvas or another component and use the rawChildren tag shown below.

pv3Canvas.rawChildren.addChild(viewport);

This modification allows you to add non-native Flex display Objects to the Flex display stack. This is essential in getting your MXML application to run, otherwise nothing will happen.

It is easy to add multiple cameras as well as shown below:

scene = new Scene3D();
camera = new FreeCamera3D();

scene2 = new Scene3D();
camera2 = new FreeCamera3D();

And when you render you must have two render functions as follows;

renderer.renderScene(scene, camera, viewport);
renderer.renderScene(scene2, camera2, viewport2);

Switch Case

If you’ve done any amount of game programming you’ll agree that switch case is your best friend and it comes in handy when working with the interactivity of our button panel as well. When you click on a button you can extract the buttons name using

param1.face3d.material.name

once you have the name of the button you clicked on you can put it in a switch case and associate it with a specific function for that name as shown below:

private function onClick(param1:InteractiveScene3DEvent) : void
{
switch(param1.face3d.material.name)
{
case “myMat00″:
{
navigateToURL(new URLRequest(“http://n2.nabble.com/Lively3D-f1514083.html”), “_blank”);
break;
}// end case
case “myMat01″:
{
navigateToURL(new URLRequest(“http://code.google.com/p/lively3d/”), “_blank”);
break;
}// end case
case “myMat02″:
{
navigateToURL(new URLRequest(“http://www.youtube.com/mikenku”), “_blank”);
break;
}// end case
case “myMat10″:
{
navigateToURL(new URLRequest(“http://code.google.com/p/flex3cookbook1/downloads/list”), “_blank”);
break;
}// end case
case “myMat11″:
{
navigateToURL(new URLRequest(“http://www.professionalpapervision.wordpress.com”), “_blank”);
break;
}// end case
case “myMat12″:
{
navigateToURL(new URLRequest(“http://www.nku.edu/”), “_blank”);
break;
}// end case
default:
{
break;
}
}

Click the more button to see the complete code.

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.