Getting Started With WebXR Part 2 – VR Sessions

This is the fun part where we can actually look around our scene in VR. Also, some much needed code cleaning will be done

Step 1

In this tutorial, we'll be extending our code from Part 1 so users can start an immersive session. This is actually quite easy to do by downloading a community supported component called VRButton.js

This is where us having set up our js files as modules comes in handy. Otherwise, we'd have to rewrite VRButton.js, both now and anytime we'd want to use an updated version

So let's import VRButton into Main.js by adding import { VRButton } from '../three/examples/jsm/webxr/VRButton.js'; below the line where we import three.module.js

Now we just enable xr in our renderer and add the Button to our DOM underneath where we initially created our renderer

And we're all done! Whoa so easy. Now when you visit the website on a VR device you'll see something like this

By clicking on "ENTER VR" you'll enter an immersive session where you can move and look around

If you're opening up the webpage on your computer or mobile phone, you'll see a message saying "VR NOT SUPPORTED". I don't actually like that, but we'll take care of handling that in the next tutorial after we add support to look around on desktop browsers as well

Step 2

Our code base quite frankly is one hot mess, so let's organize it a little better by creating the following functions and wrapping it all in a class

• createRenderer
• createScene
• createUser
• createAssets
• addEventListeners

These functions will get filled out more as we continue on with our tutorials. But for right now it's just reorganizing code and no real additions or subtractions. Below is what everything should roughly look like after we finish cleaning up

The "_" prefix is purely a style thing I like to employ for private variables as a habit from dart programming (where my flutter peeps at? 🙌🏽)

We'll also need to rename main to Main in setup.js and instantiate it with new Main()

Now we're all set to add Desktop / Laptop support in the next tutorial!

Finished code in action

Git Repository

Glossary

• immersive session – The technical name for a session in which immersive VR content is displayed to the user

Feeling generous/want to support me in writing tutorials? Then buy me a coffee, which I'll probably use for boba or almonds (raw and unsalted you heathens) because I don't like coffee

Continue on to Part 3 – Desktop / Laptop Sessions