<p>Ratchet Freak's answer might work. I'm not sure, I didn't spend much time on it because I didn't know how to create the quaternion from the dot and cross product as described.</p>

<p>What we ended up doing was:</p>

<ul>
<li><p>Project the center of the gizmo to screen space.</p></li>
<li><p>Get the angle between the vectors GizmoToLastMouse and GizmoToCurrentMouse using the dot product formula: acos(Dot(GizmoToLastMouse, GizmoToCurrentMouse) / (GizmoToLastMouse.Length() * GizmoToCurrentMouse.Length()))</p></li>
<li><p>Get the sign of the angle by taking the cross of the GizmoToLastMouse and GizmoToCurrentMouse and dotting it with the screen normal.</p></li>
<li><p>Get another sign (times 1.0f or -1.0f) based on the orientation of the gizmo, by taking the dot product between the rotated axis and a vector from the center of the gizmo to the camera</p></li>
<li><p>Apply the rotation based on the angle and the two signs to the appropriate axis</p></li>
</ul>

<p>There might be a better way to do it, but this works pretty well for our needs.</p>

CC BY-SA 3.0
2017-01-19T10:18:51.607Z
a quaternion is built as `quat(cos(angle/2), axis*sin(angle/2))` and you know that the dot product us equal to cos(angle) times the product of the lengths and the cross product is the axis times sin(angle) times the product of the lengths. Normalize it and you can easily get the quaternion of the same rotation but with double the angle. To get the proper quaternion you can do `slerp(unit, quat, 0.5)` which after inlining ends up as `normalize(unit+quat);`
ratchet freak
CC BY-SA 3.0
2017-01-17T17:54:11.663Z
2017-01-18T14:39:24.213Z
2017-01-18T14:39:24.213Z
0xfeedbacc
<p>Map the mouse position to the circle by drawing an imaginary line between the mouse and the center of the gizmo on the plane of the current circle. Do this for the start and current positions.</p>

<p>Then you can easily get the quaternion rotation around the center from the start to the end by doing <code>normalize(quat(1+dot(v_1, v_2), cross(v_1, v_2)))</code>.</p>

<p>This works because the dot product is the cos of the angle between the vectors and the cross is the vector perpendicular to the 2 vectors (aka the rotation angle) and has length of the sin of the angle between the vectors. This means that you can create the double quaternion out of them. Then you can nlerp that double quaternion with the unit quaternion to get the rotation you need.</p>

<p>However with that information you can do an arcball by projecting the mouse onto the ball that is the gizmo and using the start and end vectors that way.</p>

CC BY-SA 3.0
2017-01-19T07:49:33.577Z
THis answer really needs a picture
joojaa
CC BY-SA 3.0
2017-01-16T11:53:27.893Z
2017-01-16T11:53:27.893Z
ratchet freak
<p>I need to implement translation, scaling and rotation gizmos and I'm having trouble with the rotation gizmo. Basically I don't know how to translate the mouse movement to determine in which direction to rotate the object.</p>

<p>By rotation gizmo (widget) I mean something like the below:</p>

<p><a href="https://i.sstatic.net/LVQ2Y.jpg"><img src="https://i.sstatic.net/LVQ2Y.jpg" alt="enter image description here"></a></p>

<p>For the translation and scaling gizmos, which are represented as 3 axes, I do the following: I make a vector of the difference between the previous and current mouse position in screen space. Then multiply this vector by the inverse of the view and projection matrices, which gives me a vector of the mouse movement in world space. Then I take the dot product of the vector in world space with the  selected axis. This allows me determine if the mouse movement is in line with the axis or away from the axis. </p>

<p>But I can't do the same thing for the rotation gizmo. The rotation gizmo is represented as 3 circles, each representing a rotation around an axis. Once a circle is clicked, I need to find some way to translate the mouse movement to determine which direction to rotate the object around the selected axis. I don't know how to do this. Please help.</p>

<p>It is important to note that I am using color picking and not raycasting to determine where the gizmo was clicked. This means that I don't have the point at which the ray hits the gizmo in world space to start from. I mention this because I've looked at examples that use raycasting like libgizmo and I don't think I can do the same thing.</p>

<p>Thanks in advance for any help.</p>

CC BY-SA 3.0
2017-01-13T18:54:45.193Z
It took me a second to understand what you meant by a rotation gizmo. I added an image of one in case it's helpful (i think you can't add images until you have more reputation sadly!).  If you have a more appropriate image in mind, feel free to let me know and i can change the image.
Alan Wolfe
CC BY-SA 3.0
2017-01-13T18:57:27.513Z
Thanks for adding the image Alan. You are right, I think it will make things clearer.
0xfeedbacc
CC BY-SA 3.0
2017-01-14T15:34:05.063Z
Fwiw I think you are right. Using color based selection isn't going to work for this.
Alan Wolfe
<3d>
How to translate mouse movement to a rotation gizmo?
0xfeedbacc
# How to translate mouse movement to a rotation gizmo?

(Asked by: username_0 on 2017-01-13)

I need to implement translation, scaling and rotation gizmos and I'm having trouble with the rotation gizmo. Basically I don't know how to translate the mouse movement to determine in which direction to rotate the object.

By rotation gizmo (widget) I mean something like the below:

[![enter image description here](https://i.sstatic.net/LVQ2Y.jpg)](https://i.sstatic.net/LVQ2Y.jpg)

For the translation and scaling gizmos, which are represented as 3 axes, I do the following: I make a vector of the difference between the previous and current mouse position in screen space. Then multiply this vector by the inverse of the view and projection matrices, which gives me a vector of the mouse movement in world space. Then I take the dot product of the vector in world space with the selected axis. This allows me determine if the mouse movement is in line with the axis or away from the axis.

But I can't do the same thing for the rotation gizmo. The rotation gizmo is represented as 3 circles, each representing a rotation around an axis. Once a circle is clicked, I need to find some way to translate the mouse movement to determine which direction to rotate the object around the selected axis. I don't know how to do this. Please help.

It is important to note that I am using color picking and not raycasting to determine where the gizmo was clicked. This means that I don't have the point at which the ray hits the gizmo in world space to start from. I mention this because I've looked at examples that use raycasting like libgizmo and I don't think I can do the same thing.

Thanks in advance for any help.

**Tags:** 3d

> **Comments:**
> **username_1**: It took me a second to understand what you meant by a rotation gizmo. I added an image of one in case it's helpful (i think you can't add images until you have more reputation sadly!).  If you have a more appropriate image in mind, feel free to let me know and i can change the image.  
> **username_0**: Thanks for adding the image username_1. You are right, I think it will make things clearer.  
> **username_1**: Fwiw I think you are right. Using color based selection isn't going to work for this.  

---

## 2 answers

### Answer by username_0 on 2017-01-17. Score: 3 | Accepted answer

username_2 username_2's answer might work. I'm not sure, I didn't spend much time on it because I didn't know how to create the quaternion from the dot and cross product as described.

What we ended up doing was:

* Project the center of the gizmo to screen space.
* Get the angle between the vectors GizmoToLastMouse and GizmoToCurrentMouse using the dot product formula: acos(Dot(GizmoToLastMouse, GizmoToCurrentMouse) / (GizmoToLastMouse.Length() \* GizmoToCurrentMouse.Length()))
* Get the sign of the angle by taking the cross of the GizmoToLastMouse and GizmoToCurrentMouse and dotting it with the screen normal.
* Get another sign (times 1.0f or -1.0f) based on the orientation of the gizmo, by taking the dot product between the rotated axis and a vector from the center of the gizmo to the camera
* Apply the rotation based on the angle and the two signs to the appropriate axis

There might be a better way to do it, but this works pretty well for our needs.

> **Comments:**
> **username_2**: a quaternion is built as `quat(cos(angle/2), axis*sin(angle/2))` and you know that the dot product us equal to cos(angle) times the product of the lengths and the cross product is the axis times sin(angle) times the product of the lengths. Normalize it and you can easily get the quaternion of the same rotation but with double the angle. To get the proper quaternion you can do `slerp(unit, quat, 0.5)` which after inlining ends up as `normalize(unit+quat);`  

---

### Answer by username_2 on 2017-01-16. Score: 2

Map the mouse position to the circle by drawing an imaginary line between the mouse and the center of the gizmo on the plane of the current circle. Do this for the start and current positions.

Then you can easily get the quaternion rotation around the center from the start to the end by doing `normalize(quat(1+dot(v_1, v_2), cross(v_1, v_2)))`.

This works because the dot product is the cos of the angle between the vectors and the cross is the vector perpendicular to the 2 vectors (aka the rotation angle) and has length of the sin of the angle between the vectors. This means that you can create the double quaternion out of them. Then you can nlerp that double quaternion with the unit quaternion to get the rotation you need.

However with that information you can do an arcball by projecting the mouse onto the ball that is the gizmo and using the start and end vectors that way.

> **Comments:**
> **username_3**: THis answer really needs a picture  

---

