Beyond the cube, drawing different shapes

Up until now, we have only drawn cubes. It's about time we looked at some other forms. In this recipe, we look at how you can use Away3D's built-in shapes to create different visualizations. We will replace the cubes from the previous recipe with cylinders.

Getting ready

We will adapt the previous recipe. So create a copy of it and move it to a new package or rename it. Finally, set it as the document class.

How to do it...

First let's make the Graph3D class a little more generic:

  1. Create a member variable inside the Graph3D class:
    public var drawFunction:Function = drawCube;
  2. Update the drawDataPoints method so it uses the new variable:
    private function drawDataPoints():void {
    for (var i:int = 0; i < _data.length; i++)
    {
        drawFunction(_data[i][0], _data[i][1], 0);
    }
}

Now we can put our new drawing function inside the main program (although in a real program, you may want to keep it in the Graph3D class):

  1. Create a new member variable inside the Main class:
    private var _lightPicker:LightPickerBase;
  2. Change the graph initialization so that it uses a custom drawing function:
    _lightPicker = new StaticLightPicker([light]);
_graph = new Graph3D(_lightPicker);
_graph.data = _data;
_graph.drawFunction = drawCylinder;
_graph.createGraph();
_graph.x = -350;
_graph.y = -250;
_view.scene.addChild(_graph);
  3. And implement the drawCylinder function:
    private function drawCylinder(x:Number, y:Number, z:Number):void
{
    var cylinderGeometry:CylinderGeometry = new CylinderGeometry(20, 20, y);
    var cylinderMaterial:ColorMaterial = new ColorMaterial(0xff9933);
    cylinderMaterial.lightPicker = _lightPicker;
    var cylinder:Mesh = new Mesh(cylinderGeometry, cylinderMaterial);

    cylinder.x = x;
    cylinder.y = y/2;
    cylinder.z = z;

    _graph.addChild(cylinder);
}

    If you run the program now, you should see the same graph, but now drawn with cylinders instead of cubes.

    How to do it...

How it works...

ActionScript allows you to store pointers to functions inside variables. We use this to make the drawing function customizable. We can create whatever function we want to draw the data points, but it only has to accept three parameters.

Next we build up a mesh based on a cylinder geometry. This piece of code is exactly the same as drawing a cube, only now we create a different geometry that takes different parameters.

The parameters for the cylinder geometry are the radius at the top and bottom, and the height. Most of the additional parameters that the cylinder geometry takes will be of little use when creating graphs.

There's more...

This short recipe showed only one different shape that you can use. The shape of the graph elements can be adjusted in a number of ways.

More shapes

Apart from the cube and cylinder, Away3D also has a ConeGeometry shape that will be of use for this type of graph. If you draw different types of graphs, you may also find a use for CapsuleGeometry and SphereGeometry.

Defining your own geometry

If you're not happy with the existing shapes, it is possible to define your own geometry and draw whatever you desire.

We'll take a closer look at this in the Graphing a function in three dimensions recipe of this chapter; however, keep in mind that this is a very advanced topic and should not be attempted by first-time 3D developers. You're often better off creating a shape in the 3D editor and loading that one.

Loading 3D shapes

Away3D comes with a number of parsers that can load 3D models from 3D editors, such as 3D Studio Max and Wavefront. This is, by far, the easiest way to get a custom model into your application.

An example can be found at http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=6&subindex=8&aid=328.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.14.196