LABS | VIZAR

Moin,moin

influenced by the one an only Lee Brimelow , who made a demo using the Great White Repository of Papervision 2.0, in which he gave interactivity for MovieClips, i tried to make the same with a Flex based application. It`s not that easy, than it is in a Flash based app, but the good thing, when using the Flex Framework, that everything works, when you understand the core functionality. So that line is the magic for creating a silly cube with Papervision

var cube_right:DisplayObject = new Images.skyline() as DisplayObject;
cube_right.name = "right";

That is the same approach when using a MovieClip with the Flash IDE. But in Flex you have to cast an embedded image as a DisplayObject for the sake of interactivity.

Check out the app

Check out the Source

UPDATED VERSION WILL BE FOUND HERE

Here is the code of PaperCube.as

package net.borishorn.pv3d {
import caurina.transitions.Tweener;import flash.display.DisplayObject;
import flash.events.*;

import mx.core.UIComponent;

import net.borishorn.assets.images.Images;

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

public class PaperCube extends UIComponent
{
private var viewport:Viewport3D;
private var renderer:BasicRenderEngine;
private var scene:Scene3D;
private var camera:Camera3D;

private var top:MovieMaterial;
private var bottom:MovieMaterial;
private var right:MovieMaterial;
private var left:MovieMaterial;
private var front:MovieMaterial;
private var back:MovieMaterial;

private var cube:Cube;

public function PaperCube()
{
super();

createViewport();
createRenderer();
createScene3D();
createCamera3D();
createMaterials();
createCube();

addToStageHandler();

}

private function addToStageHandler():void
{
addEventListener(Event.ADDED_TO_STAGE, setListeners);

}

private function createViewport():void
{

viewport = new Viewport3D(0, 0, true, true);
addChild(viewport);
viewport.buttonMode = true;
viewport.addEventListener(MouseEvent.MOUSE_OUT, setListeners);
viewport.name = "cubeVP";

}

private function createRenderer():void
{

renderer = new BasicRenderEngine();

}

private function createScene3D():void
{

scene = new Scene3D();
}

private function createCamera3D():void
{

camera = new Camera3D();
camera.zoom = 44;
camera.focus = 100;
}

private function createMaterials():void
{

var cube_front:DisplayObject = new Images.animated() as DisplayObject;
cube_front.name = "front";

var cube_back:DisplayObject = new Images.boris() as DisplayObject;
cube_back.name = "back";

var cube_top:DisplayObject = new Images.jesus() as DisplayObject;
cube_top.name = "top";

var cube_bottom:DisplayObject = new Images.hafen() as DisplayObject;
cube_bottom.name = "bottom";

var cube_left:DisplayObject = new Images.amsterdam() as DisplayObject;
cube_left.name = "left";

var cube_right:DisplayObject = new Images.skyline() as DisplayObject;
cube_right.name = "right";

top =  new MovieMaterial(cube_top,true,true);
top.interactive = true;
top.name = "top";
top.smooth = true;

back =  new MovieMaterial(cube_back,true,true);
back.interactive = true;
back.name = "back";
back.smooth = true;

front =  new MovieMaterial(cube_front,true,true);
front.interactive = true;
front.name = "front";
front.smooth = true;

bottom =  new MovieMaterial(cube_bottom,true,true);
bottom.interactive = true;
bottom.name = "bottom";
bottom.smooth = true;

left =  new MovieMaterial(cube_left,true,true);
left.interactive = true;
left.name = "left";
left.smooth = true;

right =  new MovieMaterial(cube_right,true,true);
right.interactive = true;
right.name = "right";
right.smooth = true;

cube_front.addEventListener(MouseEvent.CLICK, gotoLink);
cube_back.addEventListener(MouseEvent.CLICK, gotoLink);
cube_top.addEventListener(MouseEvent.CLICK, gotoLink);
cube_bottom.addEventListener(MouseEvent.CLICK, gotoLink);
cube_left.addEventListener(MouseEvent.CLICK, gotoLink);
cube_right.addEventListener(MouseEvent.CLICK, gotoLink);
}

private function gotoLink(e:Event):void
{
trace("clicke" + e.target.name);
switch(e.target.name)
{
case "top":

trace(top.movie);
Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "back":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "bottom":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "front":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "right":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "left":

Tweener.addTween(cube, {rotationY:360, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;

}

trace(e.target.name);

}

private function createCube():void
{

cube = new Cube(new MaterialsList({top:top,
bottom:bottom,
left:left,
right:right,
front:front,
back:back }),
400, 400, 400, 10, 10, 10);

scene.addChild(cube);

}

private function setListeners(e:Event):void
{
Tweener.addTween(camera, {zoom:8, time:1, transition:"easeOutBack"});
stage.addEventListener(Event.ENTER_FRAME, loop);

}

private function removeListeners():void
{

stage.removeEventListener(Event.ENTER_FRAME, loop);
}

private function loop(e:Event):void
{

var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;

cube.rotationY += xDist* 0.05;
cube.rotationX += yDist* 0.05;

renderer.renderScene(scene, camera, viewport);
}

}
}