Creating a Google Earth like navigation for a sphere

1
votes

This question is about Unity3D. I want to create a navigation similar to Google Earth where you click and drag on a sphere and let the camera orbit accordingly. It is important that the point that was grabbed is always under the mouse position while dragging. The navigation should also work if I zoom close to the sphere. I do not want to rotate the sphere itself. Just exactly like Google Earth does it.

My attempt is to project the mouse position to the sphere if I start to drag. On the next frame I do the same and calculate the angle between the start drag and end drag position.

enter image description here

private void RotateCamera(Vector3 dragStart, Vector3 dragEnd)
{
    // calc the rotation of the drag
    float angle = Vector3.Angle(dragStart, dragEnd);
    // rotate the camera around the sphere 
    Camera.main.transform.RotateAround(sphere), Vector3.up, angle);
}

I thought of using Unitys RotateAround method to rotate the camera with the calculated angle. Unfortunately I do not have the rotation vector (using Vector3.up in the example is obviously wrong). Does somebody know how I can calculate this vector to apply it for the method? Am I on the right direction to implement the Google Earth navigation?

Thank You!

UPDATE I am very close with a new solution. I project the drag vectors to a down and a right plane to get the angles. Afterwards I rotate the camera around up and left. This works well until I reach the poles of the sphere. The camera rotates a lot around itself if I reach a pole.

private void RotateCamera(Vector3 dragStart, Vector3 dragEnd)
{
    Vector3 plane = Vector3.down;
    var a = Vector3.ProjectOnPlane(dragStart, plane);
    var b = Vector3.ProjectOnPlane(dragEnd, plane);
    float up = Vector3.SignedAngle(a, b, plane);

    plane = Vector3.right;
    a = Vector3.ProjectOnPlane(dragStart, plane);
    b = Vector3.ProjectOnPlane(dragEnd, plane);
    float left = Vector3.SignedAngle(a, b, plane);

    Camera.main.transform.RotateAround(_sphere, Vector3.up, up);
    Camera.main.transform.RotateAround(_sphere, Vector3.left, left);
}
2
c#mathunity3d3dgeometry
What if instead of rotating the camera around the sphere, you just rotate the sphere on its center and the camera never moves? - Everts
Thank you Everts for the question. Like I said.. this is not a solution for me. I want the camera to orbit around the sphere. In my case the sphere is a planet and I want to have the stars, the sun and the moon in the background to be displayed correctly. - Luca Hofmann
If you parent all those to the Earth, it will still work. You can have them orbiting via script and as you rotate the earth they follow the movement. - Everts
I do not want to parent my whole scene to the planet just because I do not get the camera orbit implementation right. Later I want to orbit around another sphere in the scene and I do not want to rearrange the whole scene for it. Sorry.. this is not a good solution. - Luca Hofmann

2 Answers

1
votes

Basic rotation based on mouse drag, based on what you have:

Transform camTransform = Camera.main.transform;
if (Input.GetMouseButton(0))
{
    camTransform.RotateAround(currentLookTargetTransform.position, -camTransform.right * Input.GetAxis("Mouse Y") + camTransform.up * Input.GetAxis("Mouse X"), 120 * Time.deltaTime);
}

You can multiply the relative direction by the mouse change value to get the axis. Then you can supplant your clamp points in; but the point was to rotate it relatively.

1
votes

Turns out that is was easier than I expected. I thought about calculating the rotation axis and came to the conclusion that is must be the cross product of the start and end vector. Take a look at the solution. The RotateCamera method is where the math magic happens :) 

public class GoogleEarthControls : MonoBehaviour
{
    private const int SpehreRadius = 1;
    private Vector3? _mouseStartPos;
    private Vector3? _currentMousePos;

    void Start () {
        // init the camera to look at this object
        Vector3 cameraPos = new Vector3(
            transform.position.x, 
            transform.position.y, 
            transform.position.z - 2);

        Camera.main.transform.position = cameraPos;
        Camera.main.transform.LookAt(transform.position);
    }

    private void Update()
    {
        if (Input.GetMouseButtonDown(0)) _mouseStartPos = GetMouseHit();
        if (_mouseStartPos != null) HandleDrag();
        if (Input.GetMouseButtonUp(0)) HandleDrop();
    }

    private void HandleDrag()
    {
        _currentMousePos = GetMouseHit();
        RotateCamera((Vector3) _mouseStartPos, (Vector3)_currentMousePos);
    }

    private void HandleDrop()
    {
        _mouseStartPos = null;
        _currentMousePos = null;
    }

    private void RotateCamera(Vector3 dragStartPosition, Vector3 dragEndPosition)
    {
        // in case the spehre model is not a perfect sphere..
        dragEndPosition = dragEndPosition.normalized * SpehreRadius;
        dragStartPosition = dragStartPosition.normalized * SpehreRadius;
        // calc a vertical vector to rotate around..
        var cross = Vector3.Cross(dragEndPosition, dragStartPosition);
        // calc the angle for the rotation..
        var angle = Vector3.SignedAngle(dragEndPosition, dragStartPosition, cross);
        // roatate around the vector..
        Camera.main.transform.RotateAround(transform.position, cross, angle);
    }

    /**
     * Projects the mouse position to the sphere and returns the intersection point. 
     */
    private static Vector3? GetMouseHit()
    {
        // make sure there is a shepre mesh with a colider centered at this game object
        // with a radius of SpehreRadius
        RaycastHit hit;
        if (Physics.Raycast(Camera.main.ScreenPointToRay(Input.mousePosition), out hit))
        {
            return hit.point;
        }
        return null;
    }
}