ちょいとpapervision3dで球面に画像を張り付けてみた。
ちょいとpapervision3dで球面に画像を張り付けてみました。って言ってもこちらのサンプルそのまんまです(^^;
作ってみたもの
http://moeten.info/flex/20080925_moetenPV3Dtest/bin-release/main.html
どうやったら球面に平面をうまく配置できるんだろうかって思ってたんだけど、上のサイト(Papervision3Dをやってみた43)ではうまい具合にしかもきれいにできています。
そのやり方ですが、プレーンを作成して作成する円の半径分ずらしてあげてからDisplayObjectにaddchild。
そしてこのDisplayObjectをrotationしてあげればsin,cosを使うことなく簡単に円の中心を向いたプレーンを作成することができます。
プログラムではこの部分
var p:Plane = new Plane( mat , 100 , 100 ); p.x = 600; var do3d:DisplayObject3D = new DisplayObject3D(); do3d.addChild( p ); do3d.rotationX = Math.random() * 360; do3d.rotationZ = Math.random() * 360; do3d.rotationY = Math.random() * 360; scene.addChild( do3d );
これは覚えておいて損はないですね。
あとなんかTweenerがうまく使えなかったのでTweenLiteってなものを使いました。
これすごくいいですね。なにがいいかというとFlashやFlexに最初から搭載されているTweenerのEaseingが使えます。
import mx.effect.easeing.*; TweenLite.to( do3dArr[i] , 2 , { delay:Math.random()*2, rotationX:do3dArr[i].rotationX+Math.random()*30, rotationY:do3dArr[i].rotationY+Math.random()*30, rotationZ:do3dArr[i].rotationZ+Math.random()*30, ease:Elastic.easeOut //←コレ });
参考にさせていただいたページ
ソースは右クリックかこちら↓
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="1" backgroundColor="0x000000" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import org.papervision3d.objects.primitives.Plane; import org.papervision3d.materials.BitmapFileMaterial; import gs.TweenLite; //初期化関数 private function init():void{ // hts.send({"tid":13}); } //HTTP結果イベント private function onResult():void{ init3D(); } /* ********************************** PV3D ********************************** */ import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.scenes.Scene3D; 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.Cube; import org.papervision3d.objects.primitives.Sphere; private var scene : Scene3D; private var viewport : Viewport3D; private var renderer : BasicRenderEngine; private var sphere : Sphere; private var camera : Camera3D; private var cameraTarget : DisplayObject3D; //初期化 private function init3D():void{ setupScene(); setupCamera(); setupPlane(); setupListeners(); } //シーンの作成 private var bfx:BitmapEffectLayer; private function setupScene():void{ //ビューポートの作成 viewport = new Viewport3D( myUI.width , myUI.height , true , false , true , true ); 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 cubeArr:Array = new Array(); private var do3dArr:Array = new Array(); private function setupPlane():void{ 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.yaw( 90 ); p.x = i%3 * 50 + 600; 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 ); } } //レンダリング+マウス操作 protected function onRenderTick(e:Event):void { var reach:Number = 0.01; var ease:Number = 0.1; var cameraDistance:Number = 1200; camera.x += (Math.sin(mouseX * reach) * cameraDistance - camera.x) * ease; camera.z += (Math.cos(mouseX * reach) * - cameraDistance - camera.z) * ease; camera.y += (Math.sin(mouseY * reach) * cameraDistance - camera.y) * ease; camera.lookAt(cameraTarget); //Tweenerでうねうね var len:int = do3dArr.length; for( var i:int = 0 ; i < len ; i ++ ){ if( !TweenLite.isTweening( do3dArr[i] ) ){ TweenLite.to( do3dArr[i] , 2 , { delay:Math.random()*2, rotationX:do3dArr[i].rotationX+Math.random()*30, rotationY:do3dArr[i].rotationY+Math.random()*30, rotationZ:do3dArr[i].rotationZ+Math.random()*30 //ease:Elastic.easeOut }); } } //レンダリング renderer.renderScene(scene, camera, viewport); } //リサイズイベント private function onResize(e : Event) : void { } ]]> </mx:Script> <mx:HTTPService id="hts" url="http://moeten.info/maidcafe/?m=api&type=shop" resultFormat="e4x" result="onResult()"/> <mx:UIComponent id="myUI" width="100%" height="100%" /> <mx:Image id="hoge"/> </mx:Application>