Super Stylized Solar System with A-Frame VR

For my first attempt at creating VR content for the web, I tried something called A-Frame. And it was as easy as the day is long.

(This is in an iFrame – to pop it out for your VR goggles, click here)

Obviously, this demo is just a doodle. A boisterous doodle.

‘Cause, let’s face it, the real solar system has far too much empty space to be bombastic. Let’s minimize the empty space, dump the laws of physics, and see how we can make the most familiar-looking planets dance in a truly in-your-face way.

My VR gear gives me some choices of how I see stuff. Realistically, one would view this in 360, not 3D. Because actual planets are so far away, your depth perception doesn’t enter into it. But it’s more fun to look at this in 360 3D – and have things get way closer to your face than actual planets ever could.

That’s often how I like to wade into a new “front-end” technology – to make art. Dumb art. And learn a couple of things along the way.

What I learned here, first and foremost, is that A-Frame is dead easy. It’s got good “screen graph” structure, like VRML – but it’s got minimalist syntax, similar to HTML. You add 3D things as easily as you’d add <div>s to a 2D page. You add things to 3D things as easily as you’d add 2D things to a <div>. It really is that simple.

For this boisterous doodle, I learned how to add “primitives”. Primitive shapes, like spheres and a cylinder. I learned how to map an image onto those primitives. I learned how to animate the primitives, and place them into a “frame of reference” and animate that. I learned how to make a “sky” – the background of the virtual world. And I learned a bit about the usual web-related trade-offs – image resolution vs. download time, and stuff like that.

And that’s about it. I tinkered and monkeyed for an hour or two until all the nonsensical stuff on the screen was meaningless but consistent, absurd but fun.

One of the claims made by A-Frame is that it will run anywhere. You can experience it in VR through any VR goggles that support WebVR. But you can also experience it on pre-VR technology – flat screen. Huge ones on desktop monitors, big ones on laptops, little ones on tablets, or tiny ones on smartphones. A-Frame goes the distance in providing responsive VR that’s easy peasy to use.

Most amazingly – this demo up and renders in my WordPress backend. None of the other technologies I’ve experimented with on this blog do that. They all give me a blank preview window in the backend, and I have to preview the page to see the 3D content in motion. Not so with A-Frame – there it is, right in my WordPress backend. I’m not qualified to comment on the hows and wherefores of that – but I’m qualified to be quite impressed. And I am.

If you’re interested in getting your feet wet with deploying VR on the web, with that “write once, run anywhere, with no plugins” modern-web-groove, I recommend checking out A-Frame.


Tweet about this on TwitterShare on Google+Share on LinkedInShare on FacebookEmail this to someone

Author: Pete

Editor-in-Chief, Lead Software Developer and Artistic Director @

One thought on “Super Stylized Solar System with A-Frame VR”

Comments are closed.