How to create WebVR app in 10 minutes

Create WebVR app in under 10 minutes. In this tutorial, we’ll be creating a virtual reality application for displaying panoramas.

WebVR is the most accessible technology to create a cross platform VR experience and its support is coming in all major browsers soon. But we can start building WebVR applications now thanks to projects like webvr-polyfill.

Using WebVR boilerplate to create WebVR app

We’ll be using webvr-boilerplate to kickstart our VR app journey. This project can help us to create VR app very easily. It connects threejs, VRControls, VREffect, webvr-polyfill to create an easy starting point for VR projects.

Step 1 – Download and setup project

To create webvr app, the first step is to download the project.

git clone git@github.com:borismus/webvr-boilerplate.git

Now cd into that folder.

cd webvr-boilerplate

Now run npm install

The default example should be running if you run npm start. Our plan is to show a panorama there, so that the person using VR can look around that place.

Step 2 – Add panorama

Get yourself a 360 image. For our example, we’re gonna use this 360 image.

Download that image to your project folder.

Webvr-boilerplate uses threejs internally. We need to tell threejs to use our panorama as a texture.

Now we need to update the code in index.html.

Inside onTextureLoaded function, update the geometry variables as below.

Remove this line scene.add(cube). This will remove the cube from the scene.

In the camera variable, update the fov as 45.

So the code should look like this.

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);

Now if you refresh the page, you should see the panorama loaded. You can use your mouse to move around the panorama.

Step 3 – Viewing in mobile

We can use a service like ngrok so that we can try out our project in mobile. The VR button only presents itself in mobile mode.

1. Download and install ngrok.
2. From the folder with ngrok run ./ngrok http 8000

You’ll be able to see something similar to above. You can move your device to view around the panorama.

If you click the VR icon, you can then view the panorama in virtual reality using something like Google Cardboard.