C3D 03 Your first Component

..as per the equivalent 2D tutorial, it's not strictly speaking your first component, but it will be the first you can see.

In order to get your bearings, the best course of action when setting up a 3D scene is usually to add the TridentComponent, so you can see where you are in relation to the coordinate space. Do this by adding the following lines to your app's constructor, just below where you've initialised the renderer.

var trident:TridentComponent = new TridentComponent();
cadetScene.children.addItem(trident);

Build and run, you should see the following:

We can see that our default camera position is 0 on the X-Axis, 0 on the Y-Axis and some distance down the Z-Axis, hence we can see the TridentComponent in front of us. Let's now take control of the camera by instantiating a CameraComponent. Add the following code below your TridentComponent in the app's constructor:

var camera:CameraComponent = new CameraComponent();
camera.rotationX = -145;
camera.rotationY = -45;
camera.rotationZ = -180;
camera.x = 1000;
camera.y = 1000;
camera.z = 1000;
cadetScene.children.addItem(camera);

If you build and run, you'll see that by editing the camera's position and rotation properties, we've swung around a bit to view the scene from a more pleasing angle.

Ok, getting there, but there still isn't very much going on in our scene... Let's add a cube.

In order to add our cube, we're going to need a MeshComponent. In Away3D terms, a Mesh is defined as follows:

Mesh is an instance of a Geometry, augmenting it with a presence in the scene graph, a material, and an animation state. It consists out of SubMeshes, which in turn correspond to SubGeometries. SubMeshes allow different parts of the geometry to be assigned different materials.

The key point to understand at the moment is that a Mesh entity needs a Geometry and a Material in order to have something to show and a way to show it. If you recall from the equivalent 2D tutorial, the Entity contained a Geometry and a Skin. Geometries between the 2D and 3D versions are practically the same, though Skins and Materials differ slightly; if you're interested to know why, you can read more about that here.

Add the following code after your camera in the app's constructor:

var material:ColorMaterialComponent = new ColorMaterialComponent();
cadetScene.children.addItem(material);
			
var cubeGeometry:CubeGeometryComponent = new CubeGeometryComponent();
cubeGeometry.width = 400;
cubeGeometry.height = 400;
cubeGeometry.depth = 400;
cadetScene.children.addItem(cubeGeometry);		
			
var cubeEntity:MeshComponent = new MeshComponent();
cubeEntity.name = "Cube";
cubeEntity.materialComponent = material;
cubeEntity.geometryComponent = cubeGeometry;
cadetScene.children.addItem(cubeEntity);

You should now have a rather bland looking cube in the middle of your scene.

Why does the cube appear to be so formless? It's because we haven't added any lighting to our scene yet. Add the following code beneath your cubeEntity in the app's constructor:

var dirLight:DirectionalLightComponent = new DirectionalLightComponent();
dirLight.ambient = 0.3;
dirLight.diffuse = 1;
dirLight.rotationX = 65;
dirLight.rotationY = -90;
cadetScene.children.addItem(dirLight);	

Build and run to see a more cubey looking cube.

< Previous | Next >