Jean-Marc Le Roux Web, RIAs and chocolate spaghettis…

Tutorial: Display your first 3D object with Minko

Now that we've seen how to bootstrap an empty Minko application, it's time to learn how to display a simple 3D primitive.

Step 1: The Camera

In order to display anything 3D, we will need a camera. In Minko, cameras are represented by the Camera scene node class. The following code snippet creates a Camera object and adds it to the scene:

var camera : Camera = new Camera();
 
scene.addChild(camera);

By default, the camera is in (0, 0, 0) and looks toward the Z axis. We must remember this when we will add our 3D object in the scene: we must make sure it's far enough on the Z axis to be visible!

Step 2: The Cube

A Mesh is a 3D object that can be rendered on the screen. It is somekind of 3D equivalent of the Shape class used by Flash for 2D vector graphics. But in 3D. As such, it is made of two main components:

1. a Geometry object containing the triangles that will be rendered on the screen
2. a Material object defining how that very geometry should be rendered

Creating a Mesh involves passing those two objects to the Mesh constructor:

var geometry : Geometry = new CubeGeometry();
var material : BasicMaterial = new BasicMaterial();
 
// set the RGBA color of the cube
material.diffuseColor = 0x0000ffff;
 
var cube : Mesh = new Mesh(geometry, material);
 
scene.addChild(cube);

There are many primitives available as pre-defined geometry classes in Minko: cube, sphere, cylinder, quad, torus... Those classes are in the aerys.minko.render.geometry.primitive package. You can easily swap the CubeGeometry with a SphereGeometry to create a sphere instead of cube for example.

The BasicMaterial is the material provided by default with Minko's core framework. It's a simple material that can render using a solid color or a texture. Here, we use it with a simple color. To do this, we simply set the BasicMaterial.diffuseColor property to the color we want to use with an RGBA format.

Remember: the camera is in (0, 0, 0) and - by default - so is our cube. Therefore, we have to slightly translate our cube on the Z axis to make sure it's in the field of view of the camera:

cube.transform.translationZ = 5.;

We will introduce 3D transformations in details in the next tutorial.

Conclusion

To make it simple, our main class will extend the MinkoApplication class detailed at the end of the previous tutorial. We will simply override its initializeScene() method to create our cube, our camera and add both of them to the scene:

public class BlueCube extends MinkoApplication
{
  override protected function initializeScene() : void
  {
    super.initializeScene();
 
    var mat : BasicMaterial = new BasicMaterial();
    mat.diffuseColor = 0x0000ffff;
 
    var cube : Mesh = new Mesh(new CubeGeometry(), mat);
    cube.transform.translationZ = 5.;
    scene.addChild(cube);
 
    var camera = new Camera();
    scene.addChild(camera);
  }
}

And here is what you should get:

If you have questions or suggestions, you can post in the comments or on Aerys Answers!