Seb Lee-Delisle

Menu

Simple Flash 3D drawing API

I’m most passionate about hiding complexity with simple APIs, which is one of the reasons I’m so excited about Hype.

A few weeks ago Peter Elst told me that he was trying to find a simple way to draw 3D shapes, and so I helped him with a bit of code. He’d done some great work, and it really inspired me to continue to simplify things even more.

Get Adobe Flash player

So I spent a couple of hours putting together an experiment to see whether I could build a simple 3D drawing API for Flash that works more or less exactly like the 2D Flash drawing API.

I’m not sure whether this was the right approach but I thought it would be a fun experiment nonetheless and a great way to canvas opinion and get some feedback and ideas!

So here it is FlashDraw3D. The first thing you do is create a Graphics3D object:

var g3d : Graphics3D = new Graphics3D(this);

As you can see you pass it through a reference to the DisplayObject that you want to draw into. Once you’ve made it you can then draw into it :

g3d.lineStyle(1, 0xff0000, 1); 
g3d.moveTo(-10, 0, -10);
g3d.lineTo(10, 10, 10);

With of course the same syntax as the 2D drawing API except with 3 (x, y, z) coordinates instead of 2 (x, y).

And just like the flash drawing API has a drawRect, we have a drawCube :

g3d.drawCube(0, 0, 0, 100, 100, 100);

I’ve also added a couple of extras :

 
g3d.rotateY(); 

Just to show that it’s 3D :-). I really should have added rotateX and rotateZ but hey I only did it in a couple of hours. 🙂 I’ll add it soon I promise.

And also some handy 2D to 3D converting commands :

g3d.moveTo2D(mouseX, mouseY, 0);
g3d.lineTo2D(mouseX, mouseY, 0);

Where you can pass through 2D screen co-ordinates that are converted to a 3D position at the z depth you gave it. In the example that comes in the code base this is used to draw in 3D with the mouse.

Please note : it’s very much a rough prototype and it’s absolutely not optimised at all! It’s incomplete and poorly documented. I’m just putting it out there to see what you think.

Download the code at http://code.google.com/p/flashdraw3d/source/checkout and give it a try! I’d love to hear any suggestions you have. (Polite ones anyway 😉 )

Here’s the code for the above example :

package  
{
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import com.sebleedelisle.draw3d.Graphics3D;
 
	import flash.display.Sprite;
	[SWF (width="550", height="400", frameRate="30", backgroundColor="#000000")]
 
	/**
	 * @author Seb Lee-Delisle
	 */
	public class Draw3DTest extends Sprite 
	{
		public var g3d : Graphics3D;
		private var isMouseDown : Boolean;
 
		public function Draw3DTest()
		{
 
			g3d = new Graphics3D(this);
 
			g3d.lineStyle(1, 0xff0000, 1); 
			g3d.moveTo(-10, 0, -10);
			g3d.lineTo(10, 10, 10); 
 
			g3d.drawCube(0, 0, 0, 80, 80, 80);
 
			g3d.drawCube(100, 100, 0, 80, 80, 80);
 
 
 
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); 
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); 
			addEventListener(Event.ENTER_FRAME, enterFrame);
		}
 
		public function enterFrame(e : Event) : void
		{
			if(isMouseDown)
			{
				g3d.lineTo2D(mouseX, mouseY, 0);
			}
 
			g3d.rotateY(2);
		}
 
		public function mouseDown(e : MouseEvent) : void
		{
			isMouseDown = true; 
			g3d.moveTo2D(mouseX, mouseY, 0);
		}
 
		public function mouseUp(e : MouseEvent) : void
		{
			isMouseDown = false; 
		}
	}
}
This entry was posted in Flash, Flash 3D, Obsolete. Bookmark the permalink.

36 Responses to Simple Flash 3D drawing API