Giter Site home page Giter Site logo

Comments (3)

gmiguelr87 avatar gmiguelr87 commented on June 11, 2024

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.

gmiguelr87 avatar gmiguelr87 commented on June 11, 2024

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.

potenziani avatar potenziani commented on June 11, 2024

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.

6dof

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:

sphere

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:

sphere1

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:

trackballs

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:

matrices

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.