Basic VR Interaction Prototyping Tutorial for Designers — No Coding Required

Click here to open the Unity download page.

Click the huge green “Download Installer” button:

Open the installer and go through the installation steps:

I’m installing Unity 5.6.2 in this screenshot, your version number will be different if there’s a newer release available.

Installation will take a bit of time. Wherever you need to, just leave the default settings and selections as-is. You can save Unity wherever you like, just make sure you have enough room on the drive you’re installing Unity to because it’ll take up 2–3GB of space.

Once you have it installed, go ahead and open Unity. You’ll see a screen like this:

If you don’t have a Unity account already, or you’re using the HTC Vive, you should create one now. I highly encourage you to just make one now, it will grant you access to the Unity Asset Store where you can download free 3D assets for your prototypes.

If you don’t have one and you don’t want to have one, just click the gray “Work Offline” button.

Now that you’re past the login screen, the last thing we need to do is create a new project. Click “NEW” to create a new one:

Unity will ask to you name your new project. Name it whatever you want! You’ll also need to pick a folder for your project to live in:

We’re definitely working in 3D, so make sure that’s selected. Click on the blue “Create project” button and Unity will take care of the rest while you wait.

If Unity successfully made your new project, it now looks something like this:

You remember when you were learning how to use Photoshop? Unity kinda feels like that starting out. I opened Unity for the first time in 2010, took one look at the interface, said “nah” and closed it. It took me like twelve more tries before I finally got comfortable enough to make something in it.

There’s a lot of scary-looking empty space and menu options, but we’re not going to do anything complicated. Just easy stuff. And there’s one more tool we need to help us keep it that way.

Step 2: Download and import NewtonVR

NewtonVR is a plugin for Unity that makes all your wildest dreams come true. Well, maybe not all of them. But it does make VR objects feel and behave more realistically, like we were talking about at the beginning.

And conveniently for us, I helped make NewtonVR. We’re installing it because I understand how to use it without touching code, and I care about you and want you to succeed in life.

Click this link to open the NewtonVR Github page.

(You can also find NewtonVR on the Unity Asset store, but I figure it’s useful to know how to download and install projects off Github, so I’ll leave the asset store installation process up to you.)

Click on the green “Clone or download” button:

Select “Download ZIP” and save it wherever you’ll be able to easily find it and unzip it:

The .zip file of NewtonVR will download. When it’s done downloading, go find it in the folder where you saved it and Right-click > Extract All that sucker:

Extract the contents into whatever folder you want them in.

You’re doing so well already. I know, it’s a bit of work to get everything set up, but it’ll totally be worth it. Just a few more steps and we’ll have you in the headset in no time.

Find and open the “NewtonVR-master” folder you unzipped:

In this folder, there’s a Unity package file, you can see mine is called “NewtonVR_1_22” but yours might be called something else. Double-click on that file to open it.

Opening that package will switch you over to Unity, where you’ll see a screen like this:

Without changing anything, click the “Import” button on that window. Unity will add it to your project inside the “Assets” folder in the Project tab area. If you look at my screen, the new files are located in the lower left-hand corner:

Next, expand the new NewtonVR folder, and then click on the NewtonVR folder to make sure you have it selected. You should see a list of folders and files like this:

As you can tell, there’s a lot going on inside the NewtonVR plugin, but don’t worry — most of it is behind the scenes stuff, driving the functionality we’re using it for, which means we don’t need to touch the vast majority of these files.

Let’s start pulling out those few small pieces of Newton that will make prototyping life super easy.

Step 3: Add NVRPlayer

In the “NewtonVR” folder, there is something called “NVRPlayer” with a blue box next to it:

There are actually two files called NVRPlayer, but the one we want has the little blue box icon. (The other one that we don’t want is a script, which is why the icon says C#.)

Click and drag our blue box “NVRPlayer” into the empty space below where it says “Main Camera” and “Directional Light”:

If it gets messed up somehow and you can’t figure out how to fix it, delete the messed up one and create a new one by dragging NVRPlayer out into the same empty space again.

So, if everything went well, your project should now look like this:

See the window where that green human-looking thing appeared when you added NVRPlayer to the hierarchy? This is our project’s Scene.

The scene is where your virtual environment exists, including all the invisible background stuff that help it run just the way you want it to. Everything you put into your prototype, all the stuff we’ll add during the rest of this tutorial, will exist somewhere inside the scene.

If something’s in your scene, it’s also added to the official list of everything in your scene, which is called the Hierarchy. On my screen above, it’s to the left of the scene, where we dropped the new NVRPlayer. Right now, that list should only contain Main Camera, Directional Light, and NVRPlayer.

Let’s take a quick peek at what’s inside NVRPlayer. Click on the arrow to expand it in the hierarchy:

NVRPlayer contains a Head, a LeftHand, and a RightHand. Those match to your headset and two controllers. By adding NVRPlayer to the scene, we made it possible for you to get inside your own VR experience. NVRPlayer is the literal representation of you inside your VR prototype — when you put the headset on and use the controllers, you’re moving NVRPlayer around in 3D space. It’s you in VR!

There’s a lot more going on under the hood in NewtonVR aside from how we’re using it, but don’t worry, we’re skipping all the complexity and only using the parts that make our lives super easy.

One last thing: get rid of the Main Camera in the hierarchy. We don’t need it, it’s only there for non-VR things, and if you leave it in, it will keep throwing an error and may slow your machine down. Not good.

Right-click on it in the hierarchy and choose “Delete”. Bye bye, Main Camera!

So, what’s next?

Step 4: Install the plugin for your VR headset

This is the last step before we can start putting the headset on. Your patience is about to pay off. We’re almost there.

Make sure you still have NVRPlayer in the hierarchy selected. When it’s selected, you’ll see a ton of options and buttons and stuff appear in another area called the Inspector:

Whenever you have something in the hierarchy selected, the inspector shows you what’s inside of it: code scripts, textures, audio files… it also displays all the settings you can change for each of those things.

In the inspector, find the “Install SteamVR” and “Install Oculus SDK” buttons. They should be inside something called “NVR Player (Script)”:

Click on the button that corresponds to the headset you’re using. I’ll provide instructions below in different sections, first for the Vive and then below (scroll down) for the Rift.

If you have a Vive headset…

Unity should have loaded the SteamVR page inside Unity for you:

Remember way back at the beginning when we talked about making a Unity account? If you didn’t, you’re going to have to make one now in order to download and install the SteamVR plugin. Bwomp bwomp.

Ok, after you’re signed up or logged in, click the blue “Download” button (or it’ll be the “Import” button, if you’ve downloaded it before) and you’ll see one of these familiar windows:

Without changing anything, click the “Import” button and Unity will put it inside your project.

While it’s importing, you might see a window like this one:

We don’t need to make a backup for Reasons (suffice it to say that this isn’t going to screw up a blank project), so we’re going to lie to Unity. Click the “I Made a Backup. Go Ahead!” button.

Oh wait, there’s another window:

Click “Accept All” on this one. We’re accepting the recommended settings for the plugin we’re installing.

Yes, yes we did.

One final thing you need to do — while NVRPlayer is selected, check the box in the inspector that says “Enable SteamVR”. That checkbox is located in the same place where the Install buttons used to be:

I installed both the plugins in my project, so in the screenshot above I have two checkboxes and no install buttons. (You can enable your project to work with both headsets at the same time, if you want — Newton is awesome like that. Just follow the installation process for the Rift below.)

And that’s it!

The plugin we just installed tells Unity how to talk to your headset and make sure that any time we run our project, it’ll display our world in the headset, pay attention to where we’re looking, listen to the controllers, etc.

Scroll down past the Rift install section and go to Step 6 below.

If you have a Rift headset…

Clicking the “Install Oculus SDK” should have opened a new browser window where you can download it:

Make sure you check the EULA box, then click the blue “Download” button.

Find the download and unzip it wherever you like, then find the unzipped folder and open it.

Open the folder inside called “OculusUtilities”:

That “OculusUtilities” file right there is another Unity package, just like the one we saw when we installed Newton. Go ahead and double-click to open it.

(It might try to open a second instance of Unity instead of doing what it’s supposed to. If it’s doing that when you try to open it, save your project and close Unity, then open it and try double-clicking on the “OculusUtilities” file again to import it into your project.)

Ahh, here we go. This looks familiar:

Without changing anything, click “Import” to add the files to your project, Unity will take care of the rest.

If your Oculus plugin is out of date, for whatever reason, you might see a window like this one:

Click “Yes”, we want the most up-to-date version. (You also might have to restart Unity.)

While it’s importing, you might also see a window like this one:

We don’t need to make a backup for Reasons (suffice it to say that this isn’t going to screw up a blank project), so we’re going to lie to Unity. Click the “I Made a Backup. Go Ahead!” button.

One final thing you need to do — while NVRPlayer is selected, check the box in the inspector that says “Enable Oculus SDK”. That checkbox is located in the same place where the Install buttons used to be:

I installed both the plugins in my project, so in the screenshot above I have two checkboxes and no install buttons. (You can enable your project to work with both headsets at the same time, if you want — Newton is awesome like that. Just follow the installation process for the Vive above.)

And that’s it! The plugin we just installed tells Unity how to talk to your headset and make sure that any time we run our project, it’ll display our world in the headset, pay attention to where we’re looking, listen to the controllers, etc.

Now, it’s time for the moment of truth.

Step 4: Save, hit play, and celebrate

It’s aliiiiiiive! We just got your first VR project working in the headset.

Save your work first: go to File > Save Scene and save your scene, then go to File > Save Project and save the whole enchilada.

Hit the Play button, which runs your project from inside Unity…

…then put your headset on, take a look around, and congratulate yourself on making it this far.

Make sure to come back though, because your project is fairly empty and there’s more we need to do in order to make it an experience.

Step 5: Make a floor

If you tried putting on the headset just now, you’ll have noticed that Unity gave your project a default environment with a horizon, which makes you feel oriented upright (ground below and sky above), but also kind of like you’re floating in orbit around Earth.

Making a floor in our prototype will give us a sense of being grounded, and match what we’re seeing in the headset better to what we’re feeling under our feet in real life.

Go up to the main menu and select GameObject > 3D Object > Plane. You should see a white floor appear:

To make it easier to keep track of our objects, let’s rename the Plane to “Floor” by right-clicking on the Plane in the hierarchy and selecting “Rename” from the menu that pops up.

Also, if something weird happened and for some reason your floor doesn’t look very flat…

…you can click on the Floor object to select it and then check its Position and Rotation in the inspector:

Both Position and Rotation should be set to 0,0,0.

Ok, go ahead and hit Play again, put your headset back on and walk around so you can see how it feels now that there’s solid ground beneath you. Virtual floors can really feel quite floor-like!

Pro floor tip: Does it feel like you’re knee-deep in your floor, or hovering above it? This is what I call “floor slipping” and has nothing to do with your Unity settings. It’s caused by your VR sensors becoming miscalibrated from where they think your real-life floor is. If you’re having those kinds of floor problems when you’re in your VR project, recalibrate your VR hardware setup…

…and try out your prototype again to see if that fixed it.

A floor, our first virtual object. We’re learning so fast.

Hey, you know what I hear is really fun in VR?

Throwing things.

Let’s make something we can throw.

Step 6: Make a ball you can throw

Go up to the main menu and select Create > 3D Object > Sphere. This will spawn a huge white sphere in your scene:

Before we do anything else, make sure to rename your sphere to “Ball”. This ball is now a prop in our prototype. But balls you can’t touch or play around with aren’t very interesting (heh), so we’re going to make yours interactable. You will be able to pick it up, throw it around, roll it across the floor, basically all the stuff you can do with a ball in real life.

Next to your ball, do you see that green wireframe mannequin waving hello? It’s roughly normal human sized, so if it looks small next to that sphere you just made, that’s because the sphere is pretty honking big right now (1 meter in diameter, or about 3.3 feet). We’re going to resize our ball to be more hand-friendly.

There are red, blue, and green arrows pointing out of the sphere. This is called a Gizmo. Double-click on your ball in the hierarchy to zoom into it so you can see it up close:

If you’ve never used a 3D program before, the gizmo is an interface element that you can click on with the mouse and then drag up and down, left and right to change the shape’s position, rotation, or scale (size).

We’re going to use the gizmo to change our ball’s position and scale.

First, click on this button, or press the r hotkey on your keyboard:

Your gizmo should have changed to the scaling tool. Find the white square in the center of the gizmo (it turns yellow when you select it), then click and drag your mouse so the ball shrinks in size:

Great, that looks small enough to fit in our hand. Next, we’ll change the position so it’s closer to our green human wireframe. (It’s where we’ll be standing when we put our headset on in a few minutes.)

Click on this button, or press the w hotkey on your keyboard:

Then click and drag your mouse pointer on any of the arrows (red, blue, or green) aiming in the direction you want to move your ball to:

Awesome, now it’s time to give our ball interaction properties.

Go to the NewtonVR folder and find the “NVRInteractableItem” script:

Make sure your ball is selected, then drag the NVRInteractableItem script into the empty space in the inspector:

Adding this script to our ball makes it possible for you to pick it up and throw it using the controllers.

Next, we’re going to click the “Add Component” button at the bottom of the inspector beneath the script we just added:

This brings up a menu just for our ball object. Go to Physics > Rigidbody, and Unity will add a new component to your ball:

This Rigidbody thing tells Unity that physics should apply to this object. (There’s a lot of physics functionality in there, as you can see.)

Ok, so we did a lot of stuff. Let’s recap:

1. Made a ball,
2. resized the ball and moved it within reach from where we’ll be inside VR,
3. enabled ourselves to pick it up and throw it, and
4. gave the ball physical properties so it behaves like a real object.

Try it out. Press Play, get that headset on and grab your controllers.

Reach down and pick up the ball. (In case you didn’t figure it out already, NewtonVR uses the grip buttons on your controller to pick up and hold objects.) Try tossing it up in the air, switching it back and forth between your hands, throwing it in any direction you like.

Woah, hold on.

Did you just make a VR interaction prototype all by yourself?!

Wow. I’m impressed, seriously. You’re getting so good at Unity.

Throwing stuff in VR is fun… but knocking stuff over is even better. Let’s make some props we can throw our ball at.

Step 7: Make a bowling pin

Well, in our case, they’re more like tall, skinny 3D rectangles. But they’ll do.

Go up to the main menu and select GameObject > 3D Object > Cube. This will spawn a big cube in your space:

Rename your cube to “Pin”, then resize it to the taller, skinnier shape you’d like it to have using the gizmo:

I’ll leave it up to you to decide how big your pin should be. Ideally, it’s small enough to knock over with your ball, so keep that in mind.

Next, we do the same thing we did earlier with the ball — what do we add to an object we want to be able to interact with?

Add the NVRInteractableItem script to it, followed by adding the Rigidbody:

My scene looks like this, but your pin might be a bit different or in a different location, which is perfectly alright. It’s your decision to put them wherever you want.

Last but not least, we’re going to duplicate our Pin object nine times, so we have ten of them in our prototype. Right-click on your Pin and select “Duplicate” a bunch.

You’ll need to make sure your bowling pin props aren’t inside one another in the scene before you press Play and mess around with your new props. Use the gizmo with each pin selected to reposition your bowling pins, making sure they aren’t inside the floor (clipping through) beneath them.

Mine are set up like this:

Ok, let’s try rolling our ball into the pins we just made…

…strike!

Hmm, the ball doesn’t really crash into the pins the way I’d expect it to. It’s supposed to be a bowling ball, after all, but right now it just doesn’t feel that satisfying. What can we do to change the way our props interact with each other?

Step 8: Tweaking object mass

The bowling prototype we made is fine, but the ball doesn’t smash into the pins with the same force and impact that we’d like. In fact, you have to throw the ball really hard in order to knock more than one or two pins over.

Since we want the ball to hit the pins with more force when they collide with each other, we need to change their Mass, or how heavy they are. We can do this by selecting the ball we made, going to the inspector, and finding the Rigidbody section:

Here, it has a number for mass. A mass of 1 in Unity is the equivalent of how much a liter of water weighs (1kg) — bowling balls definitely weigh more than that. And by default, every object you make starts with a mass of 1.

We can change the way that props bump into each other by playing with the mass numbers to make them feel better, relative to one another.

So, in our current project, both the ball and the pins all have a mass of 1 right now, which is why we’re getting this kind of behavior:

But, if I change the ball’s mass to 10…

…it crashes into the pins harder and creates the feeling of a more forceful impact.

I highly encourage you play around with mass of your props and see how it changes the feel of interactions.

Ok, so at this point we can make props by creating 3D objects and then making them interactable. Awesome, we’re making good progress so far.

Are you ready for some of the more advanced stuff? Still no coding required!

Next up, we’re going to make a new set of VR props that teaches us how to construct complex props out of multiple simple objects and then breathe some color into your world of white.

Step 9: Gluing objects together

Set your bowling props aside for now. For these last few steps, we’re going to make a ping pong paddle and some ping pong balls, building off what we already know.

Ok, so for reference a ping pong paddle looks like this:

Start by thinking about how we can use basic shapes to recreate a paddle. Turns out, we can simplify the shape of a paddle into two objects: first, we’ll make a long, skinny cube for the handle (Main menu: GameObject > 3D Object > Cube)…

…and then we’ll make a flat, thin cylinder for the paddle surface (Main menu: GameObject > 3D Object > Cylinder):

As you can see above, mine are positioned already so that the handle is inside of the paddle. Yours should look similar — use the position tool (hotkey: r) to move them around until they look the way you want them.

(For the perfectionists: reset the position of both the paddle & handle to 0,0,0 in the inspector, and then move them around with the position tool until they look similar to the above screenshot.)

While you’re shaping, positioning and aligning everything, you might want to change your perspective in the scene view to see something better from a different angle. Try using the move tool (hotkey: q), scrolling with the scroll wheel, and clicking and holding the right mouse button to shift your scene view around in 3D:

One last thing: make sure to rename your objects too, so you can keep track of them. Mind are called “Handle” and “Paddle”.

Now, we have to attach them to each other.

Click on your handle object in the hierarchy, then drag and drop it on top of the paddle object:

We just nested the handle object inside the paddle object, so when we go to pick one up, the other one will come with it. It’s basically as if these two are glued together now.

Last but most importantly, we need to add our NVRInteractableItem script and our Rigidbody to the paddle object. Make sure you have the paddle selected (not the handle), then add both of those to the inspector.

Ping pong paddles are heavier than ping pong balls, right? While we’re here, go ahead and change the mass of your paddle to 10 in the Rigidbody section:

Oh, I almost forgot. We still need a ping pong ball!

Go to the menu and select GameObject > 3D Object > Sphere, then resize it relative to your paddle:

Final step: add the NVRInteractableItem script and a Rigidbody to make it interactable.

Ok, time to test our new ping pong paddle out:

Uhhh what the hell? Why won’t it lay flat on the ground?

The behavior we’re seeing isn’t anything we did wrong, it’s actually a quirk of Unity. The people who made Unity decided that all cylinders need to behave in unexpected ways for no good reason, so whenever you make a cylinder object, it will behave like it’s a beach ball instead. Fun!

Let’s take a look at the culprit for why your paddle is rolling around on the ground:

It’s the capsule collider that gets added to all cylinders by default. Boo!

Let’s get rid of it. Select your paddle, then click on the tiny little gear icon next to the scrollbar and choose “Remove Component”:

Phew. Ok, so now our paddle doesn’t have any sides that can collide with the environment around it. Now what?

We’re going to add a Mesh Collider. It basically solves all our problems.

Go to “Add Component” all the way down at the bottom, then select Physics > Mesh Collider from the menu:

One more thing: our new mesh collider needs to be convex, so we just check the box that says “Convex”:

That should do it. Let’s try our paddle out one more time.

!!!!!

This is so cool.

It’s missing one thing, though.

Step 10: Adding color

Ping pong paddles have a very distinctive look: red surface, wooden handle. Unity makes it fairly easy to add color to your props, too, but we have to learn how to make something called a Material first.

A material is like a skin that you can add to a 3D object to define how it looks. It’s a huge part of the visual design of 3D art. In something like Adobe Illustrator, changing the color of something would be as simple as selecting a vector and then changing its fill color using the color picker, but in 3D, the way an object looks is a much more complex system.

Not only can you change colors using materials, you can change transparency, reflection, 3D surface mapping, and a ton more things that are way outside of the scope of what we’re doing.

Today, we’re just going to use materials to change the colors of our paddle.

Look down in your project folders, find the “Assets” folder and select it, then right-click in the empty space of that folder and go to Create > Material.

When you create a new Material, it has you rename it. I’m going to name my first material “Red” so I know what color it’s going to apply to any object I add it to.

Select your new material, then take a look at the inspector to see what options you have available. We’re looking for the color picker:

Click on it to open it up, then change your color to a nice, vivid red:

Mine is set to 255,0,0,255 on the RGBA scale show above, but you can pick whatever shade of red you want.

Next, we’re going to make a second material for the handle. Same process as before: right-click in the empty space of your Assets folder, then choose Create > Material and name it “Wood”.

Looks good to me!

Both our paddle materials are ready. All we need to do now is drag our red material onto the paddle in the hierarchy like so:

Even though the handle object is nested inside the paddle, the material only applies to the paddle. Keep this in mind in the future when you’re putting materials on the props you make — you will have to drag and drop it onto each individual object you want to have that material (color).

Pro material tip: when you have a material selected, you can see a preview of what it will look like on a 3D object in the inspector. Mine is on the lower right-hand side above.

To finish up, drag and drop your wood material onto the handle object in the hierarchy, then hit Play and get your headset on so we can see what our finished prototype looks like:

Bonus: ignore gravity

One of the tricks NewtonVR has up its sleeve is the ability to ignore gravity by individual object. All you have to do is select them, go to the “NVR Interactable Item (Script)” in the inspector, and check the “Enable Kinematic On Detatch” box on that object:

Which results in behavior like this:

Very useful if you need to mock up a static composition of elements, or make some props that need to ignore gravity in order to work the way you want them to.

I have some news for you.

We’re all done. That’s everything. All the basics you need to know, and we managed to cover it in the span of one tutorial.

You have the building blocks of interactable VR props, and a project with examples we made together.

I’m so proud of you. It was a lot of work, but you learned a ton, and maybe you also feel a little more confident working in Unity.

So, what are you going to make next?