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 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.