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

create webvr app and view in fullscreen

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

create webvr app and view in vr

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

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
close-link
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1
close-link