Up until now, we've
always used the solid color ColorMaterial to draw our graphs. However, to get the most out of your 3D world, you'll need to know TextureMaterial. This recipe introduces how to use it with a bitmap. The next chapter will show a few practical examples of the techniques learned here.
As in the previous recipe, start by creating a copy of the Moving around the chart recipe.
You'll also need a bitmap image. For instance, you can download open source textures that are free to use from http://opengameart.org/textures/all. There is only one requirement: the bitmap's size, both height and width, should be powers of two.
This is a limit inside Away3D that stems from the limits of the graphical card that renders the image to the screen.
Put the bitmap image inside the lib folder and embed it in the main application. Do this by right-clicking and selecting Generate Embed Code. Next, attach it to a class name and create an instance. Your code should look like the following code snippet:
[Embed(source = "../../../../lib/TiZeta_parsley.jpg")] private var BitmapClass:Class; private var bitmap:Bitmap = new BitmapClass();
We now create BitmapTexture and TextureMaterial. The code belongs in the constructor of the main class, before creating the graph:
var bitmapTexture:BitmapTexture = new BitmapTexture(bitmap.bitmapData); var bitmapMaterial:TextureMaterial = new TextureMaterial(bitmapTexture, true, true); bitmapMaterial.lightPicker = lightPicker;
This new material can now be used to overwrite the default material (in this case, we're only providing material for one data set):
_graph.materials = [bitmapMaterial];
If you run the code now, you'll see the bitmap applied to the graph. This is shown in the following screenshot:
BitmapTexture is the most basic texture around. If you want to create an over-the-top presentation, take a look at VideoTexture.
TextureMaterial combines the bitmap inside BitmapTexture with a number of other parameters and forms a material. This material will be applied to the geometry.
The constructor parameters are all fairly technical and you won't need them until you are looking for them. An important one is the third one, which indicates whether or not the texture is repeated when it is too small to cover the entire object. Although the default is not to repeat, you'll probably want to change this in many cases.
In the next chapter, we'll look in more detail at some of the TextureMaterial properties, such as the ability to create bumpmaps that give the impression of a rough surface.
With the texture created, we can now combine it with a geometry object to form a mesh. This mesh is a 3D object that we can add to the 3D world. In this example, we just use the default values, but there are also quite a few things that can be changed, such as how exactly the texture is applied to the geometry.
Texture mapping is a very broad subject, one that also requires a bit of background and understanding of how 3D engines work. Therefore, we've only been able to introduce the very basics.
To keep things simple, we've deliberately chosen an image where this is not clear: but by default Away3D will map different parts of the texture to different faces of the cube. Imagine that you split the texture in a two-by-three grid. Each part will be mapped to a different side of the cube.
Currently, there is a bug in Away3D, which prevents this from working as you would expect. A fix can be found here:
http://jansensan.net/apply-a-texture-on-a-cube-in-away3d-4-0
If you'd like for each face to have the same image repeated, you can turn this off by specifying false as the seventh parameter to the CubeGeometry constructor.
We haven't talked about displaying text yet. And it is with good reason. Sadly, there is no easy way to display text in Away3D at this point. This will probably change as helper classes and add-on libraries are written.
Right now, if you want to display text inside the 3D world, your best bet is to use the Sprite3D class. Such an entity will always be facing the user, so the text will always be legible.
You can combine this with BitmapTexture and TextureMaterial. The bitmap data for the texture can in turn be obtained from creating a BitmapData object and using the draw method to draw TextField on there.
It's a very convoluted way, which is why it's almost certain that there will appear easier ways in the not-too-distant future.
The way two-dimensional textures are put onto three-dimensional objects (mapped) is pretty complex and is a chapter of its own. A good starting point is Wikipedia: http://en.wikipedia.org/wiki/Texture_mapping.
If you want to manipulate the position where the texture is applied to the object, you can change the UV coordinates and their scaling. Again, see Wikipedia for an introduction: http://en.wikipedia.org/wiki/UV_mapping.
Since texture
mapping is specific to a geometry, you can reach these properties through the geometry object. scaleUV controls the size of the texture on the object (make sure repeating textures is turned on if you want to scale down). The UVData vector that is part of each subgeometry of the geometry object controls the position.
In many cases, if you need to manipulate these variables, you are usually better off creating the shape and mapping it in a 3D editor and loading it. See the Beyond the cube, drawing different shapes recipe.