A Baby Step Tutorial: Creating A PV3D Cube



Create A PV3D Cube Screenshot

Objective

  • To learn the basics of setting up the essentials in a PV3D project.
  • To create a cube!

Files Required

Let’s Get Started!

Once you’ve downloaded and unzipped the files, open up Main.as. I’m going to skip over the rather generic* parts and start with the core* stuff. ;)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
}

In this function, what we have done is basically creating the essentials:

  • viewport - The place where things are rendered onto and are visible for you to see. Before PV3D 2.0, a Sprite is commonly used. Remember to add this into the display list if not you will not be able to see anything!
  • renderer - Also new in PV3D 2.0, what it does is as what its name implies, to render the scene.
  • scene - Finally something familiar. :D This is the place where it contains our objects. Think of it like a MovieClip, a place where we put our assets. Of course, this is also the place where we’ll be adding the cube later.
  • camera - The view point where you are viewing the scene. Imagine in a show, where the director is holding the camera, shooting the scene. The camera will move to where it is most interesting to capture and bring the most interesting content. :P We will not be touching on moving the camera in this tutorial; however a stationary camera is still needed to capture the content.
1
2
3
4
5
6
7
8
9
10
11
private function createCube():void
{
	var materials:MaterialsList = new MaterialsList(
	{
		all: new WireframeMaterial( 0x00FF00, 1 )
	} );
	//
	cube = new Cube( materials );
	//
	scene.addChild( cube );
}

We can’t possibly have a naked cube, because it will be too shy to show itself! :P To convince our cube to show up, we need to cover it with a MaterialsList populated with the desired materials. For simplicity, I’ve chosen the WireframeMaterial.

By specifying the all property in the generic object that we are passing into the MaterialsList constructor, whatever primitives that uses this MaterialsList will be using the WireframeMaterial that we declared.

In line 8, we create the cube and add it into the scene in line 10.

1
2
3
4
private function addEventListeners ():void
{
	addEventListener( Event.ENTER_FRAME, __onEnterFrame );
}

Of course, to play with our cube, we need an enter frame event. Its counterpart, removeEventListeners, is there just out of good coding practice. ;)

1
2
3
4
5
6
7
private function __onEnterFrame ( e:Event ):void
{
	cube.rotationY = viewport.mouseX / 2;
	cube.rotationX = viewport.mouseY / 2;
	//
	renderer.renderScene( scene, camera, viewport );
}

After we updated the cube’s rotation, we’ll render the scene using the renderer. In layman terms, the scene is being shot with the camera, and the captured image is drawn onto the viewport, with the renderer to help us with the process.

Final Note

If you’ve followed my folder structure, you can now compile and see things running for yourself. What better way to learn than to pick the stuff apart and test a few things around yourself! Don’t stop experimenting! :D

AddThis Social Bookmark Button


No Comment to “A Baby Step Tutorial: Creating A PV3D Cube”


rss Comments RSS
trackback Trackback

No comments yet

Leave a reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">