Space Carousel VR game code can be found on my website

I’ve always been interested in virtual reality. A technological daydream that can be experienced while awake; escaping to a different place without actually traveling.

Sure, I’ve played games, even coded a few of my own. However, that’s not why I love experimenting in VR. I think it is just because I really enjoy creating.

So when I learned about A-Frame back in March 2017, at an SFHTML5 meetup, I decided I needed to get moving fast on this browser based technology which allows for VR. …

Image for post

I would like to tell you about one of the things I’m the most proud of as an app developer and why I consider my app one of the most useful and successful apps out there.

The app started off as an idea to help a good friend who was hospitalized and lost the use of his voice due to a medical condition. To help him I developed an app which used computer speech synthesis to speak for him when he touched software buttons on his iPad.

At first my friends hands where so shaky and weak that he missed touching many of the buttons necessary to speak. So I made the buttons bigger and placed them in areas separated enough from each other to reduce most input errors. Also, I considered what situations he might need to speak in, different conversational settings, hospital, home, shopping and on the go. …

Image for post

I wrote a previous article in which I described where to begin with VR in a browser. This took the popular A-Frame Hello World and extended it a bit, with environment and the ability to move around in that environment with the VR controllers, teleport, etc.

Now this article will go much further. We are going to include JavaScript which can select and activate actions on objects in our VR scene. This will include some cool tracked animation with a quacking duck! A 3D model of the duck will loop on a track around us. When that duck gets too annoying you can shoot it with your laser pointer. …

Image for post
Treasure Island VR

Aye, there be treasure here, mateys!

Pirate Translation: Treasure is hidden in this simulation, my friend.

Image for post
Our treasure chest full of gold coins

This is really an article on how to create a compelling VR environment and experience inside a browser with A-Frame.

To be honest, I thought about having a sunken pirate ship with treasure, but that would be too many polygons and vertices.

So I opted for an office model instead, since after this article I will be writing something exploring multi-user VR access. Possibly with networked-aframe. The office would then be very useful as a meetup place.

Experience The Island

For now let’s take a look at our working island example first. Some explanation is in order. This example takes a while to load because of all the heavy 3D graphic models and assets. In comparison, think about how long it takes a complete game to download and install the first time, and now imagine doing that for the first time while loading a web page. …

Image for post
Solar System of planets orbiting Sun in A-frame simulation example

Let’s start with the basics. A-Frame because it makes it easy for me with what I already know of HTML5 and JavaScript. Is it WebXR compatible? Yes, it is in its current release 1.0.4.

Image for post
Basic Hello World In A-Frame
<!DOCTYPE html>
<meta charset="utf-8">
<title>Hello World A-Frame</title>
<meta name="description" content="Hello World, WebXR! in A-Frame">
<script src=""></script>
<a-scene background="color: #FAFAFA">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>

So what does A-Frame give us to begin with? The Hello World example. Well that’s cool, but I want more. Like an environment around the geometric shapes and the ability to move around in VR. …

Image for post
Screen shot of GitHub account

What are you talking about? How can your code last for a thousand years?

Well let me explain, or better yet, let these videos explain . . .

Better video
More information about the storage method

“*Arctic Code Vault Contributor” if you see this message on your GitHub account overview page, then you are a contributor as well. You should be proud, because it not only acknowledges your contribution to Open Source Software, which should be enough in itself, but it says if civilization fails, you’ll be there posthumously to help in the recovery!

Now here is an even wilder thought . . . Imagine a time in the future in which AI has progressed to the point of AGI (Artificial General Intelligence), let’s assume not the Terminator kind. That AI might read millions of GitHub repositories to get examples for writing it’s own code. Assuming that AI is helping humanity, that again would be a contribution. …

Image for post
Mind Palace 360VR app in the Chrome browser

Check it out here.

Be sure to have a VR headset readily available to get the full experience while tethered to a fast internet connection.

HOW TO USE: Use your controller left thumb stick or pad to move the interface and orbs (spheres) closer to you for teleport with your right hand trigger button and the laser pointer. Then select the green play button to view the coastal video. You can also play open source music (Mozart) by toggle selecting the purple music box

Also notice the shadow of the tripod for the 360 camera on the rock in the screen shot above and the VR button in the bottom right hand corner used to enter VR with your headset. …

Image for post
Three WebXR examples using A-Frame 1.0.4

Published also on my blog.

Welcome Digital Travelers To My VR Sandbox!

It has been three years now since I started coding virtual reality on the internet. As a result I’ve learned a tremendous amount!

Although virtual reality has been around for some time it is only recently that consumer VR HUDs have become available at a somewhat affordable price. Also open source repositories provide for easy coding in HTML5 and JavaScript. This is a very exciting time and I encourage you all to explore and try coding VR for the web in whatever tools or platforms you choose!

There have been many changes in A-Frame and three.js in late 2019–2020 as a result of the move from the WebVR to the new WebXR specification; because of underlying changes to browsers, a lot of things got broke . Not to worry, I upgraded my VR samples to the new A-Frame 1.0.4 release and many of them began to work again after some cleanup. …


Michael McAnally

Founder, VR coder, Sci-Fi Blogger with ideas for human technological-evolution.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store