Away3D Basics 5 - Primitives (Part 1)

Primitives are the building block of most 3D software. Away3D comes with 17 primitives as well as some helpers. This first tutorial on the primitives will explain how to work with primitives to achieve some great looking effects such as building a sound visualizer, a CMYK color separation viewer and more. This tutorial will also introduce you to the two coding styles that Away3D supports.

First of all - don't dismiss the primitives. They may be simple, but they're extremely useful! For instance - a simple Sphere is all you need to build a panorama viewer. Want to make a cubic panorama instead? Use the Skybox primitive for this.

In the first two tutorials on the Away3D Primitives, we'll look at the primitives that you will find the most useful. In the third part we'll finish off with the more exotic ones like the Sea Turtle. A Turtle you say? Yeah. A certain other 3D engine has a thing for cows. Away3D has a Sea Turtle primitive!

Prerequisites

This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. All of these examples require the file Cover.as. This file is used with the tutorials to prevent your machine from locking up as it tries to display many Flash files at once. If you are uncertain about how to use the sample Class files provided, check out this tutorial.

Some of the examples in this tutorial use textures. We'll look closer at Textures and materials in a separate tutorial, but if you want to make the source files work with Flash CS3/CS3, read this tutorial first.

The Triangle

The basic building block of all 3D models is the triangle. While not all that useful in itself, combining many triangles create great results. Luckily, Away3D allows you to import complex models from commercial 3D software, so you probably won't need to build models from triangles too often. The triangle has some purpose by itself though. Since triangles are the smallest possible 3D element, it's often used for resource intensive things such as particle effects.

To create a single triangle you set the a, b and c properties to points in the 3D space. Each of the three points are defined by a vertex that has an x, y and z position like this:

var tri:Triangle = new Triangle();
tri.a = new Vertex(0,200,0);
tri.b = new Vertex(100,0,0);
tri.c = new Vertex(-100,0,0);
tri.bothsides = true;
view.scene.addChild(tri);

Below you can see a full example:

Basic08_triangle.as

Notice that we set the "bothsides" property to true. If we did not do that, our triangle would only be visible from one side.

The Plane

The plane is just a flat rectangle that has no depth. By default, a Plane is composed of only two triangles but you can increase this count if required. This makes it the second most lightweight of all the Away3D primitives so it's a great candidate for many tasks. Want to create a video wall? Use a series of Planes and set a MovieMaterial on them. The Plane is also very useful for illustrating the ground in a 3D scene. Check this demo for an example.

As mentioned initially, Away3D supports two basic coding styles. You can either pass along properties in the constructor when you create an object, or you can set the properties after creating the object. Let's look at the two possibilities.

The first method uses the "automagical" init-object where you can pass in all the parameters of an object. Here we'll create a plane with a white wireframe material that has black wires:

var myPlane:Plane = new Plane({material:"white#black",rotationX:-90});
View.scene.addChild(myPlane);

This is a very compact way of creating new objects. Using this method, you can easily specify the wireframe colors and Away3D will create and apply the appropriate WireColorMaterial for you. You can also declare each of these properties, one line at a time:

var mat:WireColorMaterial = new WireColorMaterial();
mat.color = 0xff0000;
mat.wirecolor = 0x000000;
var myPlane:Plane = new Plane();
myPlane.material = mat;
myPlane.rotationX = -90;
View.scene.addChild(myPlane);

This way of creating objects is much more verbose, but many prefer it as it makes the code more readable. Which of the two methods you prefer is entirely up to you. A lot of developers have strong opinions on this subject and by supporting both coding styles, everyone should be happy with Away3D.

As you may have noticed, in the example above, we rotated the plane negative 90 degrees along the X-axis. Since the plane has no depth, we need to rotate it towards us to see it.

You can also adjust the complexity of a plane by setting the segment parameters:

myPlane.segmentsW = 4;
myPlane.segmentsH = 6;

This will increase the density of triangles on the plane and it's useful for compensating for distortion of textures that may appear if there is too few triangles to display the texture correctly. You can see the problem illustrated here. Click the buttons to experiment.

Textures.as

Now let's see some real code using Planes. Here you can see the entire set of CS3 icons, as published by Adobe's John Nack. Click and drag to see the color separations. Align the outer squares to focus the image again.

Basic08_plane.as

By creating four separate and partially transparent PNG files, we're here simulating the effect used in color printing where the Cyan, Magenta, Yellow and Black colors (CMYK) are combined on paper to produce a full color image. The file is built with a HoverCam3D that orbits five Planes, one for each of the CMYK colors and one white Plane that acts as the paper. By applying BlendMode.MULTIPLY, the color values of the layers are combined, producing a result similar to that of newspapers.

The Cube

A cube has a depth, height and width. You can also set the materials for each of the sides.

Basic08_cube.as

As with all other objects in Away3D, you can create a cube in two ways:

cube = new Cube({width:200,height:100,depth:300});

You can also create the cube line by line for better readability:

var cube:Cube = new Cube();
cube.width = 200;
cube.height = 100;
cube.depth = 300;

What method you choose is entirely up to what coding style you prefer. To set the materials of the Cube, we use the cubeMaterials property. This allows us to set the top, bottom, left, right, front and back materials like this:

cube.cubeMaterials.left = new ColorMaterial(0xffffff,{alpha:.3});

Every 3D object can then be manipulated along the Z, Y and Z axis for position and rotation using code like this:

cube.x = 200;
cube.rotationY = 45;

For more details on moving and manipulating objects, see this tutorial. Now let's take a look at some cubes used in a project. Below you can find a sound visualizer that analyzes the music playing and adjusts the height, color and filters based on the sounds waveform.

Basic08_cube_music.as

The blue cubes represent the right channel and the red cubes represent the left channel. The sound spectrum for each channel is divided into eight equal bits and each box represents a piece of the spectrum. The maximum level for each piece is stored in an array and is set to fade over time. Every time a new maximum level is detected for a piece, we apply a blur filter and increase the size/color of the cube. A set of mirrored cubes with a faded color is also used to give the impression of a reflection. Click the link to the source code to see the details of how this is achieved.

 

 

Comments

---

---

---

Submit a comment

Only registered members can comment. Click here to login or here to register