Tutorial: Skin A PV3D Plane Using BitmapFileMaterial

Objective

• Learn how to create a double-sided Plane object.
• Learn how to use an external image file as a material using BitmapFileMaterial.

Prerequisite

• Creating A PV3D Cube

Files Required

• PV3D 2.0 Alpha: Great White Framework (learn how to get it)
• Tutorial Files (see folder structure)

Let’s Get Started!

This tutorial was indirectly requested by Adrian, who left a comment asking how to load an external image file as a material. I promised him a tutorial on this, so here it is. 😉

The main function that I want to talk about is the createPlane function, as shown below.

private function createPlane():void
{
	// Set some colors so we can see if loading is still happening,
	// or if it failed
	BitmapFileMaterial.LOADING_COLOR = 0x0000FF;
	BitmapFileMaterial.ERROR_COLOR = 0xFF0000;
	//
	var material:BitmapFileMaterial = new BitmapFileMaterial("http://flashmech.net/blogT72CinijyU/wp-content/uploads/2008/07/flashmech-rss.gif");
	material.doubleSided = true;
	//
	plane = new Plane( material, 300, 100, 10, 10 );
	//
	scene.addChild( plane );
}

In line 8, I created a BitmapFileMaterial and in its constructor, passed in the url as a string datatype. This will now automatically takes care of the loading process of the image. How convenient! 😀

By default, any material will only be single sided. To enable viewing the plane from both sides, just set the material’s doubleSided property to true, as with line 9.

Lastly, create the plane through the constructor, throw in the material, set some sizes and segments and you’re good to go! *w00t~*

Final Note

If you wish to change the image after loading it the first time through the constructor, a hack is available. Without explaining the intricacies of the BitmapFileMaterial class itself, you can change the texture property with a new url of string datatype.

However, since it’s a hack, the url property or your material instance will NOT BE UPDATED. Otherwise it should work just fine. 😉

In the meanwhile, I’m still trying to figure out if it’s possible to dynamically size the Plane after the BitmapFileMaterial has successfully loaded. If anyone knows of a solution, it would be great if you could point me to it. Thanks!