Rotate object following mouse movement. Object jumps/ flips

I have a little gnome sitting on a round platform. With a mouse click on the platform I want to rotate the platform around it’s Y axis. The angle depends on the position of the mouse.

My implementation is based on the idea of this thread about how to rotate a door according to mouse movement.

Down below is my full script, which is attached to the platform.

The problem: whenever I click on a random point on the platform, the platform will jump/ flip to an unpredictable rotation angle. I tried to prevent that with the rotationStart = transform.rotation. Unfortunately this won’t prevent the platform from flipping. What can I do to achieve a smooth rotation?

EDIT: This is the kind of rotation I am trying to achieve:

The left image displays the rotation behavior when applying robertbu’s solution. The red cross symbolizes the mouse click position.

I want the rotation behavior shown on the right image.

7070-ask-unity-gnome.jpg

Current Code

private var mainCam;
private var firstHitPos;
private var rotationPlane : Plane;
var speed = 0.1;

function Start () {
    mainCam 		= GameObject.FindWithTag("MainCamera");
}

function OnMouseDown(){
		var ray = mainCam.camera.ScreenPointToRay(Input.mousePosition);		
		rotationPlane = new Plane(transform.up, transform.position);		
		var enter : float;
		if(rotationPlane.Raycast(ray , enter)){
			firstHitPos = ray.GetPoint(enter);
		}
}


function OnMouseDrag(){
	var pos = getPlanePos();	
	var tmpPos = Vector3(pos.x, 0, pos.z);    
	
    //var rotationStart= Quaternion.LookRotation(Vector3(firstHitPos.x, 0, firstHitPos.z), transform.up);    
    var rotationStart= transform.rotation;	
    var rotationEnd = Quaternion.LookRotation(tmpPos, transform.up);
    transform.rotation = Quaternion.Lerp ( rotationStart , rotationEnd, Time.time * speed);
}

function getPlanePos(){

	var mousePos = Input.mousePosition;
	var ray = mainCam.camera.ScreenPointToRay(mousePos);
	var mouseWorldPos = mainCam.camera.ScreenToWorldPoint(Input.mousePosition);
	var enter : float;
	
	if(rotationPlane.Raycast(ray , enter)){
		var returnVal = mainCam.transform.position + ray.direction.normalized * enter;		
		return (returnVal); 
	
	}
}

There are a number of problems with the code above. The first is how you are handling your Quaternion.Lerp. Lerp is for rotation over time. You set the start and end rotations, then you pass a fraction between 0 and 1 for where along that rotation you want to be. Typically you do this over time. You are passing Time.time. This is seen frequently in coding examples, but really it is only using the fractional amount in the number of seconds. Your starting point when you call your Lerp for the first time is unknown. And you are resetting the start rotation at every update. Plus I don’t think you need or want to do a Lerp in this situation.

You may have special needs with your rotation, but if all you want to do is tie mouse movement to rotation, you can use something simpler like:

private var factor : float = 0.6;
private var v3StartPos : Vector3;
private var v3StartRot : Vector3;

function OnMouseDown(){
	   v3StartPos = Input.mousePosition;
	   v3StartRot = transform.eulerAngles;
}

function OnMouseDrag(){
	var v3T : Vector3 = Input.mousePosition;

	transform.eulerAngles = v3StartRot + Vector3.up * (v3StartPos - v3T).x * factor;
}

I’ve used a very basic example as a start. This code uses screen units, so you would need to make some additions if you want to run on multiple resolutions and map the same mouse movement as a percentage of the screen to the same rotation.