As part of a larger project I needed to create wedges of variable sizes using Away3D. Here’s the first results.
The Wedge class has properties for:
- outerRadius = 200
- innerRadius = 175
- degrees ( sweep of the wedge ) = 45
- startAngle = 0
- material = rnd WireColorMaterial
All of these properties have defaults so it’s quick and easy to create a Wedge:
var wedge : Wedge = new Wedge(); _view.scene.addChild( wedge );
The Wedge class itself extends Mesh which contains the Face upon which the drawing is made.
The code for drawing the semi-circles comes from a class for doing essentially the same thing in 2D. I expected that it would be very easy to convert the 2D version to 3D by just adding a 0 for the z-coordinate. That’s partially true. Just drawing two arks and then connecting the end points was very easy to do. Initially I was working with a WireFrameMaterial which only draws the outline of the shape being drawn. When I switched to a WireColorMaterial which fills in the shape with a color I got an unexpected result which you can see below.
I didn’t consider that I was drawing the outer ark beginning at the startAngle and then returning back to the startAngle to draw the inner ark. Along the way I stored the start and end points for each ark so that I could draw straight lines to create the caps at each end. If you have any experience drawing things like this you’ll see right off what my error was – winding. I didn’t have a continuously drawn line that could be filled in.

The solution was easy enough in principle:
- Draw the outer ark as before.
- Then draw a line down to where the inner ark ends. ( startAngle + degrees )
- Then draw the inner ark but this time start at the value ( startAngle + degrees ) and work back to ( startAngle ). Basically draw the inner ark in the opposite directing of the outer ark.
- Then connect the end of the inner ark with the beginning of the outer ark.
Honestly, this took at least an hour to get sussed. I tried the obvious, and simplest, solution of just looping backward through the points but that didn’t work and I couldn’t figure out why. So I tried other crazy approaches before returning to the original approach which I eventually got to work because I noticed that I hadn’t changed a + sign to a – sign. Oy!
At least along the way I came up with some not unattractive designs. :-)
Explorer
Below you can explore various inputs for the Wedge just to play around with.
| view source |
Data Visualization
I originally made the Wedge class to be used in some data visualization work I’m doing. These are just four meaningless wedges rotating around to see what sort of effect I’ll get. Not sure if the data visualization will be very good. But it’ll look neat’o. :-)
|
|
| view source |
Z-ordering
I was really hoping to drop a sphere in the center of the wedges but you can see in the example below that isn’t going to be possible. The z-ordering of Away3D just can’t make since of this. I tried using all 3 settings:
- Renderer.BASIC
- Renderer.CORRECT_Z_ORDER
- Renderer.INTERSECTING_OBJECTS
and got a mess for each one. Fingers crossed that Away3D 4.0 will have some more advanced sorting that is GPU accelerated.
|
|
| view source |
Random notes
Don’t forget if you are going to apply a filter to something like I did here that you have to set _wedge.ownCanvas = true; otherwise the filters won’t be applied. I was hoping that by leaving the ownCanvas = false I would be able to solve the z-sorting issue but it had no affect.
In with the source code is an Arc class. I’m not using that here because of the drawing issue I mentioned earlier. The Ark class will draw a line segment for you. But it only goes in one direction. So it was of no use to me here. I thought about adding the code to draw in either direction in the Ark but decided against it. Perhaps in the future.
And yes I know that in mathematics it should be arc and not ark but I kept mistyping arc with a k so I just gave up and renamed the class so that it coincided with my typing prejudice to spell it as ark. You got a problem with that? :-)
I’ll be sure to post my data visualization results when they’re ready.




Lovin it ! Cool stuff
Do you think it could be usable for a preloader ? How well could we keep a low filesize and fast init ?
@mika Sure, this would make a fine preloader. The Wedge class itself is very small.
@mika What am I talking about. No, you probably don’t want to use this as a preloader because you need the Away3D to run this. I’m not sure how big this would be with the necessary Away3D files piled in as well.
polygeek, your “mathematics it should be arc and not ark” cracked me up! cool concept
David Ewing recently posted..Want More Clicks in Google? Don’t Rank #1
Yeah, I know. But I have the hardest time typing “arc”. Finally I just gave up. I even changed the variables from “_arc” to “_ark”.
Simply Brilliant polygeek :)
BTW the one below data visualization, the 3 wedges rotating like that reminded me of that Jodie foster movie “contact” and the design the aliens send to make the machine. Have you seen it? :)
@Aarav Yes, I’ve seen it. It’s one of my favorite films/books. I thought the same thing.
Just awesome ! i will try it ;)
Thanks for the article.
Awesome stuff! Great work polygeek :)