This is getting a little off topic since there is no use of Papervision. This is something we were messing with over at Woven.
Just wanted to write a quick post with some things we are messing with at Woven Interactive. Be sure to follow the steps outlined in the example.
FLARToolkit has opened the doors for creating some amazing things.
Feel free to share your ideas / thoughts here.
DOWNLOAD AND PRINT THIS FIRST!
Example requires a webcam.
When we first saw the GE Smart Grid website all we could think was WOW. Great 3D and messaging. Seeing the Augmented Reality section that mixed the FLARToolkit and Papervision really created something unique.
We found a few examples of people playing with it online but no real amounts of source code. Also did not know the HIRO file format was. It turns out you don't need a *.hiro file, you can swap it out with a *.pat file. There is even an online ARToolKit Maker Generator that is quick and easy to use.
Onto the source code:
This is a modified example taken from the provided example source code (The hello world of the FLARToolKit):
Actionscript:
-
package net.saqoosha.flartoolkit.example {
-
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import org.papervision3d.objects.DisplayObject3D;
-
import flash.events.Event;
-
import flash.events.MouseEvent;
-
import org.papervision3d.core.proto.DisplayObjectContainer3D;
-
import org.papervision3d.objects.primitives.Sphere;
-
-
import org.papervision3d.lights.PointLight3D;
-
import org.papervision3d.materials.WireframeMaterial;
-
import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
-
import org.papervision3d.materials.utils.MaterialsList;
-
import org.papervision3d.objects.primitives.Cube;
-
import org.papervision3d.objects.primitives.Plane;
-
-
-
[SWF(width=700,height=400,frameRate=30,backgroundColor=0x0)]
-
-
public class SimpleCube extends PV3DARApp {
-
-
private static const PATTERN_FILE:String = "resources/marker16.pat";
-
private static const CAMERA_FILE:String = "resources/camera_para.dat";
-
-
protected var plane:Plane;
-
protected var objectsContainer:DisplayObject3D;
-
protected var cube:Cube;
-
protected var sphere:Sphere
-
protected var wovenCube:Cube;
-
protected var imageMat:BitmapFileMaterial;
-
protected var fmat:FlatShadeMaterial;
-
protected var wmat:WireframeMaterial;
-
-
public function SimpleCube()
-
{
-
addEventListener(Event.INIT, onInit);
-
init(CAMERA_FILE, PATTERN_FILE);
-
}
-
-
private function onInit(e:Event):void
-
{
-
removeEventListener(Event.INIT, onInit);
-
-
//Create light source for shade material
-
var light:PointLight3D = new PointLight3D();
-
light.x = 1000;
-
light.y = 1000;
-
light.z = -1000;
-
-
//Create Materials
-
imageMat = new BitmapFileMaterial("resources/woven-logo.jpg", false);
-
fmat = new FlatShadeMaterial(light, 0xFFFFFF, 0x0);
-
wmat = new WireframeMaterial(0xff0000);
-
wmat.doubleSided = true;
-
-
//Create objects
-
objectsContainer = new DisplayObject3D();
-
plane = new Plane(wmat, 100, 100,1,1);
-
wovenCube = new Cube(new MaterialsList( { all: imageMat } ), 150, 150, 150);
-
cube = new Cube(new MaterialsList( { all: fmat } ), 20, 200, 20);
-
sphere = new Sphere(fmat, 20);
-
-
-
//Position elements
-
sphere.y = 200;
-
wovenCube.z += 100;
-
objectsContainer.z += 100;
-
-
//Add objects to my container
-
objectsContainer.addChild(sphere)
-
objectsContainer.addChild(wovenCube)
-
objectsContainer.addChild(cube)
-
-
//Add to base
-
_baseNode.addChild(plane);
-
_baseNode.addChild(objectsContainer);
-
-
}
-
-
override protected function _onEnterFrame(e:Event = null):void
-
{
-
super._onEnterFrame(e);
-
sphere.rotationY += 10;
-
wovenCube.rotationZ += 10;
-
}
-
-
}
-
-
}
As you can see from this line:
Actionscript:
-
private static const PATTERN_FILE:String = "resources/marker16.pat";
We replaced the *.hiro file with a *.pat file.
To get this example to work you will have to DOWNLOAD AND PRINT THIS FIRST!
Download the full source
and / or
View the interactive example.
Learn more about the FLARToolKit
If you or your clients need any help getting started feel free to contact our Interactive Agency.
Here is an example of using a 3ds model in Flash / Papervision with zoom / rotational controls. For the reflection a second viewport was created with the model inside of it and filters applied:
Actionscript:
-
viewPort2.filters = [new BlurFilter()];
Source code will follow in the next few weeks when I am able to clean up the extra garbage.
This pure AS3 tutorial will show you how to make a simple RSS item title visualization using Papervision3D and a couple MinimalComps, HSlider and Knob.
Needed:
RSS Tutorial Source Code
PaperVision3D
MinimalComps
Adobe XML Syndication Library (as3syndicationlib)
First we'll create an RSSConsumer class for retrieving and parsing an RSS feed. This class is a bare-bones utility on which you can add functionality for other projects. For now it'll be used to retrieve an RSS 2.0 feed, but Adobe's syndication library contains a lot more functionality.
Actionscript:
-
package
-
{
-
import com.adobe.xml.syndication.rss.RSS20;
-
import com.adobe.xml.syndication.rss.Channel20;
-
import com.adobe.xml.syndication.rss.Image20;
-
import com.adobe.xml.syndication.rss.Item20;
-
import com.adobe.xml.syndication.rss.Cloud;
-
-
import flash.display.Sprite;
-
import flash.events.Event;
-
import flash.events.IOErrorEvent;
-
import flash.events.SecurityErrorEvent;
-
-
import flash.net.*;
-
-
public class RSSConsumer extends Sprite
-
{
-
public static const ITEMS_RETURNED:String = "items_returned";
-
public static const ERROR:String = "error";
-
-
private var myRSS20:RSS20;
-
-
private var __items:Array = new Array();
-
-
public function RSSConsumer() {}
-
-
public function loadRSS(xmlLink:String=null):void
-
{
-
var xmlLoader:URLLoader = new URLLoader();
-
xmlLoader.addEventListener(Event.COMPLETE, onResult);
-
var urlReq:URLRequest = new URLRequest(xmlLink);
-
xmlLoader.load(urlReq);
-
}
-
-
private function onResult(event:Event):void
-
{
-
var loader:URLLoader = URLLoader(event.target);
-
-
myRSS20 = new RSS20();
-
-
var xmlData:XML = XML(loader.data);
-
myRSS20.populate(xmlData);
-
items = myRSS20.items;
-
-
dispatchEvent(new Event(ITEMS_RETURNED));
-
}
-
-
private function onIOError(event:IOErrorEvent):void
-
{
-
dispatchEvent(new Event(ERROR));
-
}
-
-
private function onSecurityError(event:SecurityErrorEvent):void
-
{
-
dispatchEvent(new Event(ERROR));
-
}
-
-
public function get items():Array { return __items; }
-
public function set items(value:Array):void
-
{
-
__items = value;
-
}
-
}
-
}
Now that we have out items, we can break out Papervision3D and make them scrollable.
Actionscript:
-
package
-
{
-
import gs.TweenMax;
-
import gs.easing.*;
-
-
import com.adobe.xml.syndication.rss.Item20;
-
-
import org.papervision3d.materials.special.Letter3DMaterial;
-
import org.papervision3d.typography.fonts.HelveticaBold;
-
import org.papervision3d.typography.Text3D;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
-
import com.bit101.components.*;
-
-
import flash.display.Sprite;
-
import flash.events.Event;
-
import flash.events.MouseEvent;
-
import flash.events.KeyboardEvent;
-
-
import org.papervision3d.cameras.Camera3D;
-
import org.papervision3d.materials.*;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.render.BasicRenderEngine;
-
import org.papervision3d.scenes.*;
-
import org.papervision3d.view.Viewport3D;
-
import org.papervision3d.view.BasicView;
-
-
[SWF(backgroundColor="#000000",frameRate="40")]
-
public class RSSNav extends Sprite
-
{
-
private var cameraTarget:DisplayObject3D = DisplayObject3D.ZERO;
-
private var myCamera:Camera3D;
-
private var myScene:Scene3D;
-
private var render:BasicRenderEngine;
-
private var view:Viewport3D;
-
private var pivot:DisplayObject3D;
-
private var pv3dStage:Sprite = new Sprite();;
-
private var totalDistance:Number;
-
private var currentItem:Number;
-
private var newZ:Number = 0;
-
private var oldZ:Number;
-
private var increment:Number = 2000;
-
-
// Here's our RSS Consumer
-
private var consumer:RSSConsumer;
-
-
// These are Minimal Comps
-
private var knob:Knob;
-
private var hslider:HSlider;
-
-
private var itemColl:Array;
-
private var rssItemColl:Array;
-
-
public function RSSNav()
-
{
-
createScene();
-
loadRSS();
-
}
-
-
private function createScene():void
-
{
-
myCamera = new Camera3D();
-
myCamera.fov = 35;
-
myCamera.y = 200;
-
-
addChild(pv3dStage);
-
-
view = new Viewport3D(3000, 3000, true, true);
-
view.interactive = true;
-
pv3dStage.addChild(view);
-
-
myScene = new Scene3D();
-
render = new BasicRenderEngine();
-
pivot = new DisplayObject3D();
-
-
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboard);
-
}
-
-
private function loadRSS():void
-
{
-
consumer = new RSSConsumer();
-
consumer.addEventListener(RSSConsumer.ITEMS_RETURNED, onData);
-
consumer.loadRSS("http://www.mikebritton.com/index.xml");
-
}
-
-
private function createNavigation():void
-
{
-
hslider = new HSlider(this);
-
hslider.name = "hslider";
-
hslider.addEventListener(Event.CHANGE, onUpdate);
-
hslider.addEventListener(MouseEvent.CLICK, deselect);
-
hslider.x = (stage.stageWidth/2)-hslider.width/2;
-
hslider.y = stage.stageHeight / 3;
-
hslider.backClick = true;
-
addChild(hslider);
-
-
knob = new Knob(this);
-
knob.name = "knob";
-
knob.setSize(100, 100);
-
knob.addEventListener(Event.CHANGE, onUpdate);
-
knob.addEventListener(MouseEvent.CLICK, deselect);
-
knob.x = (stage.stageWidth/2)-knob.width/2;
-
knob.y = 120;
-
knob.visible = true;
-
addChild(knob);
-
}
-
-
private function deselect(event:MouseEvent):void
-
{
-
for (var i:int = 0; i <itemColl.length; i++) {
-
if (i != currentItem) {
-
InteractiveText3D(itemColl[i]).reveal();
-
}
-
}
-
}
-
-
private function distinguish():void
-
{
-
InteractiveText3D(itemColl[currentItem]).reveal();
-
-
for (var i:int = 0; i 0) {
-
rssItemColl = event.target.items;
-
itemColl = new Array();
-
currentItem = 0;
-
totalDistance = (rssItemColl.length * increment)+1000;
-
-
for (var i:int = 0; i 0) {
-
newZ = (event.target.value * .01) * totalDistance;
-
} else {
-
newZ = 0;
-
}
-
-
var cameraTweenObject:Object = { ease:Quad.easeOut,z:newZ };
-
TweenMax.to(myCamera, 2, cameraTweenObject);
-
-
distinguish();
-
}
-
-
-
private function onKeyboard(event:KeyboardEvent):void
-
{
-
switch (event.keyCode) {
-
case 39: // Right arrow
-
if (currentItem<rssItemColl.length-1)
-
currentItem++;
-
break;
-
case 38: // Up arrow
-
if (currentItem0)
-
currentItem--;
-
break;
-
case 40: // Down arrow
-
if (currentItem>0)
-
currentItem--;
-
break;
-
}
-
hslider.value = ((currentItem * increment) / totalDistance) * 100;
-
}
-
}
-
}
Set RSSNav to compile and give it a shot. As you can see when you preview, you can scroll through the RSS items with Knob, HSlider or the keyboard.
Next time, we'll expand on this idea and have even more fun with Papervision 3D.
