Join Seb Lee-Delisle for an in-depth discussion in this video Making a model of the Earth with a BitmapMaterial, part of Papervision3D 2 Essential Training.
In this example we are going to look at how we can take bitmap and apply to a sphere to create an Earth. Obviously, if you've learned any programming languages before, you've probably done some kind of Hello World tutorial, and the Papervision version of Hello World is Hello Earth I guess. It's a big spinning globe. So, let's just take a look at what we've got. Well, we have like in our previous examples, we have a Sphere object and we are adding it into the scene and on the frame, on the enterFrame event, we're rotating it around the Y axis using sphere.yaw.
Let's take a quick look at this. Here we have our spinning globe. Yes, pretty impressive, if you like wireframe materials, but now we're going to replace that wireframe material with a bitmap material. First of all we're going to take a quick look at the bitmap that we're going to apply into our sphere, this one here called Earth.jpg. Now this obviously is the globe, spread out across a rectangle. You might notice that its aspect ratio is 2:1. So it's two by one. Materials for spheres are usually better if they are twice as wide as they are high.
So how do we get that onto this sphere? Well, first of all we need to make sure that that bitmap is actually embedded into our SWF, and here we use the flex directive here which actually embeds that JPG into the SWF and makes it available as a class through whatever we define here. In this case, we're creating a Class called EarthMap. So then to get the bitmap out of that Class, we need to extract the bitmapData property from that, after we've constructed it of course. And then we're going to create a BitmapMaterial using that bitmap.
So, remember we use wireframe materials in the last example. Well a BitmapMaterial is pretty much the same except that it just wraps a bitmap around our sphere. So, a BitmapMaterial has one main parameter, this one that is the bitmap to use. Okay, so when we create this sphere, we can pass in that bitmap material. So, now let's take a look at our sphere. See it looks a lot better. It's much more like the Earth. Okay, so that's what we do if we want to embed the bitmap into a SWF, but there is also another way to load in bitmaps into our object, and that is actually by loading them at runtime. So rather than compress them into the SWF itself, we actually load it in a runtime.
So instead of using that standard BitmapMaterial, we're going to use the BitmapFileMaterial. And the BitmapFileMaterial just takes one parameter, which is the URL. Now, don't forget that when you are loading in bitmaps or anything at runtime, the path name will have to be relative to where that SWF is, and then if you look at our folder structure, you can see that our SWFs will be published into this bin-debug folder. But in order to actually load that Earth from down there, we need to go up a level and into the assets folder to get the Earth.jpg there.
So the relative path name form the SWF to that bitmap would be up a level there and down into the assets folder and note the Earth.jpg. Now, when we run this, it looks identical. So thaat this time, the Earth bitmap is not embedded into the SWF. It's actually picked up and loaded into the Flash Player runtime and applied to the sphere. Obviously, if this was loading off a webpage, you might notice a short delay if that JPEG is loading. As opposed to, if you embedded the JPEG into the SWF, it should be there ready to use when your SWF is loaded.
So now we've learnt about the BitmapMaterial and the BitmapFileMaterial and how to apply that onto a sphere.
Users should have a basic knowledge of Flash Builder and Actionscript 3.
- Creating 3D primitive shapes
- Controlling rotation
- Moving the camera in 3D space
- Creating a particle field with depth-of-field blur
- Importing models from external applications
- Making a simple 3D game
- Using ViewportLayers to selectively render and sort layers
- Placing a custom 3D model into an augmented reality scene
- Creating interactive carousals
- Creating interactive grids
- Working with particles and billboards