Finally updated traqball.js, my little js lib for gimbal-lock-free 3d rotation to version 2.0. Most important improvements:
- Now its's possible to have multiple instances of trackball on one page.
- Comfortable configuration with a config object.
- Existing CSS transforms in a stylesheet will be preserved.
- It is possible to deactivate, reactivate and update a trackball.
Download from github and have fun!
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 :)
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.