Algorithm 3d orbiting camera control with mouse drag

Question

Please help,

I couldn't find detailed explanation about this which is not language specific and not library dependent, because I want to control the math myself for some reason.

How to create orbiting camera control with mouse, like middle-click drag in Google SketchUp?

_{* In Google SketchUp, the camera can move circularly orbiting imaginary object in the middle of the plane (not always 0,0,0) by dragging the mouse. It can orbit horizontally, vertically, even diagonally, all directions.}

Answer 1

The simplest solution is to store X/Y direction angles and eventually a zoom level. Then, you modify the angles in some MouseMove event, and use them to compute camera direction.

Here's some pseudo-code for mouse drags:

OnMouseDown:
    mouseDragging = true;
    lastX = mouse.x;
    lastY = mouse.y;

OnMouseUp:
    mouseDragging = false;

OnMouseMove:
    if( mouseDragging ) {
        angleX += (mouse.x-lastX) * speedX;
        angleY += (mouse.y-lastY) * speedY;
    }

OnMouseWheel:
    zoom += mouse.wheelDelta;

Given those data you can build a camera position. I don't know what are you using for this but here's an example from OpenGL:

glLoadIdentity();
glTranslatef( 0.0f, 0.0f, -zoom );
glRotatef( angleY, 1.0f, 0.0f, 0.0f );
glRotatef( angleX, 0.0f, 1.0f, 0.0f );
glTranslatef( -orbitCenterX, -orbitCenterY, -orbitCenterZ );

Answer 2

The term to google for is "arcball". See for example https://en.wikibooks.org/wiki/OpenGL_Programming/Modern_OpenGL_Tutorial_Arcball

But in general there are many subtle differences that make interactions better.