<p>Here's a more complete answer from my comment. The end product we want is:</p>

<pre><code>Projection * ViewTranslate * Model * ViewRotate
</code></pre>

<p>All are 4x4 matrices. Where model is your models transformations. To implement you can just separate out the view's translate and rotate during your draw.</p>

<p>If you're using an abstraction that requires you to use Proj * View * Model. Or you just really don't want to ruin your own abstraction that follows that pattern. You'll need to modify model to cancel out views rotational part and put it on the right side:</p>

<pre><code>Model = ModelTranslate * View^-1 * ViewTranslate * ModelRotate * ViewRotate 
      = ModelTranslate * ViewRotate^-1 * ModelRotate * ViewRotate
</code></pre>

<p>Here's some of my code that does the above. It does not matter if model or view is translated, objects will still rotate around their local origins:</p>

<pre><code>glm::vec2 diff = (prevMousePos - mousePos) * rotSpeed;
glm::mat4 rotX = MathHelp::matrixRotateY(diff.x);
glm::mat4 rotY = MathHelp::matrixRotateX(diff.y);

// Decompose the translate and rotate part of view
glm::mat4 viewT, viewR;
Decompose(cam-&gt;view, viewT, viewR);

// Decompose the translate and rotate part of model
glm::mat4 modelT, modelR;
Decompose(exampleObj-&gt;model, modelT, modelR);

exampleObj-&gt;model = modelT * glm::inverse(viewR) * rotX * rotY * viewR * modelR;
</code></pre>

<p>This preserves the existing rotation and translation in exampleObj->model as the function gets called continually applying small rotations. And assumes you'll be using Proj * View * Model.</p>

<p>Lastly decompose just separates out the 3x3 rotation/scaling from the translational part:</p>

<pre><code>void Decompose(glm::mat4 m, glm::mat4&amp; t, glm::mat4&amp; r)
{
    glm::mat4 I4 = glm::mat4(1.0f); // Identity
    for (unsigned int i = 0; i &lt; 4; i++)
    {
        for (unsigned int j = 0; j &lt; 4; j++)
        {
            if (i == 3 || j == 3)
            {
                r[i][j] = I4[i][j];
                t[i][j] = m[i][j];
            }
            else
            {
                r[i][j] = m[i][j];
                t[i][j] = I4[i][j];
            }
        }
    }
}
</code></pre>

CC BY-SA 4.0
2018-12-30T07:24:47.907Z
Wahoo!  That did it!  It took a little trial-and-error to get the Java translation correct, but it works perfectly.  Thanks a million!!!  I've added the working code as another answer below.  it won't let me up-vote your answer, but this is it.
Mike
CC BY-SA 4.0
2018-12-23T05:58:48.093Z
2018-12-23T05:58:48.093Z
Andrew Wilson
<p>Here is the change to the code that made the whole thing work correctly:</p>

<pre><code>@Override public boolean touchDragged( int screenX, int screenY, int pointer )
{
    lastX -= screenX;
    lastY -= screenY;

    // distance of mouse movement
    screenAng = Vector3.len( lastX, lastY, 0f );
    // direction vector of the AOR
    screenAOR.set( lastY/screenAng, lastX/screenAng, 0f );

    if ( touchedButton == 0 )
    {   // rotate the part

        // transform the screen AOR to a model rotation

        Matrix4 camT, camR, camRi, modT, modR;
        camT = new Matrix4();
        camR = new Matrix4();
        modT = new Matrix4();
        modR = new Matrix4();

        decompose( camera.view, camT, camR );
        camRi = camR.cpy().inv();

        decompose( cubes[ selectedCube ].modelInstance.transform, modT, modR );

        tempMat.idt()
                .mul( modT )
                .mul( camRi )
                .rotate( screenAOR, -screenAng )
                .mul( camR )
                .mul( modR );

        cubes[ selectedCube ].modelInstance.transform.set( tempMat );
    }
    else if ( touchedButton == 1 )
    {   // rotate the camera

        // transform the AOR from screen CS to camera CS

        // get the camera transformation matrix
        tempMat.set( camera.view );
        tempMat.translate( camera.position );
        tempMat.inv();

        // transform the screen AOR to a world AOR
        worldAOR = transform( tempMat, screenAOR, worldAOR ).nor();

        // apply the rotation of the angle about the world AOR to the camera
        camera.rotateAround( Vector3.Zero, worldAOR, screenAng/5.5f );
        camera.update();
    }

    lastX = screenX;
    lastY = screenY;
    Gdx.graphics.requestRendering();
    return true;
}

// --------------------------------------------------------------------- //
Vector3 transform( Matrix4 mat, Vector3 from, Vector3 to )
{
    // transform a vector according to a transformation matrix

    to.x = from.dot( mat.val[ Matrix4.M00 ], mat.val[ Matrix4.M01 ],
            mat.val[ Matrix4.M02 ] )+mat.val[ Matrix4.M03 ];
    to.y = from.dot( mat.val[ Matrix4.M10 ], mat.val[ Matrix4.M11 ],
            mat.val[ Matrix4.M12 ] )+mat.val[ Matrix4.M13 ];
    to.z = from.dot( mat.val[ Matrix4.M20 ], mat.val[ Matrix4.M21 ],
            mat.val[ Matrix4.M22 ] )+mat.val[ Matrix4.M23 ];
    return to;
}

// --------------------------------------------------------------------- //
void decompose( Matrix4 m, Matrix4 t, Matrix4 r )
{
    Matrix4 I4 = new Matrix4(); // Identity
    for ( int i = 0; i &lt; 4; i++ )
    {
        for ( int j = 0; j &lt; 4; j++ )
        {
            if (i == 3 || j == 3)
            {
                r.val[ i*4+j ] = I4.val[ i*4+j ];
                t.val[ i*4+j ] = m.val[ i*4+j ];
            }
            else
            {
                r.val[ i*4+j ] = m.val[ i*4+j ];
                t.val[ i*4+j ] = I4.val[ i*4+j ];
            }
        }
    }
}
</code></pre>

CC BY-SA 4.0
2018-12-30T07:39:13.133Z
2018-12-30T07:39:13.133Z
Mike
<p>I am writing 3D graphics software in Java using the LibGDX framework (which is a front-end for OpenGL), and am baffled by a transformation problem.  How do I rotate the orientation of the camera or models being displayed by the dx and dy inputs from a mouse?</p>

<p><a href="https://github.com/mbrown85209/Space/blob/master/Space.java" rel="nofollow noreferrer">Click here</a> to view the full source code of a concise demo in github.com</p>

<p>But, here is the method where I'm certain the problem and solution will be found:</p>

<pre><code>@Override public boolean touchDragged( int screenX, int screenY, int pointer )
{
    lastX = screenX-lastX;
    lastY = screenY-lastY;

    // distance of mouse movement
    screenAng = (float) Math.sqrt( lastX*lastX + lastY*lastY );
    // direction vector of the AOR
    screenAOR.set( lastY/screenAng, lastX/screenAng, 0f );
    if ( touchedButton == 0 )
    {
        cubes[ selectedCube ].modelInstance.transform.rotate( screenAOR, screenAng );
    }
    else
    {
        camera.rotateAround( Vector3.Zero, screenAOR, -screenAng/5.5f );
        camera.update();
    }

    lastX = screenX;
    lastY = screenY;
    Gdx.graphics.requestRendering();
    return true;
}
</code></pre>

<p>EDIT: Thanks to Andrew Wilson for his comment below.  I edited the camera section and it works properly now.  Still working on the model section...</p>

<pre><code>    {

        // transform the screen AOR to a world AOR

        // get the camera transformation matrix
        tempMat = new Matrix4( camera.view );
        tempMat.translate( camera.position );
        tempMat.inv();

        // transform the screen AOR to a world AOR
        worldAOR = transformThings( tempMat, screenAOR, new Vector3() ).nor();

        // apply the rotation of the angle about the world AOR to the camera
        camera.rotateAround( Vector3.Zero, worldAOR, screenAng/5.5f );
        camera.update();
    }
</code></pre>

<p>EDIT: I edited the model section and it still is giving me some grief - it looks like it's orbiting the world origin instead of rotating around the model origin.  Here's what it looks like so far:</p>

<pre><code>    {

        // transform the screen AOR to a model AOR

        // get inverse of the camera transformation matrix
        tempMat.set( camera.view );
        tempMat.translate( camera.position );
        tempMat.inv();

        // get inverse of the model transformation matrix
        Vector3 tempPos = cubes[ selectedCube ].position;
        cubes[ selectedCube ].modelInstance.transform.translate( tempPos.cpy().scl( -1 ) );
        tempMat2.set( cubes[ selectedCube ].modelInstance.transform );
        tempMat2.inv();

        // multiply the camera and model matrices together
        tempMat.mul( tempMat2 );

        // transform the screen AOR to a model AOR
        modelAOR = transformThings( tempMat, screenAOR, modelAOR ).nor();

        // apply the rotation of the angle about the model AOR to the model
        cubes[ selectedCube ].modelInstance.transform.rotate( modelAOR, -screenAng );
        cubes[ selectedCube ].modelInstance.transform.translate( tempPos );
    }
</code></pre>

<p>Here is an image that the demonstrates the problem:</p>

<p><a href="https://i.sstatic.net/i3fNL.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/i3fNL.png" alt="results of wonky math"></a></p>

<p>I want the object to rotate in the direction it is dragged by the mouse, no matter which direction it happens to be orientated at the time. As it is now, when I first drag the mouse to the right, the object rotates to the right about the screen Y axis as expected; but then when I drag the mouse upward I want the object to rotate upward about the screen X axis, but instead it spins to the left about the screen Z axis. Think of it like a floating ball in a bowl of water - whichever way you swipe at it, it ought to rotate in that direction.</p>

<p>It seems to me that the mouse movement is transforming the objects directly in their local coordinate system; but instead I think I need to transform the axis of rotation itself from the Screen Coordinate System into the Object Coordinate System before applying it to the object. I just can't figure out how to do it.</p>

<p>I would really appreciate any insight or help to resolve this; I'm running out of hair to pull out... Thanks in advance. </p>

CC BY-SA 4.0
2018-12-20T00:25:52.303Z
An intuitive rotation depends on the view direction. Multiply your change in transformation by the inverse view matrix. Then apply the change in transformation to the overall transformation of the object. Think of it like undoing whatever rotation you did with the view. If you have a translation in your camera you'll have to deal with that also.
Andrew Wilson
CC BY-SA 4.0
2018-12-20T05:54:07.397Z
Ok. Now I'm making progress.  I got the camera rotation working properly:  I created a temporary matrix from the camera, translated the position out of it, inverted it, then rotated the screenAOR about it, and Boom!  It worked! Yahoo.
Mike
CC BY-SA 4.0
2018-12-20T06:10:07.200Z
I added the working code above as an EDIT.
Mike
CC BY-SA 4.0
2018-12-22T05:16:53.117Z
I'm still having trouble getting the model to rotate properly.  I translate and invert the camera into a temporary matrix (as in the view rotation section), then I translate the invert the model instance (in a similar manner) into another temporary matrix, then I multiply them together and transform the screen AOR into a model AOR, then rotate the model instance, and lastly translate the model back to it's position.
Mike
CC BY-SA 4.0
2018-12-22T05:58:37.900Z
The model seems to be rotating properly, except that it is as though it didn't get translated to the origin to be rotated, because as it rotates it is also orbiting the origin. Dang! @Andrew can you see anything I'm missing? I'll add the code in another EDIT above.
Mike
<transformations><computational-geometry>
Rotate a model or a view with mouse input to produce intuitive results
Mike
# Rotate a model or a view with mouse input to produce intuitive results

(Asked by: username_0 on 2018-12-19)

I am writing 3D graphics software in Java using the LibGDX framework (which is a front-end for OpenGL), and am baffled by a transformation problem. How do I rotate the orientation of the camera or models being displayed by the dx and dy inputs from a mouse?

[Click here](https://github.com/mbrown85209/Space/blob/master/Space.java) to view the full source code of a concise demo in github.com

But, here is the method where I'm certain the problem and solution will be found:

```
@Override public boolean touchDragged( int screenX, int screenY, int pointer )
{
    lastX = screenX-lastX;
    lastY = screenY-lastY;

    // distance of mouse movement
    screenAng = (float) Math.sqrt( lastX*lastX + lastY*lastY );
    // direction vector of the AOR
    screenAOR.set( lastY/screenAng, lastX/screenAng, 0f );
    if ( touchedButton == 0 )
    {
        cubes[ selectedCube ].modelInstance.transform.rotate( screenAOR, screenAng );
    }
    else
    {
        camera.rotateAround( Vector3.Zero, screenAOR, -screenAng/5.5f );
        camera.update();
    }

    lastX = screenX;
    lastY = screenY;
    Gdx.graphics.requestRendering();
    return true;
}

```

EDIT: Thanks to username_1 for his comment below. I edited the camera section and it works properly now. Still working on the model section...

```
    {

        // transform the screen AOR to a world AOR

        // get the camera transformation matrix
        tempMat = new Matrix4( camera.view );
        tempMat.translate( camera.position );
        tempMat.inv();

        // transform the screen AOR to a world AOR
        worldAOR = transformThings( tempMat, screenAOR, new Vector3() ).nor();

        // apply the rotation of the angle about the world AOR to the camera
        camera.rotateAround( Vector3.Zero, worldAOR, screenAng/5.5f );
        camera.update();
    }

```

EDIT: I edited the model section and it still is giving me some grief - it looks like it's orbiting the world origin instead of rotating around the model origin. Here's what it looks like so far:

```
    {

        // transform the screen AOR to a model AOR

        // get inverse of the camera transformation matrix
        tempMat.set( camera.view );
        tempMat.translate( camera.position );
        tempMat.inv();

        // get inverse of the model transformation matrix
        Vector3 tempPos = cubes[ selectedCube ].position;
        cubes[ selectedCube ].modelInstance.transform.translate( tempPos.cpy().scl( -1 ) );
        tempMat2.set( cubes[ selectedCube ].modelInstance.transform );
        tempMat2.inv();

        // multiply the camera and model matrices together
        tempMat.mul( tempMat2 );

        // transform the screen AOR to a model AOR
        modelAOR = transformThings( tempMat, screenAOR, modelAOR ).nor();

        // apply the rotation of the angle about the model AOR to the model
        cubes[ selectedCube ].modelInstance.transform.rotate( modelAOR, -screenAng );
        cubes[ selectedCube ].modelInstance.transform.translate( tempPos );
    }

```

Here is an image that the demonstrates the problem:

[![results of wonky math](https://i.sstatic.net/i3fNL.png)](https://i.sstatic.net/i3fNL.png)

I want the object to rotate in the direction it is dragged by the mouse, no matter which direction it happens to be orientated at the time. As it is now, when I first drag the mouse to the right, the object rotates to the right about the screen Y axis as expected; but then when I drag the mouse upward I want the object to rotate upward about the screen X axis, but instead it spins to the left about the screen Z axis. Think of it like a floating ball in a bowl of water - whichever way you swipe at it, it ought to rotate in that direction.

It seems to me that the mouse movement is transforming the objects directly in their local coordinate system; but instead I think I need to transform the axis of rotation itself from the Screen Coordinate System into the Object Coordinate System before applying it to the object. I just can't figure out how to do it.

I would really appreciate any insight or help to resolve this; I'm running out of hair to pull out... Thanks in advance.

**Tags:** transformations, computational-geometry

> **Comments:**
> **username_1**: An intuitive rotation depends on the view direction. Multiply your change in transformation by the inverse view matrix. Then apply the change in transformation to the overall transformation of the object. Think of it like undoing whatever rotation you did with the view. If you have a translation in your camera you'll have to deal with that also.  
> **username_0**: Ok. Now I'm making progress.  I got the camera rotation working properly:  I created a temporary matrix from the camera, translated the position out of it, inverted it, then rotated the screenAOR about it, and Boom!  It worked! Yahoo.  
> **username_0**: I added the working code above as an EDIT.  
> **username_0**: I'm still having trouble getting the model to rotate properly.  I translate and invert the camera into a temporary matrix (as in the view rotation section), then I translate the invert the model instance (in a similar manner) into another temporary matrix, then I multiply them together and transform the screen AOR into a model AOR, then rotate the model instance, and lastly translate the model back to it's position.  
> **username_0**: The model seems to be rotating properly, except that it is as though it didn't get translated to the origin to be rotated, because as it rotates it is also orbiting the origin. Dang! @username_1 can you see anything I'm missing? I'll add the code in another EDIT above.  

---

## 2 answers

### Answer by username_1 on 2018-12-23. Score: 1 | Accepted answer

Here's a more complete answer from my comment. The end product we want is:

```
Projection * ViewTranslate * Model * ViewRotate

```

All are 4x4 matrices. Where model is your models transformations. To implement you can just separate out the view's translate and rotate during your draw.

If you're using an abstraction that requires you to use Proj \* View \* Model. Or you just really don't want to ruin your own abstraction that follows that pattern. You'll need to modify model to cancel out views rotational part and put it on the right side:

```
Model = ModelTranslate * View^-1 * ViewTranslate * ModelRotate * ViewRotate 
      = ModelTranslate * ViewRotate^-1 * ModelRotate * ViewRotate

```

Here's some of my code that does the above. It does not matter if model or view is translated, objects will still rotate around their local origins:

```
glm::vec2 diff = (prevMousePos - mousePos) * rotSpeed;
glm::mat4 rotX = MathHelp::matrixRotateY(diff.x);
glm::mat4 rotY = MathHelp::matrixRotateX(diff.y);

// Decompose the translate and rotate part of view
glm::mat4 viewT, viewR;
Decompose(cam->view, viewT, viewR);

// Decompose the translate and rotate part of model
glm::mat4 modelT, modelR;
Decompose(exampleObj->model, modelT, modelR);

exampleObj->model = modelT * glm::inverse(viewR) * rotX * rotY * viewR * modelR;

```

This preserves the existing rotation and translation in exampleObj->model as the function gets called continually applying small rotations. And assumes you'll be using Proj \* View \* Model.

Lastly decompose just separates out the 3x3 rotation/scaling from the translational part:

```
void Decompose(glm::mat4 m, glm::mat4& t, glm::mat4& r)
{
    glm::mat4 I4 = glm::mat4(1.0f); // Identity
    for (unsigned int i = 0; i < 4; i++)
    {
        for (unsigned int j = 0; j < 4; j++)
        {
            if (i == 3 || j == 3)
            {
                r[i][j] = I4[i][j];
                t[i][j] = m[i][j];
            }
            else
            {
                r[i][j] = m[i][j];
                t[i][j] = I4[i][j];
            }
        }
    }
}

```

> **Comments:**
> **username_0**: Wahoo!  That did it!  It took a little trial-and-error to get the Java translation correct, but it works perfectly.  Thanks a million!!!  I've added the working code as another answer below.  it won't let me up-vote your answer, but this is it.  

---

### Answer by username_0 on 2018-12-30. Score: 0

Here is the change to the code that made the whole thing work correctly:

```
@Override public boolean touchDragged( int screenX, int screenY, int pointer )
{
    lastX -= screenX;
    lastY -= screenY;

    // distance of mouse movement
    screenAng = Vector3.len( lastX, lastY, 0f );
    // direction vector of the AOR
    screenAOR.set( lastY/screenAng, lastX/screenAng, 0f );

    if ( touchedButton == 0 )
    {   // rotate the part

        // transform the screen AOR to a model rotation

        Matrix4 camT, camR, camRi, modT, modR;
        camT = new Matrix4();
        camR = new Matrix4();
        modT = new Matrix4();
        modR = new Matrix4();

        decompose( camera.view, camT, camR );
        camRi = camR.cpy().inv();

        decompose( cubes[ selectedCube ].modelInstance.transform, modT, modR );

        tempMat.idt()
                .mul( modT )
                .mul( camRi )
                .rotate( screenAOR, -screenAng )
                .mul( camR )
                .mul( modR );

        cubes[ selectedCube ].modelInstance.transform.set( tempMat );
    }
    else if ( touchedButton == 1 )
    {   // rotate the camera

        // transform the AOR from screen CS to camera CS

        // get the camera transformation matrix
        tempMat.set( camera.view );
        tempMat.translate( camera.position );
        tempMat.inv();

        // transform the screen AOR to a world AOR
        worldAOR = transform( tempMat, screenAOR, worldAOR ).nor();

        // apply the rotation of the angle about the world AOR to the camera
        camera.rotateAround( Vector3.Zero, worldAOR, screenAng/5.5f );
        camera.update();
    }

    lastX = screenX;
    lastY = screenY;
    Gdx.graphics.requestRendering();
    return true;
}

// --------------------------------------------------------------------- //
Vector3 transform( Matrix4 mat, Vector3 from, Vector3 to )
{
    // transform a vector according to a transformation matrix

    to.x = from.dot( mat.val[ Matrix4.M00 ], mat.val[ Matrix4.M01 ],
            mat.val[ Matrix4.M02 ] )+mat.val[ Matrix4.M03 ];
    to.y = from.dot( mat.val[ Matrix4.M10 ], mat.val[ Matrix4.M11 ],
            mat.val[ Matrix4.M12 ] )+mat.val[ Matrix4.M13 ];
    to.z = from.dot( mat.val[ Matrix4.M20 ], mat.val[ Matrix4.M21 ],
            mat.val[ Matrix4.M22 ] )+mat.val[ Matrix4.M23 ];
    return to;
}

// --------------------------------------------------------------------- //
void decompose( Matrix4 m, Matrix4 t, Matrix4 r )
{
    Matrix4 I4 = new Matrix4(); // Identity
    for ( int i = 0; i < 4; i++ )
    {
        for ( int j = 0; j < 4; j++ )
        {
            if (i == 3 || j == 3)
            {
                r.val[ i*4+j ] = I4.val[ i*4+j ];
                t.val[ i*4+j ] = m.val[ i*4+j ];
            }
            else
            {
                r.val[ i*4+j ] = m.val[ i*4+j ];
                t.val[ i*4+j ] = I4.val[ i*4+j ];
            }
        }
    }
}

```


---

