How to rotate gradient along with sides of 3D cube in Flash - actionscript 3.0

Question

Hello I got goal to achieve, 3d cube manipulated with mouse with gradient filling on each wall.

I found some source codes coresponding to gradients and 3d rotating cube but here is the problem:

When i put these two things together the effect looks like the cube was a wireframe with transparency to some gradient background hidden behind the first plane solid black background. Gradient always stays still.

Method which rotates/displays cube got at input three parameters rotx .roty, rotz i'd like to make use of it and apply it to gradients displayed on each side. gradient got own matrix but i don't have a clue how and when manipulate this gradient to get desired effect - i mean transform/rotate gradient in way ro look like it is painted on side of cube and tranform along to it 3d position. I guess that each side should have separate gradient matrix dor each side but what to do to transform this matrix to fit along with rotx,roty, i rotz. Can anyone help me?

here is source for gradient http://snipplr.com/view.php?codeview&id=7050

and site where you can get cube fla file http://www.flashandmath.com/flashcs4/cs4simple3d/index.html

and here is code of .fla file from link above with my modifications

http://pastebin.com/fdc431a4

Answer 1

this is not really possible ... perspective distortion is not an affine transformation, which is why there is not matrix that'd be a suitable parameter to create a gradient with the correct perspective distortion ...

i think the most simple way for flash 10 is to actually go a different way ... all DisplayObjects can be transformed in space, so you simply represent any face by a DisplayObject, perform all transformations on it, and then all that is left to do is z-sorting ...

---

edit: the approximation you are looking for is quite impossible ... imagine a cube, facing you, having a linear gradient from black to white, from the top to the bottom ... as you start turning it right, the lines of the gradient no longer stay parallel, instead they start forming a conical gradient, all converging in one point ...

the approach in the 2nd paragraph is exactly what you are looking for ... create a DisplayObject (Shape should do it, you don't need MovieClips for that), draw a gradient to it, and then transform it in 3d space using x, y, z, rotationX, rotationY and rotationZ ... and as soon as you use more than one object, you will need to manually z-sort them ... if you want 3d-gradients, you will have to drop that code and use this approach, which is by far the most simple ...

your problems with AS3 really doesn't have anything to do with the language ... you should reconsider your approach ... starting with a new language and an unknown API, trying to enhance a 3d-engine without having knowledge of the theory behind, is not really the best thing to do ...

you should start getting used to the language first ... once you feel comfortable with it, i think the best way to go for you is using a good AS3 3d engine, such as sandy, papervision, away3d, alternativa or whatever ... for example with sandy, you create a sky box (a 3d cube) and assign any materials you want to it's faces and you're done ... and also, these engines interoperate with 3d modeling software, so instead of just creating some polyhedrons by hand and playing around with them, you can import complex model and do some pretty cool stuff ... but do things in logical order and with sufficient theoretical knowledge ...

good luck then ... ;)

---