Making a website that’s a virtual reality experience is getting now lots of attention. Many tools out there to help create such WebVR experiences.
In this article we’ll be exploring one called A-Frame which is built out of HTML and JavaScript.
This exploration isn’t something new and so we’re guiding ourselves through An Intro to WebVR, which is a free 5-part video course teaching the fundamentals of WebVR using A-Frame made available in February 2019 by the Glitch team.
Let’s start by going to this link.
Clicking in the full-screen button…
We can see the following screen and move in it using A,W,S,D (or the arrow keys)
All of this code is in one file (index.html) which uses the a-frame script code.
<!-- This turns our HTML into A-Frame! -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>The code is full of comments so that’s easy to understand what exactly each part is responsible for.
Navigating to a different link…
We can see that we don’t have only simple spheres (they have textures), and there’s the 3D model of an asteroid belt.
Both the textures and the 3D models are in the assets folder.
And each asset item has a specific URL associated with it.
Once in the WebVR scene (click here if you’re not there yet), A-Frame has a very handy tool built into it named A-Frame Inspector.
This tool allows one to explore and modify the code of the scene visually.
Open it by going to your scene and pressing CTRL + Alt + i on Windows or CTRL + Option + i on Mac.
Clicking in one of the elements in the left side (like the sun), we get more details about it.
It’s also possible to bring animation in, as you can see here.
Animations are done using mix-ins, which are used when we want to do something to multiple things in the scene without repeating the code.
Once we mastered these basics, there’s some more advanced things we can do like using JavaScript in the scenes.
This time, instead of using images for the textures, we’re using shaders.
If you want to learn more about A-Frame, use the documentation.