Monday, August 25, 2008

Papervision Practice - Transition Effect in 3D...

I've been messing around with the new Papervision the past couple days. It seems to still have a couple of bugs but overall is pretty good so far. There is also some extensive documentation now. I posted a couple of days ago a cool transition effect. I thought it would be good practice to port this over to 3D. It was fairly easy, had some hang ups with the materials, but after reading through them and looking up some tutorials, it was a piece of cake. Only problem i am having now is that I can't seem to make it interactive. I followed what you are supposed to do but it's not working for me. So to see the effect over again, You have to refresh.











[kml_flashembed movie="http://blog.kreativeking.com/downloads/examples/transitions/transitionEffect.swf" height="400" width="550" /]


Here is the Code:




package {

import flash.display.Sprite;
import flash.events.Event;

import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;

public class PaperBase extends Sprite {

public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;
public var default_scene:Scene3D;
public var default_camera:Camera3D;

public function init(vpWidth:Number = 550, vpHeight:Number = 400):void {
initPapervision(vpWidth, vpHeight);
init3d();
init2d();
initEvents();
}

protected function initPapervision(vpWidth:Number, vpHeight:Number):void {
viewport = new Viewport3D(vpWidth, vpHeight, true, true);
addChild(viewport);
renderer = new BasicRenderEngine();
default_scene = new Scene3D();
default_camera = new Camera3D();
}

protected function init3d():void {

}

protected function init2d():void {

}

protected function initEvents():void {
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

protected function processFrame():void {
// Process any movement or animation here.
}

protected function onEnterFrame( ThisEvent:Event ):void {
processFrame();
renderer.renderScene(default_scene, default_camera, viewport);
}

}

}


Heres the PaperBase Code




package
{
import com.clementegomez.PaperBase;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MovieAssetMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.primitives.PaperPlane;
import org.papervision3d.objects.primitives.Plane;
import gs.TweenLite;
import fl.motion.easing.*;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.view.layer.ViewportLayer;

public class DocClass extends PaperBase
{
public var plane:Cube;
public var material1:ColorMaterial;
public var material2:ColorMaterial;
public var materialList:MaterialsList;
public var angle:Number = 0;
public var speed:Number = .1;
public var radius:Number = 200;
public var Xrotate:Number = 1;
public var Yrotate:Number = 1;
public var cSpeed:Number = .05
//public var default_camera:Camera3D;


public function DocClass()
{
init();
}

override protected function init3d():void
{
material1 = new ColorMaterial(0xEF0038, 1, true);
material1.doubleSided = true;
material2 = new ColorMaterial(0x3399ff, 1, true);
material2.doubleSided = true;
materialList = new MaterialsList();
materialList.addMaterial(material1, "front");
materialList.addMaterial(material2, "back");
materialList.addMaterial(material1, "bottom");
materialList.addMaterial(material2, "top");
materialList.addMaterial(material2, "left");
materialList.addMaterial(material2, "right");
default_camera.x = 400;

plane = new Cube(materialList, 20, 30, 20);
plane.useOwnContainer = true;
default_scene.addChild(plane);

drawTiles();

}

/*override protected function processFrame():void
{
//default_camera.orbit(Yrotate, Xrotate, false, plane);
//plane.y = 700 + Math.cos(angle) * radius;
//plane.x = Math.sin(angle) * radius;
//TweenLite.to(plane, 3, { alpha:0 } );
//angle += speed;
//Xrotate += cSpeed;
//default_camera.orbit((mouseY / stage.stageHeight), (-mouseX / stage.stageWidth), false);

}*/

public function drawTiles():void
{
var sw:int = stage.stageWidth;
var sh:int = stage.stageHeight;

var nx:int = Math.ceil(sw/30);
var ny:int = Math.ceil(sh/30);

for(var a:int = 0; a for(var b:int = 0; b plane = new Cube(materialList, 40, 40, 40);
plane.useOwnContainer = true;

plane.x = b*30;
plane.y = a*30;
plane.alpha = 0;

default_scene.addChild(plane);

TweenLite.to(plane, .5, {alpha:1, ease:Quadratic.easeOut, delay:((b*2+a)*.01)});
}
}
default_camera.orbit(1, 2, false);
default_camera.z = 550;
}
}
}

No comments:

Post a Comment