Wednesday, February 17, 2010

360 degree Viewer

Sample Application showing the 360 degree view of an image using paper vision 3d.

Demo here

360view

Source code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                xmlns:view="org.papervision3d.view.*" creationComplete="init();"
                width="622" height="504"
                backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #DEDEDE]">
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import org.papervision3d.objects.primitives.Cylinder;
            import org.papervision3d.materials.BitmapFileMaterial;
            private var cylinder:Cylinder;
            //Initialization function
            private function init():void{
                // BasicView added to the Stage
                myUI.addChild( bv );
                bv.cameraAsCamera3D.x = 0;
                bv.cameraAsCamera3D.z = 0;
                bv.cameraAsCamera3D.y = 0;
                //Create object
                var mat:BitmapFileMaterial = new BitmapFileMaterial("DSC00020.jpg",true);
                mat.doubleSided = true;
                mat.precise = true;
                mat.smooth = true;
                cylinder = new Cylinder( mat , 80 , 100 , 100 , 100 , 80 , false , false );
                bv.scene.addChild( cylinder );
                //Rendering bv.startRendering();
                this.addEventListener(Event.ENTER_FRAME , onTimer );
            }
            //Rendering
            private function onTimer( e:Event ):void{
                bv.renderer.renderScene( bv.scene , bv.camera , bv.viewport );
                cylinder.rotationY += (myUI.width - myUI.mouseX )/ 100;
            }
            private function onClick(e:ItemClickEvent):void{
                cylinder.rotationY = e.item.angle;
            }
        ]]>
    </mx:Script>
    <view:BasicView id="bv"/>
    <mx:UIComponent id="myUI" width="300" height="300"/>
    <mx:LinkBar id="link" x="263.5" y="6" labelField="label" itemClick="onClick(event)">
        <mx:Object label="a" angle="0"/>
        <mx:Object label="b" angle="90"/>
        <mx:Object label="c" angle="180"/>
        <mx:Object label="d" angle="270"/>
    </mx:LinkBar>
    <mx:Label x="280.5" y="476" text="360 Video"/>
</mx:Application>