Left Click and Pan

I want to write a script that allows the player to hold left click and pan the camera.

It should looks something like this:

OnMouseDown if mouse moves left camera pans to the right (locally I think)

Also middle mouse wheel to zoom.

And middle mouse button to rotate.

How would I go about accomplishing this in JavaScript?

To answer your first question, I would store the coordinates of where your mouse first "clicked". Then, make a variable to determine that you are now dragging with the following psuedo-code.


Note: This is not a copy/paste affair, I'm just explaining my thought process.


var dragging : boolean;
var mouseDownPos : Vector3;

if(OnMouseDown){
    dragging = true;
    mouseDownPos = Mouse's position when you clicked;
}

Now that you're dragging, continually grab the current position of the mouse.

var mouseDragPos : Vector3;
if(dragging)
    mouseDragPos = Mouse's position as you are dragging;

Then, subtract the two and move the camera's transform accordingly.

camera.Main = camera.Main.transform.position + ( mouseDownPos - mouseDragPos );

This assumes the script is running on the camera...

// ***** PANNING *****
// Hold Right Mouse Button to pan the screen in a direction
if(Input.GetButtonDown("MouseRight")) {
    print ("Panning...");
    viewScreenPanning = true;
    viewScreenOldMouseX = Input.mousePosition.x;
    viewScreenOldMouseY = Input.mousePosition.y;
}

// If panning, find the angle to pan based on camera angle not screen
if(viewScreenPanning==true) {
    if(Input.GetButtonUp("MouseRight")) {
        viewScreenPanning = false;
    }
    viewScreenPanVector = transform.TransformPoint(Vector3(-(viewScreenOldMouseX - Input.mousePosition.x) / viewScreenPanSpeed, 0.0, -(viewScreenOldMouseY - Input.mousePosition.y) / viewScreenPanSpeed));
    // since we use a quick and dirty transform, reset the camera height to what it was
    viewScreenPanVector.y = viewScreenZoomHeight; 
    transform.position = viewScreenPanVector;
}