ちょいとPaperVision3Dで作品を作ってみました。
ちょいとPaperVision3Dで作品を作ってみました。
こんな感じ
http://moeten.info/maidcafe/?m=flash&type=shoppv3d
ソースはこちら↓（ちょっと長い）
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="1" backgroundColor="0x000000" backgroundGradientAlphas="[1,1]" backgroundGradientColors="[0xcccccc,0x000000]" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import gs.TweenLite; [Bindable]private var server:String = "moeten.info"; [Bindable]private var site:String = "maidcafe"; //初期化関数 private function init():void{ // hts.send({"tid":13}); htsTid.send({"tid":"list"}); htsCid.send({"cid":"list", "tid":13 }); pBar.visible = true; } private function onTidChange():void{ htsCid.send({ "tid":tidBox.selectedItem.tid, "cid":"list" }); hts.send({"tid":tidBox.selectedItem.tid}); pBar.visible = true; } private function onCidChange():void{ pBar.visible = true; hts.send({ "tid":tidBox.selectedItem.tid, "cid":cidBox.selectedItem.cid }); } //HTTP結果イベント private function onTidResult():void{ showCidBox.play([tidBox]); pBar.visible = false; var len:int = htsTid.lastResult.item.length(); for( var i:int = 0 ; i < len ; i ++ ){ trace( htsTid.lastResult.item[i].tid ); if( htsTid.lastResult.item[i].tid == 13 ){ tidBox.selectedIndex = i; return; } } return; } private function onCidResult():void{ showCidBox.play([cidBox]); pBar.visible = false; } private function onResult():void{ init3D(); pBar.visible = false; } //フルスクリーン private function setFullscreen():void{ switch(stage.displayState) { case "normal": stage.displayState = StageDisplayState.FULL_SCREEN; break; case "fullScreen": default: stage.displayState = "normal"; break; } } /* ********************************** PV3D ********************************** */ import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.core.utils.Mouse3D; import org.papervision3d.core.effects.utils.BitmapDrawCommand; import org.papervision3d.core.effects.BitmapColorEffect; import org.papervision3d.core.material.TriangleMaterial; import org.papervision3d.core.effects.BitmapLayerEffect; import org.papervision3d.core.effects.utils.BitmapClearMode; import org.papervision3d.view.layer.BitmapEffectLayer; import org.papervision3d.view.Viewport3D; import org.papervision3d.materials.BitmapColorMaterial; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.materials.BitmapFileMaterial; private var scene : Scene3D; private var viewport : Viewport3D; private var renderer : BasicRenderEngine; private var camera : Camera3D; private var cameraTarget : DisplayObject3D; //初期化 private function init3D():void{ Mouse3D.enabled = true; setupScene(); setupCamera(); setupPlane(); setupListeners(); } //シーンの作成 private var bfx:BitmapEffectLayer; private function setupScene():void{ //ビューポートの作成 viewport = new Viewport3D( myUI.width , myUI.height , true , true , true , true ); if( myUI.numChildren )myUI.removeChildAt(0); myUI.addChildAt(viewport , 0 ); renderer = new BasicRenderEngine(); scene = new Scene3D(); } //カメラ設定 private function setupCamera():void{ cameraTarget = new DisplayObject3D(); camera = new Camera3D(); camera.z = - 1000; camera.y = 10; } //イベントリスナー設定 private function setupListeners():void{ addEventListener(Event.ENTER_FRAME, onRenderTick); addEventListener(Event.RESIZE, onResize); } //オブジェクト作成 import mx.effects.easing.*; private var pArr:Array = new Array(); private var do3dArr:Array = new Array(); private function setupPlane():void{ pArr = new Array(); do3dArr = new Array(); var len:int = hts.lastResult.item.length(); for( var i:int = 0 ; i < len ; i ++ ){ var mat:BitmapFileMaterial = new BitmapFileMaterial( hts.lastResult.item[i].image.image1 ); mat.doubleSided = true; var p:Plane = new Plane( mat , 100 , 100 ); p.material.interactive = true; p.yaw( 90 ); p.pitch(180); p.x = i%len/5 * 10 + 400; p.name = "" + i; p.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK , clickObj ); pArr[i] = p; var do3d:DisplayObject3D = new DisplayObject3D(); do3d.addChild( p ); do3d.rotationX = Math.random() * 360; do3d.rotationZ = Math.random() * 360; do3d.rotationY = Math.random() * 360; do3dArr[i] = do3d; scene.addChild( do3d ); } } //クリックイベント private var nowid:int = -1; private function clickObj (e:InteractiveScene3DEvent):void { camera.localRotationX = camera.rotationX + 100; camera.localRotationY = camera.rotationY + 100; camera.localRotationZ = camera.rotationZ + 100; var p:Plane = e.displayObject3D as Plane; var a:Mouse3D = viewport.interactiveSceneManager.mouse3D; var i:int = int( p.name ); if( nowid == i ){ TweenLite.to( camera , 2 , { x:100, y:100, z:-1000, ease:Back.easeOut }); nowid = -1; }else{ nowid = i ; TweenLite.killTweensOf( do3dArr[i] ); TweenLite.to( camera , 2 , { x:p.sceneX *1.2, y:p.sceneY *1.2, z:p.sceneZ *1.2, onComplete:function():void{ dg.dataProvider = hts.lastResult.item[ i ]; dg.visible = true; } }); } } //dg2からのアイテムクリック private function onItemClick():void{ var p:Plane = pArr[dg2.selectedIndex] as Plane; nowid = dg2.selectedIndex ; TweenLite.killTweensOf( do3dArr[dg2.selectedIndex] ); TweenLite.to( camera , 2 , { x:p.sceneX *1.2, y:p.sceneY *1.2, z:p.sceneZ *1.2, onComplete:function():void{ dg.dataProvider = hts.lastResult.item[dg2.selectedIndex]; dg.visible = true; } }); } //レンダリング＋マウス操作 protected function onRenderTick(e:Event):void { var reach:Number = 0.01; var ease:Number = 0.01; var cameraDistance:Number = 1200; if( nowid == -1 ){ camera.x += (Math.sin(mouseX * reach) * cameraDistance - camera.x) * ease* 0.5; // camera.z += (Math.cos(mouseX * reach) * - cameraDistance - camera.z) * ease * 0.1; // camera.y += (Math.sin(mouseY * reach) * cameraDistance - camera.y) * ease* 0.5; } camera.lookAt(cameraTarget); //Tweenerでうねうね var len:int = do3dArr.length; for( var i:int = 0 ; i < len ; i ++ ){ if( !TweenLite.isTweening( do3dArr[i] ) && i != nowid ){ TweenLite.to( do3dArr[i] , 4 , { delay:Math.random()*4, rotationX:do3dArr[i].rotationX+Math.random()*30, rotationY:do3dArr[i].rotationY+Math.random()*30, rotationZ:do3dArr[i].rotationZ+Math.random()*30, ease:Back.easeOut }); } } //レンダリング renderer.renderScene(scene, camera, viewport); } //リサイズイベント private function onResize(e : Event) : void { } ]]> </mx:Script> <mx:HTTPService id="hts" url="{'http://'+server+'/'+site+'/?m=api&type=shop'}" resultFormat="e4x" result="onResult()"/> <mx:HTTPService id="htsTid" url="{'http://'+server+'/'+site+'/?m=api&type=shop'}" resultFormat="e4x" result="onTidResult()"/> <mx:HTTPService id="htsCid" url="{'http://'+server+'/'+site+'/?m=api&type=shop'}" resultFormat="e4x" result="onCidResult()"/> <mx:Sequence id="showCidBox"> <mx:WipeRight/> <mx:Glow alphaFrom="1" alphaTo="0" blurXFrom="20" blurYFrom="20" blurXTo="0" blurYTo="0" color="0xffffff"/> </mx:Sequence> <mx:GlowFilter id="gf" blurX="20" blurY="20" color="0xffffff" /> <mx:UIComponent id="myUI" width="100%" height="100%" /> <mx:ProgressBar themeColor="#666666" indeterminate="true" id="pBar" label="" trackHeight="10" width="100%" visible="false"/> <mx:ComboBox id="tidBox" x="20" y="26" width="142" prompt="都道府県" rowCount="10" dataProvider="{htsTid.lastResult.item}" labelField="todouhuken" change="onTidChange()" /> <mx:ComboBox id="cidBox" x="170" y="26" width="150" prompt="カテゴリー" rowCount="10" dataProvider="{htsCid.lastResult.item}" labelField="category" change="onCidChange()" /> <mx:TileList id="dg" x="52" y="56" width="300" height="500" cornerRadius="5" borderColor="0xcccccc" borderStyle="solid" borderThickness="3" backgroundAlpha="0.5" itemRenderer="shopDetail" rowCount="1" columnCount="1" verticalScrollPolicy="off" horizontalScrollPolicy="off" selectable="false" left="20" /> <mx:TileList id="dg2" y="56" width="140" height="500" itemClick="onItemClick()" cornerRadius="5" borderColor="0xcccccc" borderStyle="solid" borderThickness="3" backgroundAlpha="0.5" itemRenderer="shopList" rowCount="10" columnCount="1" dataProvider="{hts.lastResult.item}" right="20" /> <mx:LinkButton x="731" y="26" label="フルスクリーン" right="20" click="setFullscreen()"/> </mx:Application>
