Greetings, fellow coders. And welcome back to another installation of Please Do Not Read, where we will be discussing brand new technologies and how to use them. For this week's tech, I will be going over A-Frame, a very popular web framework for building virtual reality experiences. I dabbled a little into A-Frame because I was interested in virtual reality development. Having a bit of experience with augmented reality and loading different 3D objects, virtual reality was not too bad of a transition. So let's begin!
Like I said before, A-Frame is a web framework for virtual reality experiences. It is completely open source and available to use! It is written in JavaScript, which we should all be very familiar with at this point (if you have been keeping up with toy problems). It also utilized the Three.js framework, which we used during the last blog to create our augmented reality scene. And what's really amazing about A-Frame is that the scene and models are all created via HTML.
We can get started by adding this script tag to the head of our index.html:
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
Once we have this script tag included, we can start creating the scene inside of the body. To initialize an A-Frame scene, we can start by adding the "a-scene" tag inside the body. Everything, including models and background, will go inside of this "a-scene" tag. The tag will look something like this:
<body>
<a-scene>
</a-scene>
</body>
This will create a space where we can add models and adjust lighting/scenery for our virtual reality scene. And inside of the "a-scene" tag, we can add the following to create a very basic scene:
<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>
This will create a few models inside of our scene. A box, a sphere, and a cylinder should appear on top of a flat area with an empty background.
And if everything is set up properly, your index.html file should look something like this:
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/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>
Your application when launched should then look something like this. Congratulations, you created a virtual reality scene using only HTML! You can even move around the models using WASD keys. And again, this was just a small example of a very basic virtual reality scene using A-Frame. The example link above has more custom virtual reality scenes with example code as well.
Thanks for reading my very brief blog on A-Frame. There is a lot more information on their docs, and I recommend checking them out if you're looking to dive into virtual reality. Thanks again, and I'll see you all later for another tech time.
Top comments (0)