Away3D 3.6: Applying Basic and Bitmap Materials

Away3D 3.6 Essentials

Take Flash to the next dimension by creating detailed, animated, and interactive 3D worlds with Away3D

• Create stunning 3D environments with highly detailed textures
• Animate and transform all types of 3D objects, including 3D Text
• Eliminate the need for expensive hardware with proven Away3D optimization techniques, without compromising on visual appeal
• Written in a practical and illustrative style, which will appeal to Away3D beginners and Flash developers alike

To demonstrate the basic materials available in Away3D, we will create a new demo called MaterialsDemo.

package
{

Some primitives show off a material better than others. To accommodate this, we will apply the various materials to the sphere, torus, cube, and plane primitive 3D objects in this demo. All primitives extend the Mesh class, which makes it the logical choice for the type of the variable that will reference instances of all four primitives.

import away3d.core.base.Mesh;

The Cast class provides a number of handy functions that deal with the casting of objects between types.

import away3d.core.utils.Cast;

As we saw previously, those materials that can be illuminated support point or directional light sources (and sometimes both). To show off materials that can be illuminated, one of these types of lights will be added to the scene.

import away3d.lights.DirectionalLight3D;
import away3d.lights.PointLight3D;

In order to load textures from external image files, we need to import the TextureLoadQueue and TextureLoader classes.

import away3d.loaders.utils.TextureLoadQueue;
import away3d.loaders.utils.TextureLoader;

The various material classes demonstrated by the MaterialsDemo class are imported from the away3d.materials package.

import away3d.materials.AnimatedBitmapMaterial;
import away3d.materials.BitmapFileMaterial;
import away3d.materials.BitmapMaterial;
import away3d.materials.ColorMaterial;
import away3d.materials.CubicEnvMapPBMaterial;
import away3d.materials.DepthBitmapMaterial;
import away3d.materials.Dot3BitmapMaterial;
import away3d.materials.Dot3BitmapMaterialF10;
import away3d.materials.EnviroBitmapMaterial;
import away3d.materials.EnviroColorMaterial;
import away3d.materials.FresnelPBMaterial;
import away3d.materials.MovieMaterial;
import away3d.materials.PhongBitmapMaterial;
import away3d.materials.PhongColorMaterial;
import away3d.materials.PhongMovieMaterial;
import away3d.materials.PhongMultiPassMaterial;
import away3d.materials.PhongPBMaterial;
import away3d.materials.ShadingColorMaterial;
import away3d.materials.TransformBitmapMaterial;
import away3d.materials.WhiteShadingBitmapMaterial;
import away3d.materials.WireColorMaterial;
import away3d.materials.WireframeMaterial;

These materials will all be applied to a number of primitive types, which are all imported from the away3d.primitives package.

import away3d.primitives.Cube;
import away3d.primitives.Plane;
import away3d.primitives.Sphere;
import away3d.primitives.Torus;

The CubFaces class defines a number of constants that identify each of the six sides of a cube.

import away3d.primitives.utils.CubeFaces;

The following Flash classes are used when loading textures from external image files, to handle events, to display a textfield on the screen, and to define a position or vector within the scene.

import flash.geom.Vector3D;
import flash.net.URLRequest;
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.text.TextField;

The MaterialsDemo class extends the Away3DTemplate class (download code Ch:1).

public class MaterialsDemo extends Away3DTemplate
{

One of the ways to manage resources that was discussed in the Resource management section was to embed them. Here, we see how an external JPG image file, referenced by the source parameter, has been embedded using the Embed keyword. Embedding an image file in this way means that instantiating the EarthDiffuse class will result in a Bitmap object populated with the image data contained in the earth_diffuse.jpg file.

[Embed(source = “earth_diffuse.jpg”)]
protected var EarthDiffuse:Class;

A number of additional images have been embedded in the same way.

[Embed(source = “earth_normal.jpg”)]
protected var EarthNormal:Class;
[Embed(source = “earth_specular.jpg”)]
protected var EarthSpecular:Class;
[Embed(source = “checkerboard.jpg”)]
protected var Checkerboard:Class;
[Embed(source = “bricks.jpg”)]
protected var Bricks:Class;
[Embed(source = “marble.jpg”)]
protected var Marble:Class;
[Embed(source = “water.jpg”)]
protected var Water:Class;
[Embed(source = “waternormal.jpg”)]
protected var WaterNormal:Class;
[Embed(source = “spheremap.gif”)]
protected var SphereMap:Class;
[Embed(source = “skyleft.jpg”)]
protected var Skyleft:Class;
[Embed(source = “skyfront.jpg”)]
protected var Skyfront:Class;
[Embed(source = “skyright.jpg”)]
protected var Skyright:Class;
[Embed(source = “skyback.jpg”)]
protected var Skyback:Class;
[Embed(source = “skyup.jpg”)]
protected var Skyup:Class;
[Embed(source = “skydown.jpg”)]
protected var Skydown:Class;

Here we are embedding three SWF files. These are embedded just like the preceding images.

[Embed(source = “Butterfly.swf”)]
protected var Butterfly:Class;
[Embed(source = “InteractiveTexture.swf”)]
private var InteractiveTexture:Class;
[Embed(source = “Bear.swf”)]
private var Bear:Class;

A TextField object is used to display the name of the current material on the screen.

protected var materialText:TextField;

The currentPrimitive property is used to reference the primitive to which we will apply the various materials.

protected var currentPrimitive:Mesh;

The directionalLight and pointLight properties each reference a light that is added to the scene to illuminate certain materials.

protected var directionalLight:DirectionalLight3D;
protected var pointLight:PointLight3D;

The bounce property is set to true when we want the sphere to bounce along the Z-axis. This bouncing motion will be used to show off the effect of the DepthBitmapMaterial class.

protected var bounce:Boolean;

The frameCount property maintains a count of the frames that have been rendered while bounce property is set to true.

protected var frameCount:int;

The constructor calls the Away3DTemplate constructor, which will initialize the Away3D engine.

public function MaterialsDemo()
{
super();
}

The removePrimitive() function removes the current primitive 3D object from the scene, in preparation for a new primitive to be created.

protected function removePrimitive():void
{
if (currentPrimitive != null)
{
scene.removeChild(currentPrimitive);
currentPrimitive = null;
}
}

The initSphere() function first removes the existing primitive from the scene by calling the removePrimitive() function, and then creates a new sphere primitive and adds it to the scene. Optionally, it can set the bounce property to true, which indicates that the primitive should bounce along the Z-axis.

protected function initSphere(bounce:Boolean = false):void
{
removePrimitive();
currentPrimitive = new Sphere();
scene.addChild(currentPrimitive);
this.bounce = bounce;
}

The initTorus(), initCube(), and initPlane() functions all work like the initSphere() function to add a specific type of primitive to the scene. These functions all set the bounce property to false, as none of the materials that will be applied to these primitives gain anything by having the primitive bounce within the scene.

protected function initTorus():void
{
removePrimitive();
currentPrimitive = new Torus();
scene.addChild(currentPrimitive);
this.bounce = false;
}

protected function initCube():void
{
removePrimitive();
currentPrimitive = new Cube(
{
width: 200,
height: 200,
depth: 200
}
);
scene.addChild(currentPrimitive);
this.bounce = false;
}

protected function initPlane():void
{
removePrimitive();
currentPrimitive = new Plane(
{
bothsides: true,
width: 200,
height: 200,
yUp: false
}
);
scene.addChild(currentPrimitive);
this.bounce = false;
}

The removeLights() function will remove any lights that have been added to the scene in preparation for a new light to be created.

protected function removeLights():void
{
if (directionalLight != null)
{
scene.removeLight(directionalLight);
directionalLight = null;
}

if (pointLight != null)
{
scene.removeLight(pointLight);
pointLight = null;
}
}

The initPointLight() and initDirectionalLight() functions each remove any existing lights in the scene by calling the removeLights() function, and then add their specific type of light to the scene.

protected function initPointLight():void
{
removeLights();

pointLight = new PointLight3D(
{
x: -300,
y: -300,
radius: 1000
}
);
scene.addLight(pointLight);
}

protected function initDirectionalLight():void
{
removeLights();

directionalLight = new DirectionalLight3D(
{
x: 300,
y: 300,

The direction that the light is pointing is set to (0, 0, 0) by default, which effectively means the light is not pointing anywhere. If you have a directional light that is not being reflected off the surface of a lit material, leaving the direction property to this default value may be the cause. Here we override the default to make the light point back to the origin.

direction: new Vector3D(-1, -1, 0)
}
);
scene.addLight(directionalLight);
}

The initScene() function has been overridden to call the applyWireColorMaterial() function, which will display a sphere with the WireColorMaterial material applied to it. We also set the position of the camera back to the origin.

protected override function initScene():void
{
super.initScene();
this.camera.z = 0;
applyWireColorMaterial();
}