New Papervision3D Materials Tutorial

PaperVision Image

Today, after installing the latest paperVision classes and getting them all set up in flash, I managed to get real-time texture swapping working on the different primitives.

I couldn’t find any well written documentation on just adding simple functionality like this, so here it is, adding button presses, and simple material re-loading.

To view the online example, click here.

To setup papervision3d using the Flash IDE (my preference) follow these simple instructions-

http://wiki.papervision3d.org/index.php?title=Compiling_AS3_Papervision_with_Flash_IDE

Next, setup a new papervision3d project, which again, can be done easily, by following the generic setup/base setup here-

http://www.andrestubbe.com/downloads/papervision3d/ExampleBaseCode.as

First, I define my texture that im going to apply by default-

var material:BitmapFileMaterial = new BitmapFileMaterial("abs1.jpg");
material.doubleSided = false;
material.smooth = true;

After setting up your texture, add the cube primitive

cube = new Cube( material, 10, 100,300,2, 2, 2);
scene.addChild( cube );

Now you should have a working cube added to your stage, using just the one texture that you imported. What I did now, was in the Flash IDE, drew a colored square, and made it into a movieclip. Create a box, select it, and Press F8 or Modify -> Convert to Symbol.

Next, I figured out how to add button presses and listeners utilizing an external actionscript file. If you followed the directions up top in setting up the flash IDE environment, you should already be working off of an external AS file, which is where all the code above should be placed.

Once you created a button on your stage, go ahead and name the instance something. I used “button1” and “button2”, etc..etc..

Adding listeners to the objects on stage is done like this-

button1.addEventListener(MouseEvent.CLICK,onClick);

onClick is defined as my function name to handle the click event. Once you press the button1, the event is triggered, and function called.

This is the function that I used to change the texture on the primitive-

private function onClick(event:MouseEvent):void {
var material:BitmapFileMaterial = new BitmapFileMaterial("abs1.jpg");
material.doubleSided = false;
material.smooth = true;
cube.material = material;
}

This is the most important part of the code. The very last line tells it to re-apply the material to the object. Before I figured this out, I was trying to remove the cube, and re-make a cube dynamically because I didn’t think it possible to re-apply a material in real-time. Well, thankfully I was wrong, and this does exactly what I had hoped it would.

We are still learning a lot about papervision and it’s potential, but with newer builds, the flash IDE environment for development, and PV3D components, it’s exciting to think about what we can do with this technology now.

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.