Space Carousel VR game experience

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

Image for post
Image for post

Important Code Update:

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…

Image for post
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
Image for post
IN PROGRESS: Virtual Office in a virtual landscape


Super Advanced Article — not kidding: The idea for this article started off with the need to have multi-user access to a common VR space. There are a multitude of practical applications for this which I won’t go into, but I will choose one, “Virtual Office Space”.

A common place for people to meet, discuss and work together on projects, ideas and things. …

PLEASE NOTE: Some of my older code included parameters for specific types of controllers, HTC Vive, Windows Mixed Reality (WMR) and Oculus Touch.

tracked-controls vive-controls="hand: left" oculus-touch-controls="hand: left" windows-motion-controls="hand: left"

These are no longer necessary. Remove them. Tracked-controls is redundant and the other controller types are included already in hand-controls. I will be updating my code examples shortly, when time allows.

Until then, you can find out more here:

A-Frame. That’s what I use to do WebXR in a browser.

Problem is with all the VR headsets out there it is hard to write code that works for everyone’s hand controllers. In Android that would be called fragmentation.

Also, it looks like it will be some time before we can get rid of hand controllers all together and start using hand tracking, much like in Minority Report.

So here is what works for me:

<!-- nav-mesh: protecting us from running thru things  -->
<a-entity id="navmesh-Hello" gltf-model="assets/gltf/AdvHelloWorldnavmesh.gltf" visible="false" nav-mesh=""></a-entity>
<!-- Basic movement and teleportation --> <a-entity id="cameraRig" movement-controls="constrainToNavMesh: true;" navigator="cameraRig…

Image for post
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
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…

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