Comments (3)
Hello again,
I'm sorry to have opened this issue, I don't know why I didn't notice before, but I had a 4x4 matrix value with a wrong sign. I close the issue, as I can not remove it.
Again, thank you for the impressive project, I'm delighted to enjoy it and the 3D world.
Best regards!
from 3dhop.
Hi @potenziani ,
Regarding this (playing with trackball), I'm trying to get some positions automatically (similar to animations but with trackballsphere).
I am having some complications due to the different possible rotation matrices, and it would be helpful for me to know what convention has been used for the construction of the trackball matrix.
Thank you very much in advance!
from 3dhop.
Hi @gmiguelr87
given the time that has passed, I'm not sure this answer is still needed...
Anyway, 3DHOP uses the "object in hand" metaphor: it works similarly as the old hardware trackball devices, allowing the user to define 3D roto translations using a 2D input space.
Actually, from your question I cannot understand if you are referring just to the sphere trackball, or if you are talking more in general. However, 3DHOP currently (version 4.2) provides 4 documented trackballs: turntable (default), pantilt, turntable_pan, sphere. The first three are quite similar (and allow camera animations), while the last one is a little bit different (and does not allow camera animations).
So, let start with the sphere trackball!
The sphere trackball is the generic, sphere-like interaction paradigm used in many 3D software tools.
It is implemented as a virtual trackball with six degrees of freedom, so basically it enables full and free rotation and panning on all axes, making it possible to reach every possible view direction.
In this trackball every position of the mouse in the 2D space of the canvas is mapped on a virtual 3D hemisphere. To better understand it, this figure can help:
To perform the mapping, fundamentally we have just to superimpose a hemisphere onto the viewport and then to orthographically project the mouse position (x,y,0) to this hemisphere (x,y,z). Now, if we want to rotate the camera from a point to another, we have to project both the previous mouse position (p1) and of the current position (p2) in the hemisphere. Once we have done that, we have to rotate the sphere from p1 to p2 by finding the proper rotation axis (calculated as cross-product between the p1 and the p2 vectors) and angle (approximated as Euclidean norm of the rotation axis vector). Also in this case, a figure can help in understanding:
To do all of that, the sphere trackball JavaScript file contains:
- the "rotate" function (at the end of the files) that update the values of the axis and angle of rotation ("pan" and "scale" functions are also present, but their calculations are more trivial);
- the "_computeMatrix" function (in the middle of the files) that calculates the 4X4 roto translation matrix to pass to the 3D scene.
Ok, now we can jump to the other trackballs provided by 3DHOP.
Since turntable, pantilt, and turntable_pan trackballs basically simplify the interactions reducing the degrees of freedom, their implementation is a little bit more straightforward.
To better understand these trackballs this figure can help:
In these trackballs the camera is located at P, which is defined by theta, phi, and radius. We can rotate and move freely wherever we want by changing those three values. However, we always look at, and rotate around, the local origin of the sphere (actually, we are free to move this origin wherever we want in world space, but this is another story).
To implement the above, the three JavaScript files related to these trackballs contain:
- the "rotate", "pan" and "scale" functions (at the end of the files) that update the values of theta, phi, and radius;
- the "_computeMatrix" function (in the middle of the files) that calculates the 4X4 roto translation matrices to pass to the 3D scene.
In this figure you can see the transformation matrices used for implementing rotations, pan, and zoom:
Clearly, it is quite impossible to explain trackballs in detail in this venue, and sincerely I don't know if this is enough for clarifying your doubts... however, I hope you can benefit from it!
from 3dhop.
Related Issues (20)
- Touch control HOT 2
- Modifying Touch Sensitivity HOT 3
- Resizing after full screen view in Firefox not working properly HOT 5
- keyboard input disabled HOT 2
- adding loading masks to the canvas HOT 2
- bump/normal etc HOT 1
- loading many nxs files [dynamic scene declaration] HOT 13
- Objects have limited rotation angle in certain axes (usually Y and Z) [trackballs setup] HOT 2
- Implementing 3DHOP in Rails HOT 5
- Implementing 3DHOP in Drupal HOT 3
- Setting tabindex on canvas messes with focus in Firefox HOT 2
- jQuery no-conflict mode + docker + implementing 3DHOP in Clowder HOT 51
- Allow configurable selectors HOT 1
- Data/LODs stop loading in (after using viewer for a few minutes) [nexus setup] HOT 3
- [Feature requests] Screenshot resolution multiplier; rotate plane section tool HOT 3
- Textured objects are not displayed on iOS HOT 1
- Trackballs dragging speed option HOT 3
- Input data for "animateToTrackballPosition"
- Best Tools for Rendering Very Large Meshes with Millions of Vertices/Faces in Browser
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 3dhop.