In this article I will walk through how to interact with your 3D Game objects using your mouse.
Notice the negative numbers? These indicate that the mouse is OUTSIDE of the screen, in this case the mouse is bottom left which is where my console window is in this image.
Bottom Left => 0,0; Right Bottom of screen => 0, width of screen; Left Top of screen => height of screen, 0; Top Right of screen => height of screen, width of screen
As you can see in the image above, the mouse coordinates are based on screen size. When the coordinates are outside of these amounts (Usually in windowed modes) you can safely assume that the users mouse is outside the window.
Okay now go ahead and comment out that line, but keep it there so you have reference code you can use later for your own scripts and mouse functionality. So now that we know how to get the mouse coordinates on-screen, lets move onto the next item!
2. Detecting a 3D object under the mouse
For this next step we need to detect when the mouse moves over an object in our 3D world (Our 2D GUI generally has its on button click so that is separate). To do this we will need to do something called Ray Tracing. A Ray trace is simply pretending that whatever our object (In this case our camera) is looking at, it is looking at it with a LASER POINTER (Just imagine this concept) and the second this so called infinite laser pointer hits something, we can get information back on WHAT we hit and WHERE we hit it, all within 3D space. It’s pretty cool as a concept, takes a LOT of math to do. Luckily Unity has done most of the heavy lifting for us and we can write a few lines of code to make this work. For now inside of your Update() function add the following code (Code Base from => https://docs.unity3d.com/Manual/CameraRays.html): RaycastHit hit; Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); if (Physics.Raycast(ray, out hit)) { Debug.Log(hit.collider.name); }
Our next step requires us to have an object that has a COLLIDER on it (Any collider will do). For our example, simply make a 3D Cube in the middle of your scene and make sure it has a box collider on it. Now when you save and run the program and HOVER your mouse over the box, you should see the name of the object!
At this point we now know how to get the location of the mouse and we know how to DETECT the object under the mouse…Now we need to figure out how to have an OBJECT under the mouse detect WHEN the mouse entered it and WHEN the mouse left it…
3. Detecting when a mouse enters and leaves an object
Please comment out all the ray cast code (Just comment it so that you have a copy of it for your own use later whenever you need to use it). For this one we need to put our script on any 3D game object in the scene that you want to detect the mouse entering and exiting. In this case here we are using the SAME script and so to make our lives easier I’m going to use a boolean to help us out. Take a look at the code below: // Private Variables private bool b_MouseActionsOnGameObject = false; // Use this when script becomes active private void OnEnable() { // Make sure the object is NOT the main game camera where the script is placed if (gameObject.tag != “MainCamera”) { // Enable all Mouse Detection for OnClick, OnEnter, OnExit functionality b_MouseActionsOnGameObject = true; } }
So at this point, we have successfully detected if the object is the camera or not and we have assigned a boolean variable that we can now use to enable and disable code accordingly. We will now create three built in functions to test out the Mouse Enter, Mouse Exit and Mouse Over (Hover) an object. Before we do that however, save the code file and click and drag it onto your BOX model in the scene (At this point you should have TWO instances of the code, one on the BOX game object and one on the Camera). Once saved, come back to your code and copy and paste the following code functions into your script: // Check Mouse Enter private void OnMouseEnter() { if (b_MouseActionsOnGameObject) { Debug.Log(“Mouse Entered”); } } // Check Mouse Exit private void OnMouseExit() { if (b_MouseActionsOnGameObject) { Debug.Log(“Mouse Exited”); } } // Check Mouse Over private void OnMouseOver() { if (b_MouseActionsOnGameObject) { Debug.Log(“Mouse Over Me”); } }
Now go ahead and save the file and run the game in Unity. If you move your mouse over the box, you should see it have the message when you Entered with the mouse, when you were OVER the game object and when you exited the object.
You may be wondering how the heck this stuff is useful, but think about a PC game where you have to hover your mouse over land objects and PLACE something ontop of them. At that point when a game object detects the mouse is over it, you can display a flashing effect on that object and BOOM! You now have an indicator and simple object selection script in 3D! Lets move onto the next items which are to detect a Mouse Down Click and Mouse Up Click! Before we go there, please comment out all the Debug Log comments from the functions (You now know how to detect mouse over, enter and exit!)
4. Mouse Click Down, Mouse Click Up
Okay so at this point I want you to copy and paste in the following code so we can test out the Mouse Click Down and Mouse Click Up (We will do mouse drag after):
private void OnMouseUp() { if (b_MouseActionsOnGameObject) { Debug.Log(“Mouse Up”); } } private void OnMouseDown() { if (b_MouseActionsOnGameObject) { Debug.Log(“Mouse Down”); } }
Okay so now save the code and go ahead and test the code by running it and clicking on the object. You’ll actually notice that the Mouse UP does NOT get fired until you actually let go of your mouse, no matter WHERE the mouse is. Keep this in mind as you are doing your code. Okay so now that you know how to do these two functions, comment out the Debug.Log items and lets move onto the next step!
5. Scroll Wheel Movement Direction Detection
For this part I am going to focus on movement of the camera using the scroll (You can learn more about the scroll command here => https://docs.unity3d.com/ScriptReference/Input-mouseScrollDelta.html). With scroll, we will zoom the camera in and out (Later on you can easily add code restrictions to restrict how close or how far the camera will zoom in). Simply copy and paste this example code into your Update() function to test out the values: Debug.Log(“Mouse Scroll: ” + Input.mouseScrollDelta.y);
Now save and test it out. You’ll see that the actual mouse scroll values will be shown in the console. After you have tested the code, stop the editor and go back to the code. We will now use this value to determine the camera zoom. I want you to comment out that code (So that you have it for your own reference) and then paste the following below it and then save and run it (Once again place the code within the Update() function): // Scroll and Zoom Camera // As long as we are THE CAMERA object, do the following if (!b_MouseActionsOnGameObject) { // How fast we want to move the camera zoom float f_CameraZoomFactor = 1.0f; // Get the current X, Y and Z position of the camera float f_CamX = gameObject.transform.position.x; float f_CamY = gameObject.transform.position.y; float f_CamZ = gameObject.transform.position.z; // Add the scroll value / 100 to the Y value of the main camera gameObject.transform.position = new Vector3(f_CamX, f_CamY + (Input.mouseScrollDelta.y / f_CameraZoomFactor), f_CamZ); }
Okay so now after you copy and paste that code and save it and run the game again, when you use your scroll on your mouse your camera in the game view should zoom in and out! 🙂
Now go ahead and comment that out so you have it for your own coding purposes. Lets move onto the next learning step which is Drag and Move objects!
6. Mouse Drag and Drag and Drop 3D Objects
Now I’m doing this next step from a TOP DOWN or ANGLED view, thus my Y coordinate is actually going to correlate with my Z in 3D space and my X will be the same (Left and Right). Unfortunately dragging can be a bit confusing so what I’m about to show you is my own spin on things. Feel free to use it and tweak it to your liking. Start by pasting the code below into your GLOBAL variables section: private bool b_MouseDown = false; private float f_LastMouseXMovementAmount = 0.0f; private float f_LastMouseYMovementAmount = 0.0f;
Next replace the Mouse Up and Mouse Down functions with the following changes for the b_MouseDown variable like so: private void OnMouseUp() { if (b_MouseActionsOnGameObject) { b_MouseDown = false; //Debug.Log(“Mouse Up”); } } private void OnMouseDown() { if (b_MouseActionsOnGameObject) { // Get LAST X Position of mouse and subtract from current position if (f_LastMouseXMovementAmount <= 0.0f) { f_LastMouseXMovementAmount = Input.mousePosition.x; } // Get LAST Y Position of mouse and subtract from current position if (f_LastMouseYMovementAmount <= 0.0f) { f_LastMouseYMovementAmount = Input.mousePosition.y; } b_MouseDown = true; //Debug.Log(“Mouse Down”); } }
Finally, copy and paste the following code into your Update() function: // If the mouse is down and the object is NOT the camera if (b_MouseDown && b_MouseActionsOnGameObject) { // Movement Factor float f_MovementFactor = 100.0f; // Calculate X Movement Range float f_MovementRangeX = (Input.mousePosition.x – f_LastMouseXMovementAmount) / f_MovementFactor; // Calculate Z Movement Range float f_MovementRangeZ = (Input.mousePosition.y – f_LastMouseYMovementAmount) / f_MovementFactor; // Move object via a drag by following mouse x, y location and translating to object x, z gameObject.transform.position = new Vector3(f_MovementRangeX, gameObject.transform.position.y, f_MovementRangeZ); }
And there you have it! Save the code, hit the play button and then click and drag your object around using a click and drag functionality!!
7. Screen Movement via Mouse Location
Okay this final step to really have all that juicy mouse functionality is something that I’m personally using in my own game Armies of Riddle E.X. as well as my future title Knights of Riddle (Both are being made for Steam, so look out for those in the future). Anyways, before we go into the next part, please comment out the code that you did for the last set (That way you have a copy of it for your future use in any mouse interactions you can think of).
Here is how the effect works, when the user moves their mouse OUTSIDE (Or to the edges of the screen), the camera moves in that direction. This is usually used in Strategy and MOBA games heavily like LoL and Starcraft, etc.
Copy and paste the following code into your Update() function: // Move Camera based on mouse cursor hover location in the X and Z coordinates // Detect if we are on the camera if (!b_MouseActionsOnGameObject) { // Get the MOUSE X,Y location float f_MouseX = Input.mousePosition.x; float f_MouseY = Input.mousePosition.y; // Get the screen size float f_ScreenWidth = Screen.width; float f_ScreenHeight = Screen.height; // This is the movement speed float f_MovementSpeed = 1.0f; // Check if mouse is outside of X value on either side of screen if (f_MouseX <= 0.0f) { // Move Camera LEFT in X (-f_MovementSpeed) gameObject.transform.position = new Vector3(gameObject.transform.position.x – f_MovementSpeed, gameObject.transform.position.y, gameObject.transform.position.z); } else if (f_MouseX >= f_ScreenWidth) { // Move Camera RIGHT in X (+f_MovementSpeed) gameObject.transform.position = new Vector3(gameObject.transform.position.x + f_MovementSpeed, gameObject.transform.position.y, gameObject.transform.position.z); } // Check if mouse is outside of Y value on either side of screen if (f_MouseY <= 0.0f) { // Move Camera DOWN in Z (-f_MovementSpeed) gameObject.transform.position = new Vector3(gameObject.transform.position.x, gameObject.transform.position.y, gameObject.transform.position.z – f_MovementSpeed); } else if (f_MouseY >= f_ScreenHeight) { // Move Camera UP in Z (+f_MovementSpeed) gameObject.transform.position = new Vector3(gameObject.transform.position.x, gameObject.transform.position.y, gameObject.transform.position.z + f_MovementSpeed); } }
Conclusion
Okay so there you have it, using the code above you should have all you need for the basics of mouse interaction and movement. If you feel the movement is too rigid (Ex. things dont move smoothly), then you’ll need to use some form of Tween solution like DoTween or iTween.
Here is the Entire CODE for you to download:
7 Steps To Master Mouse Interaction with 3D Objects (Beginners)
January 2, 2021
Game Development
No Comments
Nav from Academy Of Games
In this article I will walk through how to interact with your 3D Game objects using your mouse.
1. Mouse Location on Screen
2. Detecting a 3D object under the mouse
3. Detecting when a mouse enters and leaves an object
4. Mouse Click Down, Mouse Click Up
5. Scroll Wheel Movement Direction Detection
6. Mouse Drag and Drag and Drop 3D Objects
7. Screen Movement via Mouse Location
Conclusion