this is portable

I re-worked my white void-esque cubes example a little after catching up on my Papervision3D email list reading. Turns out other people had a different approach that looks a whole lot better which wasn’t exactly a surprise. (Thanks to this thread for the better approach!)  I thought I’d post the update since the first version’s source was pretty popular.

Check out the new version. (It works better in it’s own tab/window.)

I switched things around so now the camera is moving, not the container, and smoothed out the motion with Tweener.

The main new lines of code:
[as]
override protected function onRenderTick(event:Event = null):void
{
var rotX:Number = (stage.mouseX-(stage.stageWidth/2))*(0.5) – 90;
var rotY:Number = (stage.mouseY -(stage.stageHeight/2))*(0.5) +90;

Tweener.addTween(camera,{x:rotX, y:rotY,time:1.5, transition:”easOut”});

camera.target = bigBox;

super.onRenderTick(event);
}

[/as]

I also made some changes so that this will show up properly with the latest GreatWhite build of Papervision3D 2.0. Make sure you update your svn source as the cameras were changed a little. The current source will throw errors on older builds of GreatWhite. (If you don’t feel like updating just change camera.target to camera.lookAt() and adjust the zoom).

Flex Builder source is here (PV3D classes not included, but the Tweener classes are)

I’m a total Flex Builder noob, so if there is a better way to package up Flex Builder projects to share them, let me know in a comment below.

Full code of the CubeCamera class:
[as]
package {
import flash.events.Event;

import caurina.transitions.Tweener;

import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;

public class CubeCamera extends BasicView
{

private var bigBox:Cube;
private var cube1:Cube;
private var cube2:Cube;

private var line1:Plane;
private var line2:Plane;

public function CubeCamera() {
super(1,1,true,true);
initScene();
startRendering();

}

private function initScene():void {

//Set the background
opaqueBackground = 0×000000;

//use this line for visible wireframe on the outter cube
//var wireFrameMaterial:WireframeMaterial = new WireframeMaterial(0×999999, 1, 2);
//use this line for an invisible outter cube
var wireFrameMaterial:WireframeMaterial = new WireframeMaterial(0×999999, 0, 0);
var wml:MaterialsList = new MaterialsList({all:wireFrameMaterial});

//create the main 3D container
bigBox = new Cube(wml, 400,200,400, 3,3,3);

//cube 1
var cubeMaterial:ColorMaterial = new ColorMaterial(0xcecece,1,true);
cubeMaterial.doubleSided = true;
cubeMaterial.interactive = true;
var ml:MaterialsList = new MaterialsList({all:cubeMaterial});

cube1 = new Cube(ml,100,50,100,1,1,1);
bigBox.addChild(cube1);
cube1.x = -100;
cube1.y = 0;
cube1.z = 0;

//cube2
cube2 = new Cube(ml,100,50,100,1,1,1);
bigBox.addChild(cube2);
cube2.x = cube1.x + 200;
cube2.y = 0;
cube2.z = 0;

//add the container object to the stage
scene.addChild(bigBox);
bigBox.visible = true;

//set up the camera
camera.zoom = 100;

//add a plane to show where bigBox zero point is
var lineMaterial:ColorMaterial = new ColorMaterial(0×00ff00,1,false);
line1 = new Plane(lineMaterial, 1,500,1,1);
line2 = new Plane(lineMaterial, 500, 1, 1,1);
bigBox.addChild(line1);
bigBox.addChild(line2);
line1.x = line2.x = 0;
line1.y = line2.y = 0;
}

override protected function onRenderTick(event:Event = null):void
{
var rotX:Number = (stage.mouseX-(stage.stageWidth/2))*(0.5) – 90;
var rotY:Number = (stage.mouseY -(stage.stageHeight/2))*(0.5) +90;

Tweener.addTween(camera,{x:rotX, y:rotY,time:1.5, transition:”easOut”});

camera.target = bigBox;

super.onRenderTick(event);
}

}
}

[/as]

I presented this simple panoramic example at the July PittMFUG meeting last night. The main focus of my presentation was to show how BasicView makes it much easier to start playing with Papervision3D.

See the finished file

This example is based on one of the awesome tutorials on papervision2.com

The source files are posted on the PittMFUG blog, but here’s a little more explaination to go along with them.

The Image(s)

This is a very simple panoramic but it’s still a little tricky to get images that will work properly. For this type of panoramic you’ll need a really long image when the two ends match up. There’s a number of stiching programs out there you can get to do all the hard work for you. Since taking photos for a panoramic is a whole different topic that is far from simple, I’m not going to get into that at all. Instead, I turned to flickr and found this great panoramic image from zanemerva. (thanks!)

Once you have your image, you need to cut it up into four equal pieces for the 4 sides of the cube we’ll be putting the images on. My four images looked like this:

The code

The code is actually pretty simple. Main.as is the document class for pan.fla and basically does nothing more than import the SimplePan class and add an instance of it to the display stack. Nothing fancy. It’s there mostly because I like to re-use it for differnent papervision experiments.

SimplePan.as has all the important stuff and it’s pretty self explanitory with all the comments. The only “trick” to note is that the images are all in the library of the .fla file and have been given linkage ids (pan01, pan02, pan03 and pan04).:

[as]
package
{
/*
Simple Panoramic Example for the PittMFUG July 08 meeting
val | thisisportable.com
*/
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.BitmapAssetMaterial;
import flash.events.*;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;

public class SimplePan extends BasicView
{

public var cubemap:Cube;
public var materials:MaterialsList;

//The Constructor
public function SimplePan() {
super(600,300,true,true); // width, height, scale to stage, interactive, (camera)
initScene();
}

private function initScene():void {

//Start rendering.
startRendering();

//set up the materials list — it looks more complicated than it really is
var pan01:BitmapAssetMaterial = new BitmapAssetMaterial(”pan01″, true);

var pan02:BitmapAssetMaterial = new BitmapAssetMaterial(”pan02″, true);

var pan03:BitmapAssetMaterial = new BitmapAssetMaterial(”pan03″, true);

var pan04:BitmapAssetMaterial = new BitmapAssetMaterial(”pan04″, true)

var col1:ColorMaterial = new ColorMaterial(0×000000, 1, false);

var col2:ColorMaterial = new ColorMaterial(0×000000, 1, false);

materials = new MaterialsList({
front: pan01,
back: pan03,
left: pan04,
right: pan02,
top: col1,
bottom: col2
});

//set up the cube : materials, width, depth, height, segments…, inside faces
cubemap = new Cube(materials, 500, 500, 240, 5, 5, 5, Cube.ALL);

scene.addChild(cubemap);

//set up camera
camera.z = -5; //default is -1000
camera.x = 0;
camera.y = 0;
camera.zoom = 8;

camera.lookAt(cubemap);
}

// this is required when extending BasicView
override protected function onRenderTick(event:Event=null):void
{
cubemap.yaw( -((viewport.mouseX – (stage.stageWidth / 2)) / stage.stageWidth)*4);

super.onRenderTick(event);
}

}
}

[/as]

Grab the source files to take a closer look.