Introduction

I was researching more on Papervision 3D when I realized I can share some information on creating a 3D realistic Earth model. I will also explain how to add rotation to earth and one way to show the rotation of moon and revolution of it around earth. I will also briefly describe how to handle something called “Pivot” points in Papervision 3D.

Setting Up

To start with, if you are fresh and new to Papervision 3D, I will describe the basic steps to configure your Flash CS4 authoring tool to work with Papervision 3D.

1. Navigate to http://code.google.com/p/papervision3d/downloads/list in your browser
2. Download the latest build’s ZIP file (You may also use the SWC or use SVN to download latest Papervision 3D class files if you know. This is just my way of setting up).
3. Extract it to a folder of your choice, e.g., C:\PV3D or Documents\PV3D
4. Open your Flash CS4 authoring tool and go to Edit>Preferences(Win) or Flash>Preferences (Mac)
5. Navigate to Action Script and choose Action Script 3.0.
6. In the “Source Path” section, click on the folder icon to browse to add a folder of libraries. Choose the folder where you extracted Papervision 3D class files.
7. Click OK and you are done with the setup. Now you can proceed creating Papervision 3D content.

Creating Basic Earth

We shall create a simple sphere (basic shape) and rotate it in place along Y axis.

1. Now that Papervision is set up, we create a new Action Script class file connected to an FLA file (e.g., Earth.as -> Earth.fla). Go ahead and create a new Action Script file and save it as Earth.as. Also create an FLA file and name it Earth.fla and in the Document Properties of the FLA file, enter Earth (the class name attached to the document).
2. Before you compile, you need to pour in data in to .as file. We need to create basic class/package structure to start with as shown -

   package {
   	import org.papervision3d.view.BasicView;
   	import flash.events.Event;
   
   	public class Earth extends BasicView {
   		public function Earth():void {
   			super(640, 480, false);
   			stage.frameRate=30;
   			startRendering();
   		}
   		override protected function onRenderTick(evt:Event=null):void {
   			super.onRenderTick();
   		}
   	}
   }

3. If you compile the FLA file now, you shouldn’t be getting any error. In the above basic code, we have imported the BasicView class from Papervision 3D’s packages for making the rendering job easier as it contains necessary implementation of rendering, initiating scene, viewport, etc. Let’s not worry about it now. We have extended Earth class from BasicView and written a constructor with initialization code for rendering and stage properties. Also an override function onRenderTick() to handle each frame of animation for rendering.
4. Now we shall create a sphere and rotate it. Observe the highlighted code below -

   package {
   	import org.papervision3d.view.BasicView;
   	import org.papervision3d.objects.primitives.Sphere;
   	import flash.events.Event;
   
   	public class Earth extends BasicView {
   		private var earth:Sphere;
   
   		public function Earth():void {
   			super(640, 480, false);
   			stage.frameRate=30;
   
   			earth=new Sphere(null,300,20,20);
   			scene.addChild(earth);
   
   			startRendering();
   		}
   		override protected function onRenderTick(evt:Event=null):void {
   			super.onRenderTick();
   		}
   	}
   }

5. We have created a new Sphere of radius 300 and 20 vertical and horizontal segments. This sphere is added as a child to the scene in order to display the created Sphere. Now test the file you created by saving and compiling the SWF. The output should seem similar to the below screenshot -



6. Without delay, we shall rotate this sphere with only one line of code added to the above code (in function onRenderTick) -

   	override protected function onRenderTick(evt:Event=null):void {
   		earth.localRotationY+=1;
   		super.onRenderTick();
   	}

7. localRotationY is a property of every DisplayObject3D used to rotate the object along the Y axis with respect to it’s local origin. The below image should help you understand it in case you need.
   



8. Now you may test your movie by pressing Ctrl+Enter (Win) / Command+Enter (Mac). You will see that the sphere rotates according to the Y axis.

Hold on with this output for now. I shall update with the next part soon where we will apply texture to the rotating sphere with proper lighting.

---

This entry was posted on Wednesday, December 9th, 2009 at 1:33 pm and is filed under Action Script 3.0, Flash, Flex, Papervision 3D. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.