English subtitles

← Angle of Rotation - Interactive 3D Graphics

Get Embed Code
2 Languages

Showing Revision 2 created 05/24/2016 by Udacity Robot.

  1. I have my axis of rotation. It's negative X, Z. It's a good idea to normalize
  2. this, but this will do for now. If I look at my cube, it's pretty easy to figure
  3. out the diagonal directions themselves. Here is the easiest one. It goes from
  4. negative one, negative one, negative one to one, one, one. So the cylinder's
  5. axis is (2,2,2). We can also this vector's length to find the distance from one
  6. corner to another. These are the facts we need to continue. We've got the axis
  7. of rotation. We need the angle to rotate and the length of the cylinder itself.
  8. Here's three JS code that computes the cylinder's length. Three JS uses a class
  9. called Vector3. What you put in a vector 3 a point or a vectors coordinate is up
  10. to you. Perhaps a better name might have been coordinate 3 but that' pretty
  11. bulky most graphic systems you'll encounter will call coordinates vectors but
  12. it's easy enough to understand from the context what is meant. To find the
  13. cylinders axis direction and length I set up the 2 corner locations I then
  14. subtract one vector from the other using the sub vectors method. Giving a vector
  15. from one point to another. There are a huge number of vector and matrix
  16. operations supported in 3JS, subtraction is just one of many. Once we have the
  17. cylinder axis, this last line of code computes the length of this axis, which
  18. we'll need for knowing how long to make the cylinder. At this point, we have the
  19. axis of rotation The length of the cylinder, but we don't have the angle of
  20. rotation yet. However, we have everything we need to get it. Given this
  21. cylinder's access, we can dot product it with the y axis, which is where the
  22. cylinder starts at, and then, by the dot product of that and its final
  23. position... We will get the angle that we need to rotate. Remember that the dot
  24. product computes the cosine of the angle between two normalized vectors. So we
  25. normalize the cylinder's axis here and takes its dot product with the y axis
  26. vector here. This gives us the cosine of the angle. So we take the arc cosine to
  27. get the angle back in radiants. Using a dot product is a bit of overkill, by the
  28. way. Computing a dot product with a y axis like this is the same as just
  29. grabbing the y component of the cylAxis. We could've simply normalized and done
  30. this like this code here. However, unless this is a critical loop, like we're
  31. making a billion of these ornaments, I'd recommend using this first way. If
  32. someone reads or modifies this code in the future, the intent is clearer and
  33. more general. Now we have all the facts we need to make this object, the axis
  34. and angle of rotation and the length of the cylinder. So let's get cracking.
  35. Well, I guess I should mention that the sign of the theta might be a little bit
  36. questionable here. We could use the right had rule to make sure we have the
  37. direction of rotation right. Or we could use the principle of negate and try
  38. again. I learned about this practice long ago from an article in an old trade
  39. journal called SGI Insider. It was great to realize that someone else was doing
  40. what I also do. If I put a rotation in and it goes the wrong direction, just try
  41. the opposite. So feel free to do the same, as you're in good company. You could
  42. spend 15 minutes trying to figure out the sign needed after some set of matrix
  43. operations, and still have about a 50 percent chance of getting it right.
  44. Faster, more reliable is just to try it and see. That said, this practice won't
  45. help much if there are too many things to negate or if the rotation is part of a
  46. long chain of transforms. Or if you're starting from an incorrect algorithm.
  47. But, if you're feeling the math is solid, go ahead and just do it. Using this
  48. principle with my test program, I found I needed to negate the angle to move the
  49. rod to the correct place. I guess I could've thought it through and realized
  50. this is the right-hand rule, and all that kind of stuff, but nonetheless, just
  51. trying it made me realize we need to. To have a negative theta. I don't really
  52. like negative angles, I like to think positively, so I negated both the angle
  53. and the axis direction. This should give exactly the same rotation. If you
  54. rotate clockwise around one axis, rotating counter clockwise around the opposite
  55. axis' direction is the same thing.