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:

Steps to setting up VR for Web

Live demo website

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

<code><script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script></code>



  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>




    <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>




sudo apt-get nginx or sudo apt-get apache