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;
}
}
}