Your First WebVR App On A-Frame
Mihir Srivastava
A-frame is a framework developed using three.js, a library used to render three-dimensional graphics on the browser. A-frame can be used to build various Virtual Reality applications and games. A-frame supports most of the VR headsets present in the market notably Oculus Rift, Windows Mixed Reality, GearVR, etc.
A-frame is easy to use at it is based on top of HTML, which means that we can develop various VR applications just by using HTML. It is very easy to build VR applications using A-frame. Let Us Build One and see the power of it.
Step 1:
Create a folder VR and navigate the folder in the command prompt and type
code .
to open the folder on Visual Studio. If you want you can use any text editor of your choice. We'll be using Visual Studio in this tutorial.
Step 2:
On command prompt type
npm install lite-server , will install the npm package which will allow us to create our local server to serve the static files and to see the dynamic changes.
Step 3:
Create a new file index.html and paste the following snippets.
<!DOCTYPE html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</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>
Save the file and now on command prompt type npm start and press enter. This will start the local server.
And BOOM !!! you have created your first WebVR. You can navigate here with the help of WASD keys and mouse as you do in games.
Click on this link to see the output.
Subscribe to my newsletter
Read articles from Mihir Srivastava directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by