This first recipe will give a quick overview of the different components of a 3D engine. It will show you the minimal program you need to know to draw your first cube in three dimensions.
Although not strictly necessary we also show how to add a light to your 3D scene. Adding even the simplest light will create a much more vivid and impressive image.
Start by downloading the Away3D library from http://away3d.com/. We are going to use Version 4, currently in beta. By using this beta version, we run the risk of small changes that might break some of the code (check the site for updates), but it will also make sure you are prepared for the future. There are some major incompatible changes between Away3D Version 3 and Version 4, so it's best to immediately learn the latest.
Extract the Away3D download to a folder.
Now create a new FlashDevelop project and copy everything from the Away3D src folder into the src folder of the project. If you open any of the files inside the Away3D package you should not see an error that the package name is incorrect.
Copy the pb folder that came with Away3D into the root of your project (at the same level as the src folder). These PixelBender files are necessary for the correct functioning of Away3D.
Right-click on the project and choose Properties. Change the Flash player version (in the Platform section) to at least 11. If you pick the latest one and you get errors later on, it may be that you don't have that Flash version installed. As long as you can run Version 11, you should be fine. If you cannot, you will need to download and install the latest Flash player. The example projects use Version 11.1.
Create or re-use the existing Main class. The recipe code uses a separate package for each recipe to keep things tidy. As with pretty much all previous recipes, the Main class will extend Sprite. That's about where the similarities with previous recipes end.
Start by adding a view property to the Main class:
private var _view:View3D;
In the Main class' constructor we will set everything up:
- Create a view of the 3D world and add it to the display list:
_view = new View3D(); _view.backgroundColor = 0x666666; _view.antiAlias = 4; addChild(_view);
- Create and configure a light by using the following code snippet:
var light:DirectionalLight = new DirectionalLight(-0.5, -1, 0.7); light.ambient = 0.5; light.specular = 0.45; light.diffuse = 0.5; _view.scene.addChild(light);
- The following code snippet creates a cube:
var cubeGeometry:CubeGeometry = new CubeGeometry(50,50,50); var cubeMaterial:ColorMaterial = new ColorMaterial(0xff9933); cubeMaterial.lightPicker = new StaticLightPicker([light]); var cube:Mesh = new Mesh(cubeGeometry, cubeMaterial); _view.scene.addChild(cube);
- Point the camera towards the cube with the following code snippet:
_view.camera.x = 100; _view.camera.y = 200; _view.camera.z = -200; _view.camera.pitch(45); //around x-axis _view.camera.yaw(-20); //around y-axis
- Add an enter frame listener that will render the scene:
addEventListener(Event.ENTER_FRAME, onEnterFrame);
The final ingredient is the
onEnterFrameimplementation that will make sure that the 3D world is drawn to the screen:private function onEnterFrame(ev : Event) : void { _view.render(); }Run the program. Congratulations, that was your first 3D application.
In this recipe we've used some of the most important elements of any 3D engine:
- The scene is somewhat comparable to the display list. It is a hierarchical structure of all the elements inside the 3D world. Although inside it is the view class in this recipe, it is actually the very core of any 3D program.
- A view, as it says, offers a view into the 3D world. Although we won't show it in this book, you can connect multiple views to a scene. For instance, a 3D drawing program shows the view from the top, left, and front of the project.
- A light is also pretty self-explanatory. You can have multiple lights in a scene, but they must always be connected to the material you want lit by them. This is done through a
light picker. - A material describes what an object will look like. We'll be revisiting different kinds and options for materials in the later recipes and in the next chapter.
- A geometry describes the form of the object. For instance, a cube's geometry consists of six faces.
- A mesh is the basic 3D element in the scene. It combines a geometry with a material.
- The camera describes how the view will render the scene. That is pretty abstract, but if you look at the code, you will see that you can put the camera in a certain place, using the (x,y,z) coordinates and you can point it in a certain direction, using the
pitchandyawproperties. There are other ways to point the camera, usually involving a controller that controls the camera. We'll see one such controller in the recipe on moving around the scene. - Rendering is the process of calculating a view based on the current state of the scene and camera. Without rendering the scene, we'd just see a blank screen.
That's a lot of information, and no one will grasp everything at once. For now, you should know that we place objects (meshes) inside a 3D scene and look at them through a camera.
If you want to create graphs in three dimensions, the most important elements are the meshes and the camera. We'll look at those in this chapter and let you explore the Internet to get an understanding of everything else. For instance, we won't be discussing shadows or effects such as depth of field (that will make the image in the distance blurry)
Undoubtedly, you've come to realize that we can only show you the tip of the iceberg when it concerns 3D drawing. The following are a few resources to get a deeper understanding.
Everything in a 3D engine is based on maths. Most of that is hidden for you by your 3D video card, by the drivers of that card, by Flash's Stage3D, and by the Away3D engine. Sometimes, however, you'll want to understand what is going on.
In the very final recipe of this chapter, we'll look at how all 3D objects are built with triangles. Check the recipe if you want to start your journey through the 3D engine internals.
If you start investigating 3D, you'll soon discover that it is most often linked with games. Many 3D engines offer additional features that ease game development (such as management of player characteristics, multiplayer network code, and so on).
In most cases, you can just ignore that part of the code and still use it perfectly for any graph drawing you want to do. Away3D is almost entirely focused on 3D, so you'll find very little other code in the library. There are some companion applications, such as Prefab3D (http://www.closier.nl/prefab/) that are more aimed at 3D games.
If you search the Internet, you'll find that most current tutorials and documentation are aimed at Away3D 3, and not 4. Be warned that these versions are not compatible. Although the concepts are still exactly the same and many class names are identical, you will not be able to just copy the code.
After finishing these two chapters on drawing in 3D, you'll have a better understanding of the basics, and you should be able to convert most of the code for Version 3 to Version 4.