Expression Assistance: Rotate 3D layer based on null’s X/Y screen position

[Blaise Douros]

Here’s a thread with a useful expression for doing this: https://forums.creativecow.net/docs/forums/post.php?forumid=2&postid=1094295&univpostid=1094295&pview=t

I futzed with this a little. Put your interface layer in 3D space, back it waaaay up in Z space, and scale it up so it fills the screen. Then put this code in the “Orientation” expression of the interface element, where Null 1 is your Null on a 2D layer.

x = lookAt(transform.position, thisComp.layer("Null 1").transform.position)[0];
y = lookAt(transform.position, thisComp.layer("Null 1").transform.position)[1];
z = transform.orientation[2];
[x,y,z]

This uses the X and Y properties of the Null, and makes the Z property 0 at all times.

To adjust the subtlety of the interface layer’s movement, push it further back in Z space and increase the size for subtle movements, or pull it forward and scale down for more dramatic movements.

[Blaise Douros]

I originally had written something else, but realized my mistake–see above ^^

[Michael Cosner]

Thank you for the suggestion, Blaise. I hadn’t considered the LOOKAT expression as an option — I figured keeping the null layer as 2D would simplify calculations. I looked into the thread you posted and it’s an interesting approach, however, there are two things that prevent it from being the solution I need:

A) LOOKAT affects the underlying 3D layer in the opposite orientation of what I need. For example, when I move the null to the top right, the entire 3D layer turns to look in the direction of the null, shifting the top right corner of the 3D layer away from my pointer instead of closer. If there’s a method to invert the rotation calculation, that would be great.

B) I like the idea of pushing the 3D layer back into Z space to affect the rotation, however, scaling the layer back up to the original/desired size doesn’t guarantee a 1:1 resolution match of the HUD elements. Having some way to clamp the intensity value of the rotation would still be ideal.

[Walter Soyka]

I started in on a sample project:
14262_subtleorientation.aep.zip

With both a lookAt() 3D solution:

[image]

And a CC Power Pin 2D solution:

[image]

Hope this helps! Please feel free to ask any questions you might have if you dig into the project.

Walter Soyka
Designer & Mad Scientist at Keen Live [link]
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
@keenlive   |   RenderBreak [blog]   |   Profile [LinkedIn]

[Michael Cosner]

Thank you Walter for the sample project and the visuals. This is the second solution to suggest LOOKAT and I think it could work if it were possible for the LOOKAT orientation to be the inverse of what you are demonstrating.

Using your images as an example, if you see your pointer moving to the corners, notice how the corner of the 3D layer moves away from the pointer (it get’s darker)? I need the opposite to happen. I need the edges of the 3D layer (closest to the pointer) to move toward it. Does that make sense? Basically, the underlying 3D layer is bring the edges of the interface layer closer to the pointer so the user doesn’t have to go completely to the edge of the screen to select something.

I’m trying to figure out how to invert the LOOKAT orientation value for X and Y but not having much luck.

[Walter Soyka]

I’d keep the lookAt(), but point it at a dummy object that’s the inverse of the pointer — just reflect it around the center of the comp, like this (the red object):

[image]

14263_subtleorientationv2.aep.zip

Walter Soyka
Designer & Mad Scientist at Keen Live [link]
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
@keenlive   |   RenderBreak [blog]   |   Profile [LinkedIn]

[Michael Cosner]

WOW – what a fantastic solution. Thank you so much, Walter!

And thank you for providing the sample project file – it gives me a lot of valuable information on the expression setup. It’s also interesting to see how you tied the scale of the 3D solid to the camera zoom.

If I could give you a gold star, I would!

Thank you again!

[Blaise Douros]

Just for clarity–the expression above does use a 2D null, connecting to a 3D layer. Walter’s solution is also pretty elegant, so I don’t have much to add, except that mine can do what you want by simply adding two minus signs:

x = lookAt(transform.position, thisComp.layer("Null 1").transform.position)[0];
y = lookAt(transform.position, thisComp.layer("Null 1").transform.position)[1];
z = transform.orientation[2];
[-x,-y,z]

As for ensuring that the edges of the rear interface layer don’t appear on screen…set Null 1’s position to [0,0] (i.e. the farthest possible position from center), then set the z position and scale of Layer 1 so the maximum angle is as desired and the edges aren’t cut off, and Bob’s your uncle.

14264_lookattestexpression.aep.zip

[Filip Vandueren]

Hi Walter,

I remixed yours to get a 2D-3D hybrid:
apply the coordinates of a true 3D layer to the corner pin to get correct perspective. The best of both worlds.

14266_subtleorientationhybrid.aep.zip