Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

How to create realistic Earth globe in Flash (AS3, Papervision3D)

Papervision3D is a perfect tool for the purpose. As you will see such a task needs only few lines of code. To make the example a little bit more interesting we will add additional code to control the rotation of the globe by the mouse.

The idea here is to use the Sphere object. Then we will simply apply a MovieMaterial to it. I used a nice image of the Earth, which had to be flat. Leave the 3d transformations for the engine. The result could be seen here. Feel free to download the source files and experiment with them.The code:

package lib.document {
    import flash.display.MovieClip;
    import flash.events.Event;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.view.BasicView;
    public class App extends MovieClip {
      private
      var _view: BasicView;
      private
      var _globe: Sphere;
  
      function App() {
        // initializing the basic view		
        _view = new BasicView(stage.stageWidth, stage.stageHeight, true);
        _view.startRendering();
        addChild(_view);
        // adding the globe to the stage		
        addGlobe();
        // creating a loop function		
        addEventListener(Event.ENTER_FRAME, loop);
      }
      // adding the globe to the stage	
      private
  
      function addGlobe(): void {
        // creating the material		
        var material: MovieMaterial = new MovieMaterial(new GlobeImageClip());
        // creating the globe		
        _globe = new Sphere(material, 500, 32, 32);
        // adding to stage	
        _view.scene.addChild(_globe);
      }
      // moving the globe depending on the mouse position	
      private
      function loop(e: Event): void {
        var rotationY: Number = (mouseX - (stage.stageWidth / 2)) / (stage.stageWidth / 2) * 360;
        var rotationX: Number = (mouseY - (stage.stageHeight / 2)) / (stage.stageHeight / 2) * 360;
        _globe.rotationY -= (_globe.rotationY - rotationY) * 0.05;
        _globe.rotationX -= (_globe.rotationX - rotationX) * 0.05;
      }
    }
  }
If you enjoy this post, share it on Twitter, Facebook or LinkedIn.