Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cerulean

Basics of 3D Tweening

Recommended Posts

I didn't have much luck with my last post, and can't delete or change the topic.

 

Here's something I'm having some trouble figuring out — and perhaps it's a start to solve my other questions: how would I tween an object in 3d space along another object in 3D space?  The second object is rotated along its x-axis.  I'm trying to understand how to get the dimensions of objects placed and rotated in z-space -- what their boundaries are, and where other objects are in relation to them. 

 

So, in the attached graphic, I'd like to pin a green square to a blue bar and move it up and down. 

 

How do I know where it is in relation to points along the rotated object's body?

 

How do I know the distance to tween?

 

In pseudocode:

 

 

 

greenBox.x = blueBar.x;
greenBox.y = blueBar.y;
TweenMax.to(greenBox,1,{y:blueBar.y + blueBar.height, z:"some distance that is appropriate to the height I've tweened"});
 

This doesn't work.  I am almost certainly approaching this wrong, but after some time spent poring through matrix3D's and perspectivePositions and the like, I feel I am simply missing some very obvious point — thanks for any help.

post-8681-0-57890000-1365648149_thumb.jpg

Link to post
Share on other sites

This is a little beyond the scope of what we typically help with in these forums, but I'll offer a few things that might point you in the right direction:

  1. The perspective and vanishing point stuff doesn't matter when you're plotting things in 3D - those things only come into play when you're projecting/translating 3D stuff into the 2D view (screen). So in your case, it'd only matter if you're literally trying to only animate x and y along the edge of the box (without changing z). 
  2. You could create a matrix3D with the coordinates at the top of your box (basically an identity matrix except the tx and ty would be changed to the coordinates of the corner) and then multiply that matrix with the box's matrix3D and that result would give you the new coordinates.
  3. Or you could look into using the Matrix3D's transformVector() method to just figure out where the box's top corner would end up after being run through that matrix. 
  4. This is a great article about 2D matrices that explains some basic concepts that also apply to 3D matrices: http://www.senocular.com/flash/tutorials/transformmatrix/
  5. You could approach this without matrices (as long as you don't have any crazy rotations happening on multiple axis) and just use math. Like if the rotationX of the box is 110 degrees and the top corner started at x:100, y:200, z:0, you know that x won't change but you'd calculate the others like:

 

var angle:Number = box.rotationX * Math.PI / 180; //radians
var newZ:Number = Math.cos(angle) * nativeBoxHeight;
var newY:Number = box.y + Math.sin(angle) * nativeBoxHeight;

I haven't double-checked that math at all, but hopefully you get the concept. Keith Peters has a great book that covers this type of stuff - ActionScript Animation I think it's called. 

 

I hope that helps!

  • Like 2
Link to post
Share on other sites

Thanks. That's very helpful. Granted it's kind of outside the area of the forums — but since TweenMax tweens in 3D I thought it might just nudge inside the box, so to speak. I may go your math route, as I'm on the clock on a project, and read Senocular's explanation later…

 

I've got (and long ago read) Peters' book -- it's great. I'll have to dig it out again.

 

I suppose I was somewhat surprised that the 2.5D in Flash still had such a learning curve. That some things were not a little more obvious — for instance, in the IDE it's quite evident that an object placed in 3D space has "two heights" -- the actual height of the object and the perspective height, which is how high it appears on the screen. But I could not for the life of me find any reference in the API to easily get those perspective dimensions — although they're right there in the IDE properties box. — The interstice between what you have to calculate on your own (as per your very helpful advice) and what Flash does behind your back for you (correctly scaling things and skewing things as they move about in 3D space) is a bit confusing to me…

 

In any case, thanks very much!

 

Robert

Link to post
Share on other sites

A quick question after studying this a while:

 

  • You could create a matrix3D with the coordinates at the top of your box (basically an identity matrix except the tx and ty would be changed to the coordinates of the corner) and then multiply that matrix with the box's matrix3D and that result would give you the new coordinates.
  • Or you could look into using the Matrix3D's transformVector() method to just figure out where the box's top corner would end up after being run through that matrix.
I'm almost getting this, but if you have a moment, could you explicate a bit? — I read Senocular's piece, but, for instance in point 1, do you mean if you need to translate a point from one 3D space to another you would matrix multiply the first by the second? In point 2, what do you mean by "that matrix"?

 

Is there a general method (apart from going through the intermediary of transforming points to global and back) of translating a point from one 3D space to another?

 

I searched to see if Senocular had anything on the matrix3D but nothing…

 

Anyway, if this is all too far afield, I accept…

Link to post
Share on other sites

Generally in order to translate a point from one 3D space to another, you must do matrix multiplication, yes. Or you can calculate individual portions with formulas like Senocular described in 2D like this:

 

x' = x*a + y*c + tx

y' = x*b + y*d + ty

 

It's just that with 3D matrices, there are a lot more values.

 

Think of a matrix like a filter or lens of sorts. With no filter, it's an identity matrix which looks exactly the same as "normal". If you've got a point at x:0, y:200, after applying the matrix (filter in this analogy), it's still at x:0, y:200. But if the matrix has rotations and/or scales and/or skews or translations applied, when you look at your x:0, y:200 point through that matrix (filter), it will most likely be in a completely different spot, like maybe x:100, y:77.5. You just need to build the formula to figure the new values out which is what Senocular's formula above does for 2D, and you can Google the formulas for 3D matrix math. But I think some of Adobe's classes provide methods for doing those calculations for you, like the transformVector() method I mentioned above. You'd take the rotated matrix3D and feed it your original positional vector [0,200,0].

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×