Getting started with Away3D

Today, I decided to play with Away3D and immediately found it to be much better than Papervision. Comparatively, Away3D is much faster than Papervision ( implementation of FP10 features ). So, here is a simple tutorial to get you up and going with Away3D.
In this tutorial, I'll be using Flex Builder to create an ActionScript project. I'm naming it Away3DTest. Now download the latest Away3D build from here. Extract the source to the src folder and type in the following code :

package
{
 import away3d.cameras.Camera3D;
 import away3d.containers.Scene3D;
 import away3d.containers.View3D;
 import away3d.core.math.Number3D;
 import away3d.core.render.Renderer;
 import away3d.materials.BitmapMaterial;
 import away3d.primitives.Cube;
 
 import flash.display.Bitmap;
 import flash.display.Sprite;
 import flash.events.Event;
 
 [SWF( backgroundColor = '0x000000')]
 public class Away3DTest extends Sprite
 {
  [Embed(source='texture.jpg')]
  private var Texture:Class;
  
  private var scene:Scene3D;
  private var camera:Camera3D;
  private var view:View3D;
  
  private var cube:Cube; 

  public function Away3DTest()
  {
   initAway3D();
   initObjects();
  }
  
  private function initAway3D():void
  {
   camera = new Camera3D();
   camera.x = 100;
   camera.y = 100;
   camera.z = -1000;
   camera.lookAt( new Number3D() );
   
   scene = new Scene3D();
   
   view = new View3D();
   view.x = 200;
   view.y = 200;
   view.scene = scene;
   view.camera = camera;
   view.renderer = Renderer.BASIC;
   addChild(view);
  }
  
  private function initObjects():void
  {
   cube = new Cube();
   cube.material = new BitmapMaterial(Bitmap(new Texture()).bitmapData);
   scene.addChild(cube);
   
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
  }
  
  private function onEnterFrame(e:Event):void
  {
   cube.rotationX += 1;
   cube.rotationY += 1;
   cube.rotationZ += 1;
   
   view.render();
  }
  
 }
}

Here I assume you have a file named texture.jpg in your source directory.Now an explanation of the code :

1. We create variables for the View3D, Camera3D and the Scene3D class and assign the scene and the camera variable to the view variable. This is setting up the Away3D engine and is written as a seperate function initAway3D()
2. We create a cube and create a new BitmapMaterial for it using the embedded texture.
3. We create an ENTER_FRAME event listener which does the rendering using the view.render() method. Meanwhile we'll also rotate the cube on all 3 axes.
4. Save and run you should get a cube with the texture rotating on all the axes.

Hope that was useful to anyone starting Away3D. Happy coding. :D

Introducing Simple3D - A library for 3D in Flash Player 10

Simple 3D is a library for developing 3D content in Flash Player 10.Unlike the other major 3D engines like Papervision3D, Away3D, Alternativa3D, Simple3D is just a library of standalone classes for 3D content.Using a standalone class greatly reduces compile size. The compile size of the SWF is around 3KB. Currently, the library contains 5 primitives and an ASE parser. I'm working on a couple more parsers and i'll release it soon.

Here is a simple sphere demo.




























Download : Simple3D Google Code Page

If you guys have any ideas to improve the code, or would like to contribute to the library, just drop a comment. I have created a Google Group for discussion.You can find it here.

Happy coding :D

Flash CS4 Tutorial : Using the drawTriangles method to render 3D objects

I’d like to say hello and welcome to those of you reading my feeds via MXNA. In this tutorial, we are going to use Flash Player 10’s 3D capabilities to render a cube. The drawTriangles method added to the Graphics class is used to render 3D objects in FP10. Lets get started.

First up,create a new document class. Here we’re going to name it Cube3D. Open the Cube3D.as file and type in the following code.

 

package    
{     
    import flash.display.*;     
    import flash.events.*;     
    import flash.geom.*; 
  
    public class Cube3D extends Sprite    
    {     
        private var matrix3D:Matrix3D;     
        private var vertices:Vector.<Number>;     
        private var projectedVertices:Vector.<Number>;     
        private var UVData:Vector.<Number>;     
        private var indices:Vector.<int>;     
        private var cube:Sprite; 
  
        public function Cube3D()    
        {     
            matrix3D = new Matrix3D();     
            vertices = Vector.<Number>([50,-50,50,     
                                         50,-50,-50,     
                                        -50,-50,-50,     
                                        -50,-50,50,     
                                        50,50,50,     
                                        50,50,-50,     
                                        -50,50,-50,     
                                        -50,50,50     
                                        ]);     
            projectedVertices = new Vector.<Number>;     
            UVData = new Vector.<Number>;     
            indices = Vector.<int>([3,1,0, 3,2,1, 5,7,4, 5,6,7, 1,4,0, 1,5,4, 2,5,1, 2,6,5, 3,6,2, 3,7,6, 7,0,4, 7,3,0]); 
  
            cube = new Sprite();    
            addChild(cube); 
  
            addEventListener(Event.ENTER_FRAME, onEnterFrame);    
        } 
  
        private function onEnterFrame(e:Event):void    
        {     
            cube.x = cube.y = 200; 
  
            matrix3D.appendRotation(1,Vector3D.X_AXIS);    
            matrix3D.appendRotation(1,Vector3D.Y_AXIS);     
            matrix3D.appendRotation(1,Vector3D.Z_AXIS);            
  
            Utils3D.projectVectors(matrix3D,vertices,projectedVertices,UVData); 
  
            cube.graphics.clear();    
            cube.graphics.beginFill(0x0066FF);     
            cube.graphics.lineStyle(1,0x0000FF,1);     
            cube.graphics.drawTriangles(projectedVertices, indices);     
            cube.graphics.endFill();     
        }     
    }     
}
  

Now lets take a look at the code:

Now we can use the Vector class to store data instead of Arrays. Vectors are similar to arrays but allow you to store only one type of data. The vertices vector stores the xyz co-ordinates of the 8 vertices of the cube. In order to draw a 3D object, we use the drawTriangles method. The syntax for this method is

drawTriangles(vertices:Vector.<Number>, indices:Vector.<int> = null, uvtData:Vector.<Number> = null, culling:String = “none”)

For the indices parameter, we have to split the cube into triangles. A good way for that is to take 1 side of a cube, and split it into 2 triangles. Read the drawTriangles section of this post by senocular for better understanding of splitting an object into triangles. A section from the post:

As you can see, a square can be split up into 2 triangles.For the square, the indices are 0,1,2 and 1,2,3. Similarly using the same technique for the cube’s 6 sides, we can calculate the indices.

Look at the following code:

matrix3D.appendRotation(1,Vector3D.X_AXIS);

matrix3D.appendRotation(1,Vector3D.Y_AXIS);

matrix3D.appendRotation(1,Vector3D.Z_AXIS);

This is equivalent to rotating through the X,Y&Z axes by 1 degree. Hence this code is executed in every frame. Now take a look at the next line :

Utils3D.projectVectors(matrix3D,vertices,projectedVertices,UVData);

The syntax for the projectVectors method is projectVectors(m:Matrix3D, verts:Vector.<Number>, projectedVerts:Vector.<Number>, uvts:Vector.<Number>)

This method, using a projection Matrix3D object, projects a Vector of three-dimensional space coordinates ( verts ) to a Vector of two-dimensional space coordinates ( projectedVerts ). This method gives us the 2D vertices (projectedVertices) to use in the drawTriangles method.

Here is the final cube :

And with a little experimenting, here is a pyramid :

Feel free to drop a comment if you want to kknow anything.
Happy experimenting