Papervion 3D have full filled the dream of Flash developers, to create graphics in 3D space. Now its posible with Flash player 10.

There are number of projects built using papervion 3D thats spread across the web.

I like to showcase, some of the papervison 3D gallery with source here

publicreative:

http://lab.publicreative.com/2009/01/pv3d-page-flip-with-as3dmod-and-effects/

designscripting:

http://www.designscripting.com/2008/12/05/3d-cube-gallery-as3-papervision/

f6design:

http://f6design.com/journal/2007/07/30/papervision-3d/

flashmoto:

http://www.flashmoto.com/blog/flash-galleries/papervision3d-flash-gallery-tutorial/

These galleries are inspirational designs of how to use paperviosion3D.

Click to download papervision3D classes

But due to un avoidable reasons i could not done it on time … So here i am giving the free files sure with in some days i will publish the source and Admin page in my web site to fetch images from flicker and creating itune gallery..

Â

Â

Here i am publishing the files requires to launch Itune Gallery..

 The gallery is fully configurable… this includes the Passing Image URls, rotation, distance between the images, background color..

Write the new features need to be added.. i will try my best to add before the source release..

Cheers..

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 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

Rotation:

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.

Â