Home » ActionScript 3.0, Papervision

3D Cube Gallery AS3+Papervision

5 December 2008 2 Comments
Share on Facebook

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;

Here,
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})
 ,250,250,250,10,10,10);
scene.addChild( cube );

MaterialList is a list of materials, we are passing front, left, right, back only bcoz we do not 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 in Fla file:

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

Rotation using tweener:

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

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

Conclusion:


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.

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • robert

    hi, nice little gallery and thanks for the source. Would it be possible to load more than 4 images? After the 4th image has been shown to keep loading new images as it rotates?

  • callens

    Hi,

    I’m looking after a solution in the same way. The only difference is I’d like to be in the cube… to see the pictures. Do you have an idea how I have to do ?
    thanks,
    best regards,
    anais