Home » ActionScript 3.0, Papervision

3D Cube Gallery –AS3+Papervision

5 December 2008 23 Comments

After inspired by the 3D Cube tutorial in theflashblog.com, I created this tutorial.

Tutorial Difficulty level: Basic – intermediate. Even beginners can use this tutorial to create the same effect.
In this tutorial we are Papervision2.0 for creating 3D Cube and Tweener class creating smooth animation.

Setting the Files:
Download Links for Papervision 2.0 and Tweener Class for AS3. Extract the files to same folder.

Here is the folder structure I used.

Create a new Flash file and save it in the same folder where we extracted the Tweener and papervision 3d files. Here I have used 3DCube.fla

Download and extract the source files for reference.


Code Explanation
Necessary Imports:

First we are importing the papervision 3d class files. We can also make this as basic code snippet for papervision3d imports.

import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.lights.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.events.*;
import org.papervision3d.core.utils.*;
import org.papervision3d.core.utils.virtualmouse.VirtualMouse

Second importing the tweener class files

import caurina.transitions.Tweener;

Viewport3D is the container for 3Dscene in papervision3.0.
We are going to create an object for the Class.

var viewport:Viewport3D = new Viewport3D( 0,0,true,true );
addChild( viewport );
viewport.buttonMode = true;

Here the parameters are height, width , scale the viewport to stage size, interactive scene.
Adding the viewport object to display list which will render the object on scene.
To make the viewport clickable viewport.buttonMode = true;

Next step is to create RenderEngine that renders the scene, Scene3D, Camera3D.

var renderer:BasicRenderEngine = new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
camera.zoom = 11;
camera.focus = 100;

Here camera.zoom = 11; and camera.focus = 100; makes the objects to scale exact size as they appear on stage.

Creating materials:
Materials we used are movieclips that’s present in the library, so we are using MovieMaterial class to create materials.

var material1:MovieMaterial = new MovieMaterial(side1);
material1.interactive = true;
material1.animated = true;
material1.smooth = true;

Interactive property is to make the material listen to mouse events.
Animated property to make sure material is animater movieclip.
Smooth property to set antialiasing property to movieclip.

Here we have four movieclips with instance name side1, side2, side3, side4.We are creating four materials.

Creating Geometry:
Now we need geometry to apply materials. We are creating 3D Cube to apply the materials created.

var cube:Cube = new Cube(new MaterialsList({front:material1,left:material2,right:material3,back:material4})
scene.addChild( cube );

MaterialList is a list of materials, we are passing front, left, right, back only bcoz we don’t have bottom and top here. If your project needs we need to add that too.

Width = depth = height = 250
Number of triangles on each side = 10; more triangles more accurate dimension and lesser performance.

Then we are adding the cube to scene.

Rendering Scene:

addEventListener(Event.ENTER_FRAME, renderEngine )
function renderEngine( e:Event ){
 renderer.renderScene( scene, camera, viewport );

We are creating enterframe event to render our scene continuosly.

In papervision2.0, we are using the renderer.renderScene method it takes which scene to render, which camera, and viewport.

Button Code:

next_mc.addEventListener( MouseEvent.CLICK, moveNextSide);
prev_mc.addEventListener( MouseEvent.CLICK, movePrevSide);
next_mc.buttonMode = true;
prev_mc.buttonMode = true;

Moviclip. buttonMode gives hand cursor to movieclip


Tweener.addTween(cube, {rotationY:newY, time:1, transition:"easeoutexpo"});

Tweener code is to add smooth tween, here we are rotating in Y direction.


So we finished creating 3D cube gallery with Papervision3D. If you are beginner download the source code for reference. In case of experienced person use it right away.

Next version will be loading images dynamically and creating the 3D Cube.


  • Share/Bookmark

Related posts:

  1. Best Papervision 3D gallery With source
  2. Free Itune Gallery+ Papervision 3D
  3. Fader API:Slideshow with MovieClips on stage
  4. ReleaseOutside Event in AS3:
  5. XMLManager in ActionScript 3.0

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading ... Loading ...

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

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>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.