Papervision3D 2.0 The Great White from the ground up

In this article you’ll learn about some basic functionality with the latest version of Papervision3D. After reading and understanding this article whith it’s examples you should be able to build something like the following simple example.

However I used Papervision3D 1.5 myself for some commercial projects, I haven’t used The Great White so far. This means the examples you’ll see also mean they’re my first tryouts:-)

When you start a papervision3D project you’ll need at least 6 objects. Since this might be a little confusing I tried to visualize the objects you’ll need.

• Scene3D
  This is the whole composition containing 3D objects, camera’s and viewports. interactive is an important property here.
• Viewport3D
  This is a container sprite used to visually output what is filmed by the camera and rendered with a renderEngine
• Camera3D
  This is the point of view inside the 3D environment.
• 3D object
  This one should speak for itself.
• Material
  This is the texture printed on an object. Some important properties are doublesided, animated and interactive
• RenderEngine
  I compared it here with a filmroll, simply because they cause the same. Without the filmroll rolling you won’t see any (new) images and without a renderEngine rendering the scene, you won’t see any (new) images too.

After understanding the above, it’s time to write some code. To keep it simple I wrote the example below just for usage in Flash. At the end of this article you’ll find a download link with more advanced examples using flex.

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

//First of all we need to create a scene
var scene:Scene3D = new Scene3D();

//Next we need a viewport container to visualize what's going to be rendered. In this exampe I'll give it the size of the stage.
var viewport:Viewport3D=new Viewport3D(stage.stageWidth,stage.stageHeight);
//Add the viewport to the stage. In fact it is an extended sprite.
addChild(viewport);

//Now we need a camera in the 3D environment.
var camera:Camera3D = new Camera3D();
//I'll recommend to place the camera at some distance, else you'll probably end up inside an object
camera.z=-300;

//Before creating a 3D object, we first need to have a material to print on it.
//In this example I'll use the most basic materialtype.
var planeMat:ColorMaterial = new ColorMaterial(0x00CCFF);
//Make material doubleSided, so you will see it on different sides of an object
planeMat.doubleSided=true;

//It's time to add a 3D object to the scene! In this example I'll use the most basic object: Plane
//We make it here 400x300px with 5 horizontal, as wel as 5 vertical segments.
//The more segments the better the object is displayed, but the heavier it will become for your CPU to render
var objectPlane:Plane = new Plane(planeMat, 400, 300,5,5);
//Now we need to add the created object to the scene.
scene.addChild(objectPlane);
//Once we have an object we can tell the camera what it's target is to focus at
camera.target=objectPlane;

//We need to have a renderEngine to render everything
var renderer:BasicRenderEngine = new BasicRenderEngine();
//The only thing left to do is render the whole scene
//Tell the renderEngine which scene to render, using which camera and outputting to which viewport
renderer.renderScene(scene, camera, viewport);

//Now add an eventListener to rotate and have some 3D fun
addEventListener(Event.ENTER_FRAME,loop3d);

function loop3d(evt:Event):void{
	//Rotate the created 3D object depending on mouseX and mouseY
	objectPlane.rotationY=( (mouseX-(stage.stageWidth /2) ) * 360 ) / stage.stageWidth;
	objectPlane.rotationX=( (mouseY-(stage.stageWidth/2) ) * 360 ) / stage.stageWidth;

	//As mentioned before, you'll need to render before you'll see any changes
	renderer.renderScene(scene, camera, viewport);
}

There you go, this is your first papervision3D application! It might looks like a lot of code, but remember there are a lot of comments here to make you understand what’s happening.

So once you think all the above is clear to you, you can start experimenting with all of it’s cool features. To help you understand it a bit more I’ve put some examples (build in Flex) together, which might help you on your way to become a Papervision expert. These examples includes a basic plane with a bitmap material, a plane with a timeline animation as material, an interactive plane with MouseEvent listeners and finally the example which is shown on top of this page.

You can download the examples here

If you have any questions about these examples, please leave a message here and I might help you out!