Getting started with simple 3D Buttons using Unity and Leap Motion.

My university department recently got the HTC Vive and I was lucky enough to be the first among other students to use it for a thesis project. As I am new to Unity and C#, and only half a coder (talking about human factors studies here) I had a sleepless week figuring out all the knobs and buttons to get a simple scene to work. A challenge most beginners may face. So here is a little something in the hope it helps someone to get started: How to create an interactive 3D button in Unity, using Leap Motion Orion and the HTC Vive.

I modeled this button in Rhino: One part to press, one static indicator that gives feedback.

Part of my thesis is to determine if either button interactions or physical object interactions result in better user experience scores. Therefore I needed a simple interactive button that could be placed anywhere in a virtual world and interacted with by hand movements. Leap Motion released a button widget showcase some time ago (as you may see, I took some inspiration) and Unity offers a couple of useful 2D interface elements. However, I needed something that not just sits on a virtual world but is way more integrated into it. I guess my solution is far from being perfect and it could be better code. But hey, don’t keep yourself from moving forward just because you explore a new path…

Set-up the Leap Motion controller

Allie Quintano wrote a very useful guide on how to set up HTC Vive with the Leap Motion controller. It is worth a read when you are at the very beginning of your project.

Getting started with your button

Get started by modeling (or downloading) a button that suits you. I created a two-part button in Rhino (one object to press, one indicator for feedback). Import it into your Assets, then drag in into your scene. Click on the moving-part of your button (the one you are going to push) and add a new collider-component and rigidbody-component to it (disable gravity and check all position and rotation locks). Then add a script-component.

The challenge here is to move the object locally when you press it, not globally as Unity does. Lines 28–40 make sure the objects travels into the right direction. Public bool lockX/Y/Z gives you a checkbox inside Unity where you can quickly lock the local X/Y/Z position of the object.

Then calculate the distance of the press and calculate a number between 0 and 1. Set your conditions and play around with the percentage that needs to be reached in order for the button to be pressed (lines 53–66). Usually this should be 1 for pressed and 0 for released, however, I encountered some problems for this to work correctly. Using 0.7 and 0.2 instead just worked fine.

Next, add some color! The indicator can be colored inside your update-function because it changes color frequently based on the position of the press. The pressed object, however, needs a seperate Coroutine for a nice fade animation.

This is what came out of it

Changing the surrounding color by the press of a button. This shows a prototype, I later added icons to the buttons.

Hope you enjoy your new 3D buttons! In my experiment I let participants color the surroundings by either using the above mentioned buttons or by throwing color filled bubbles. I am not done with the analysis of the results yet, but will be very soon. Come back in a little while and I’ll show you how to solve the magnetic-pinch problem with Leap Motion Orion (not really). And I promise I’ll be back with Design Principles for Interaction Models in VR, soon!