世界地図を球体(Sphereオブジェクト)に貼り付けた地球儀グルグルなサンプル。

マウス押下でズームイン。
地球儀以外の部分をダブルクリックで地球儀の絵を変更。

世界地図画像素材は以下を利用しています。

白地図: CraftMAP -日本・世界の白地図-
標高で色を塗り分け: 世界地図や日本地図で見る
四角型イラスト世界地図: 白地図、世界地図、日本地図が無料

Flex用ソースコード(Globe.as)


package {
 
  import flash.display.*;
  import flash.events.*;
 
  import org.papervision3d.scenes.*;
  import org.papervision3d.objects.*;
  import org.papervision3d.cameras.*;
  import org.papervision3d.materials.*;
 
  [SWF(width="400", height="400", backgroundColor="#000000", frameRate="30")]
 
  public class Globe extends Sprite {
 
    private var container : Sprite;
    private var scene     : Scene3D;
    private var camera    : Camera3D;
    private var rootNode  : DisplayObject3D;
 
    // 3Dオブジェクト踊らせ用パラメータ
    private var valx    : Number = 0;
    private var valy    : Number = 0;
 
    private var sphere:Sphere;
 
    // 画像ファイルのパス
    private var imageFilePath:Array = new Array();
    private var imageIndex:int = 0;
 
    // マウスの状態
    private var mousedown:Boolean = false;
 
    public function Globe():void {
 
      // リサイズに対応(swfをブラウザで直接ひらいているときとか)
      stage.addEventListener(Event.RESIZE, onStageResize);
 
      stage.doubleClickEnabled = true;
      stage.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
      stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
      stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
 
      // 定期的にイベント発生
      addEventListener(Event.ENTER_FRAME, myLoopEvent);
 
      // 表示用の Sprite オブジェクトを生成
      container = new Sprite();
      container.x = 400 / 2; // at center : swf width  = 400
      container.y = 400 / 2; // at center : swf height = 400
      addChild(container);
 
      // シーンオブジェクトを作る
      scene = new Scene3D(container);
 
      // カメラオブジェクトを作る
      camera = new Camera3D();
      camera.z = -200;
      camera.focus = 500;
      camera.zoom = 1;
 
      // ルートノードを作る
      rootNode = new DisplayObject3D();
      scene.addChild(rootNode);
 
      // 地球画像リスト
      imageFilePath.push("craftmap.png");
      imageFilePath.push("chizuyainoue.png");
      imageFilePath.push("freemapi.png");
 
      sphere = createSphere(imageFilePath[imageIndex] as String);
      rootNode.addChild(sphere);
    }
 
    private static function createSphere(image:String):Sphere {
 
      var material:BitmapFileMaterial = new BitmapFileMaterial(image);
      //material.doubleSided = true;
      //material.lineColor = 0x00FF00;
      //material.lineAlpha = 1;
 
      var radius:Number = 100
      var segmentsW:int = 24;
      var segmentsH:int = 24;
 
      var sphere:Sphere = new Sphere(material, radius, segmentsW, segmentsH);
      sphere.x =  0;
      sphere.y =  0;
      sphere.z =  0;
      return sphere;
    }
 
    // ダブルクリック時に地球儀の絵を入れ替える
    private function onDoubleClick(event:MouseEvent):void {
 
      rootNode.removeChild(sphere);
 
      imageIndex++;
      if(imageIndex >= imageFilePath.length){
        imageIndex = 0;
      }
 
      sphere = createSphere(imageFilePath[imageIndex] as String);
      rootNode.addChild(sphere);
    }
 
    private function onMouseDown(event:MouseEvent):void {
      mousedown = true;
    }
 
    private function onMouseUp(event:MouseEvent):void {
      mousedown = false;
    }
 
    private function myLoopEvent(event:Event):void {
 
      if(mousedown){
        // マウス押下中はズームイン
        camera.zoom += 0.01;
      }else{
        // ズームアウト
        if(camera.zoom > 1){
          camera.zoom -= 0.05;
        }
      }
 
      valx += container.mouseX / 50;
      valy += container.mouseY / 50;
      sphere.rotationY = valx;
      sphere.rotationX = valy;
 
      scene.renderCamera(camera);
    }
 
    private function onStageResize(event:Event):void {
      container.x = stage.stageWidth  / 2;
      container.y = stage.stageHeight / 2;
    }
    
  }
}

tags: zlashdot Flash Flash Flex Papervision3D

Posted by NI-Lab. (@nilab)