First steps with 3D in Flash

Building 3D games and apps in general might look like a big step for developers, who did only 2D programming before. The aim of my 3D tutorial series is to show you, that it’s pretty straightforward to start thinking in 3 dimensions.


(Try CubeRotator app)

As a 3D programmer you usually combine following things together:

  • View/Scene
  • - e.g. 800×600 rectangle

  • Camera
  • 3D objects
  • - primitives (Cube, Plane, Sphere)
    - models (imported from file via Collada, 3DS, etc.)
    - 3D objects are placed in a 3D container

  • Materials
  • - color fill
    - textures/bitmaps
    - environment materials and other advanced or intelligent materials

  • Lights
  • - Directional
    - Point light
    - Omni light

  • Shadows
  • Physics
  • Animations
  • Shaders
  • – little programs that can change visual look of models by changing geometry (vertex shader) or pixels on a material (fragment shader), shaders are very widely used in 3D programming and you can use Adobe Pixel Bender 3D to create them

All currently available Flash 3D engines are slightly different in terms of API, but learning one over the another doesn’t take long – differences are mainly in the features and speed of development – some provide less features, but it’s easier to work with them, others are more powerful, but take more time do something. All in all – pick the one that suites you most:
- Away3D
- Alternativa 3D
- Flare3D
- Sophie3D
- Yoghurt3D
- Minko

(some of them have Molehill versions already available)

Let’s create a simple scene with a red box, watching it from top – visible as a square.

Alternativa 3D 7.6 code: (run example | source)

public function Alternativa1()
{
	camera = new Camera3D();
 	camera.view = new View(stage.stageWidth, stage.stageHeight);
	camera.z = -500; // zoom out
	addChild(camera.view);
 
	container = new Object3DContainer();
	container.addChild(camera);
 
	cube = new Box();
	cube.setMaterialToAllFaces(new FillMaterial(0xFF0000));
	container.addChild(cube);
 
	stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
 
protected function onEnterFrame(event:Event):void
{
	camera.render();
}

Away3D 4 Broomstick (Molehill): (run example | source)

public function Away1()
{
	view = new View3D();
	view.camera.z = -500; // zoom out
	addChild(view); // add to the sprite
 
	container = new ObjectContainer3D();
	view.scene.addChild(container); // add to scene
 
	cube = new Cube()
	cube.material = new ColorMaterial(0xFF0000)
	container.addChild(cube); // add to container
 
	stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
 
protected function onEnterFrame(event:Event):void
{
	view.render();
}

Flare3D code: (run example | source)

public function Flare1()
{
	scene = new Scene3D(this);
	scene.camera.setPosition( 0, 0, -50 ) // zoom out
 
	cube = new Cube();
	cube.setMaterial(new FlatColorMaterial("red",0xFF0000));
	scene.addChild(cube);
 
	// see that there is no need for calling render() in Flare3D
}

As you can see, it’s basically same approach, just with little differences. Of course more differences come with more code written, just pick one that is better for you.

Try adjusting camera position:

Open CubeRotator (simple app, that helps you understand how position and rotation work)

Away3D code:

view = new View3D();
view.camera.z = -500;
view.camera.y = -350;
view.camera.x = -350;
view.camera.rotationX = 45;
view.camera.rotationY = 0;
view.camera.rotationZ = -45;
addChild(view); // add to the sprite

*Note that all frameworks are slightly different with +/-
*For instance in Flare3D camera.rotationX will be -45, not 45. In Alternativa you will be setting a radian value.

We will do more stuff in the next tutorial. Loading models, rotations, camera hovering, lights, materials, and so on. I will keep these tutorials short, but focused on particular issues.

Examples and Sources

Alternativa1 | source
Away1 | source
Flare1 | source

CubeRotator | source

Show Comments

Hide Comments

Comments are closed.