author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff. Follow me on Twitter, GitHub, Facebook or LinkedIn

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 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 {
      var _view: BasicView;
      var _globe: Sphere;
      function App() {
        // initializing the basic view		
        _view = new BasicView(stage.stageWidth, stage.stageHeight, true);
        // adding the globe to the stage		
        // creating a loop function		
        addEventListener(Event.ENTER_FRAME, loop);
      // adding the globe to the stage	
      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	
      // moving the globe depending on the mouse position	
      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. Or maybe comment below: