0

I'm working on a javascript animation which consists of a fake 3D cylinder rotating on its Z axis. I've done it within After Effects but whatever, this is a code/maths question.

I have a "Zrot" variable driving some shapes changes, which "simulates" a rotating 3D object on one axis - so this is not 3D but 2D.

enter image description here

Now I need to be able to rotate my layer, but when doing it, the angle looks weird.

enter image description here

What I'm searching for is a formula to calculate a "zrot" offset based on the layer rotation.

var frontRot = 78;
var zRotOffset = frontRot * ...

enter image description here.

If you know some 3D softwares, it is kind of like local rotation VS global rotation.

enter image description here

Can anyone help ?

Thanks !

gordie
  • 1,637
  • 3
  • 21
  • 41
  • 1. I do not see what do you mean by looking fake? 2. you need to describe your coordinate system first ... so we are not guessing what axis is what and what "rotates" around what from which start and in which direction ... – Spektre Jul 15 '19 at 07:55
  • @Spektre: see last image... – gordie Jul 15 '19 at 08:27
  • Can you not just change the order in which you apply the rotations? – samgak Jul 15 '19 at 10:05
  • What do you mean ? There is no real 3D rotation, it's just an animation... – gordie Jul 15 '19 at 11:23
  • @gordie I think the easiest would be to use [3D transform matrices](https://stackoverflow.com/a/28084380/2521214) compute the rotations as usual for 3D gfx and then extract x,y basis vectors from it and render 2D graphics with them. Otherwise you can not safely do object local coordinate system rotations ... global rotations are easy you just scale x or y axis and or rotate the xy plane – Spektre Jul 15 '19 at 17:14

0 Answers0