Nach längerer Zeit habe ich traqball.js, meiner kleinen library für Gimbal-Lock freie 3D-Rotation von HTML-Elementen ein Update verpasst. Wichtigste Verbesserungen:

Source liegt auf github. Have fun!

Beispiel öffnen


3 Kommentare zu „Update: traqball 2.0“

  1. Kommentar by Derek Di. 29. Mai 2012, 06:03


  2. Kommentar by SocialBlogsite Mi. 20. Jun 2012, 04:34

    It was very hard for me to add scaling to the transformation, but I got it working! :)

    The problem now is that I’m trying to rotate an element which is rotated by another instance of traqball, and every time I rotate it the scale of the parent is inherited, resulting in it being applied twice. It even shows in the css as scale(.5), along with the matrix.
    The scaling is not being added by my extra code, but by my style sheet, and your code is passing it down from the parent.
    Is that a webkit normal behavior? or something you can help?

    Thanks for your tool. It reaally made my life easier :)

  3. Kommentar by SocialBlogsite Mi. 20. Jun 2012, 09:44

    Disregard the previous Message!
    As an old friend used to say: „The problem wasn’t the computer, but the attachment“ hehe.
    So I fixed the scaling issue. My bad.

    If you can take a look to this page, I’d appreciate your help to get a trackball to compensate parent’s rotation so it matches the viewer’s orientation. It seems your trigonometry flows like your speech, unlike mine.

    In my head I think of inverting all the rotating values in rotate3d() and matrix3d()… but after seeing how you need to re-calculate the angles and axis every time… I think there’s more than that required to do it properly.

    As it is now, it’s difficult to predict the required rotation when the element to control is inside another rotated element. Rotating X could end up rotating Y… To me it’s like trying to control a RC airplane, when it’s flying in my direction, or worse.

    Any code, tip, or link will be appreciated.

    You should consider to build a CSS scene builder :), with those 3D arrows with multiple uses, like rotate, translate, scale, etc. Probably a little svg or canvas object would do it, although it’s pretty easy to reproduce with divs. All the magic will be in keep the orientation of the dragging with the selected element.

    Good work.