VR Webpage Tutorial

By Jakobi Haskell

This is a tutorial for setting up a web server for hosting VR content. Once you have a hosted server, you can follow this tutorial to add collaboration.

What the end product looks like using Firefox Reality Browser:

A-Frame Webpage Tutorial

Steps to setting up VR for Web

Live demo website

I used A-Frame for front-end and AWS Lightsail for the server.

Create or locate A-Frame file you will want to use.
1. To use A-Frame on a new file, create a new index.html file, and attach this line to the head tag of the file:

This line adds a CDN for A-frame's implementation, which is a URL that hosts the necessary A-frame files on multiple servers across the globe, and for efficiency downloads the files from the one that is closest to you.
To add more features, look at the A-Frame documentation here. If you just want a basic VR environment then copy this text as your html file:

<html>

<head>

</head>

<body>

<a-scene>

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

</body>

</html>

The next step is to get a server. I used AWS Lightsail, since I will integrate dynamic multiplayer features later. But, if all you want is a static website for a VR interface, then there are lots of options, including Github Pages, Netlify, or Vercel). Github Pages is convenient because it can upload files directly from a GitHub Repo itself.
Get a domain
1. I bought a test domain on Google Domains, then transferred the DNS to AWS so that it was easier to work with my server.
Attach server to the domain using the Domain Name Service (DNS) of whatever server set-up you are using.
Setup the web server framework
1. A Web Server framework is a tool that allows you to host webpages when clients visit your IP address.
2. The most popular open-sourced web servers are NGINX and Apache. Of these, Apache is easiest to set-up. I used NGINX.
  1. To install these on a linux-based server, use:

sudo apt-get nginx or sudo apt-get apache

Since VR can only be accessed through HTTPS, we must get an SSL certificate before accessing from another device.
1. Next, you will want to obtain a certificate from a Certificate Authority so that clients can visit your website through TLS, a security protocol. This ensures that data sent to and from the server is encrypted, so it is more difficult for intermediaries to access it.
2. A Certificate Authority verifies that the server you access corresponds to the domain name that you accessed it through.
3. Let's encrypt is a free service that makes it really difficult to obtain a certificate from a trusted CA. I would recommend using their Certbot if possible. If you are using AWS Lightsail through Bitnami, like I did, you cannot use certbot, and instead should follow their instructions for getting authorized listed–NGINX or Apache.
Optional: add redirecting of www, https if you don’t want to type it out fully
1. Try changing config file with server name as both www and example.com

Page updated

Google Sites

Report abuse