Easy VR with Elm and A-Frame

Part 1: First steps

Starting with 3D and VR on the web can be hard, especially if you try to take your first steps with WebGL. There is a lot of code to write just to set up a basic scene, not to mention shader code and interaction.

A-Frame is a framework that aims at making this a lot simpler. You can build your 3D scenes inside your webpage using tags just like you would a regular webpage. There are a lot of pre-defined components you can choose from and everything is ready to be used on simple VR devices such as the Google Daydream.

Elm on the other hand is a great alternative to writing Javascript for your web applications. It makes writing interactive applications easy and helps you to avoid common programming mistakes. Thanks to Eduard Kyvenko there is an easy to use wrapper around A-Frame in Elm. In this and the following posts I’ll give some examples of what is possible with Elm and A-Frame. If you don’t know Elm yet then you should start with the tutorial.

Getting set up

The first thing you will need is a basic webpage which includes Elm and the A-Frame framework. You can set this up yourself but it’s easier to clone the example project from GitHub. Once you have a copy on your disk go into the 0_start directory and follow the README to get the empty scene going on your machine. Connecting to your local server should show you an empty browser page similar to this:

The basic empty scene

There are two important things here: The goggles allow you to switch into full-screen VR mode and the “Explore History” section is the Elm debugger. On a mobile phone the VR mode supports a Cardboard mode for stereoscopic viewing.

Let’s add something

In this tutorial I am not going to repeat all the code that is already in the Git repo but only highlight the most important parts. For the complete code of the following example see the Elm file.

Instead of the regular cube we’ll start with something a bit more interesting. The git project already contains a T-Rex, lovingly crafted by @aronegal and available as a download for MagicaVoxel. Let’s add this to the scene:

First we need to add the model loader, you can find the code here. Put it in a file next to the Main.elm and include it in the imports:

import ModelLoader exposing (..)

Then add a basic entity with the plymodel loader and point it to the T-Rex model:

view model =
scene []
[ entity [ plymodel “src: url(/T-Rex-00.ply)” ] []
]

When you save the changes the Elm code should be compiled and your browser should reload automatically. Nothing has changed though — this is because the dino is actually behind you. You can look around by dragging the mouse in the window.

T-Rex lurking over us

We still need to place the model in the scene so that it is immediately visible. To do this we have to apply some transformations to rotate, scale and move the model. Again, to do this we need to import some additional functionality and then we can apply them as attributes to the entity:

import AFrame.Primitives.Attributes exposing (..)

view model =
scene []
[ entity
[ plymodel "src: url(/T-Rex-00.ply)"
, scale 0.5 0.5 0.5
, position 0 -6 -13
, rotation -90 0 0
]
[]
]

The result should look like this:

Beautifully positioned

And on your mobile phone, if you switch to VR mode, something like this:

This is it for today, you can check out the complete code on GitHub under 1_dino