Flashmech

Objective

• Learn how to make your Papervision3D object interactive.

Prerequisite

• Skin A PV3D Plane Using BitmapFileMaterial

Files Required

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

Let’s Get Started!

From the last tutorial where I loaded an external image using BitmapFileMaterial, you should have guessed that this tutorial is next to come. *lol~* The purpose of breaking them up into 2 separate tutorials is to modularise them, just like programming.

First off, we have to edit our viewport instance in the init3D function.

viewport = new Viewport3D( 0, 0, true, true );

The fourth parameter, “interactive”, determines whether the viewport should listen for Mouse events. Since we want to make things interactive, we pass in true for it.

[UPDATE]: With thanks to Marco for pointing this out, to show the hand cursor when rolling over interactive objects, you can add the following line after you create the viewport instance.

viewport.containerSprite.buttonMode = true;

Next up, in our createPlane function, we have to change the interactive property of the material that we created for the plane to be true as well.

material.interactive = true;

To listen for the events, we will add the event listener in the addEventListeners function:

plane.addEventListener( InteractiveScene3DEvent.OBJECT_CLICK, __onPlaneClick );

(Note: Don’t forget to import the InteractiveScene3DEvent!)

To wrap things up, we have to create the new listener function __onPlaneClick, which for the purpose of this tutorial, navigates to my blog’s RSS feed.

private function __onPlaneClick ( e:InteractiveScene3DEvent ):void 
{
	navigateToURL( new URLRequest("http://feeds.feedburner.com/flashmech"), "_blank" );
}

Final Note

At this point of writing, it seems that there’s no easy way to make use of useHandCursor. From my research online, probably the best way to do that is from Papervision 2’s tutorial of Advanced Interactivity 2.

Hope the guys over at Papervision3D will add this functionality into the engine soon.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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://blog.flashmech.net/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!

My oh my how lucky am I to stumble on this post from Papervision3D’s blog today! Make sure you don’t miss out about PaperKing3D too! (The prizes are very attractive!)

In less than 2 weeks time, it’ll be the start of code::XtremeApps::, the competition that I’ve been waiting ever since its launch. The timing seems to be just right that after code::XtremeApps::, I still have one month to create something for PaperKing3D!

Most probably I won’t stand a chance to win PaperKing3D, since I am well aware that I’m barely scratching the surface only, not to mention the lack of time to play with it due to work commitments. But well, in my opinion, joining competitions is not necessarily to win, since the experience gained through the process is worth much more.

Winning is a confirmation of your skills; prizes are a perk. Experience is still golden. Therefore I highly recommend, whichever is your level of skills with Papervision3D, to give this contest a roll.

While writing my previous tutorial, I noticed this rendering bug with PV3D when my movieclip, which is to be used as a MovieAssetMaterial, uses a static textfield in it.

I have no idea exactly what causes it, but to workaround, you have to break apart the textfield into shapes.

The above solution is however, only valid if the text is meant for graphical purposes only. If you really have to use a textfield, use a dynamic textfield and embed the fonts. I’ve tried and it works this way as well.

Objective

• Learn about the properties that can be used in the generic object that you pass in to the MaterialsList constructor.
• Learn how to use a movieclip as a material through its linkage id using MovieAssetMaterial.

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 is a pretty simple tutorial, which basically elaborates more on the MaterialsList class, and in combination with the MovieAssetMaterial, creates a custom skinned cube.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private function init3D ():void
{
	// VIEWPORT
	viewport = new Viewport3D( 0, 0, true, false );
	addChild( viewport );
	//
	// RENDERER
	renderer = new BasicRenderEngine();
	//
	// SCENE
	scene = new Scene3D();
	//
	// CAMERA
	camera = new Camera3D();
	camera.zoom = 11;
	camera.focus = 100;
}

This function is generally similar with what we had in the previous tutorial, except for lines 15-16. What they do makes the cube in the scene look the same size as the movieclips that we have in the library.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private function createCube():void
{
	var materials:MaterialsList = new MaterialsList(
	{
		front: new MovieAssetMaterial( "front" ),
		back: new MovieAssetMaterial( "back" ),
		right: new MovieAssetMaterial( "right" ),
		left: new MovieAssetMaterial( "left" ),
		top: new MovieAssetMaterial( "top" ),
		bottom: new MovieAssetMaterial( "bottom" )
	} );
	//
	cube = new Cube( materials, 100, 100, 100, 10, 10, 10 );
	//
	scene.addChild( cube );
}

The first thing that you might notice that’s different will be the other properties of the generic object that we are passing into the MaterialsList constructor. Instead of the all property, we now describe each side of the cube using front, back, right, left, top and bottom properties.

With the ability to describe each side of the cube, we can now assign different materials to them, which is exactly what we have done. Each side is now an instance of the MovieAssetMaterial class, and pulls the movieclip that is residing in our library via their linkage id.

In line 13 where we create the cube, we are also inputting several additional parameters than before. We pass in "100" for the three subsequent parameters after "materials" to describe the width, depth and height of the cube respectively. Just in case you haven’t notice, the reason why we pass in "100", and not some other number, is because the movieclips that we are going to use as materials are 100×100.

To increase the rendering quality of our cube, we pass in "10" for the next three subsequent parameters, rather than taking the default value of "1".

Final Note

If you want your materials to be animated, simply change this:

new MovieAssetMaterial( "bottom" )

to this:

new MovieAssetMaterial( "bottom", false, true )

The third parameter allows animated movieclips to play. You can check out this example that I whipped up.