Recovering lost Tudor Treasures with A-frame @ MozFest

Environment

1. Download vr-test1.htm and open it in your browser in another tab. Take a look at the 20 lines of code used to produce the rather dark and menacing landscape you will see. Here is one of the two images making up the scene. What do you notice about it?

2. Download vr-test2.htm and open it in your browser. This is a little sunnier. Instead of using images we are now using an extra piece of Javascript (written by Diego Goberna) to provide a lot of environmental details quickly. In A-frame these are called components.

3. Look at this code. You will see a line which reads:

<a-scene environment="preset: default">

The package contains many other options. In Notepad or similar replace the word default with one of:

forest	arches	checkerboard	contact
dream	egypt	goaland	goldmine
japan	osiris	poison	starry
threetowers	tron	volcano	yavapai

4. Save vr-test2.htm and refresh (F5) the page in the browser. Maybe try a few of these until you find one you like.

Adding objects

1. Below the empty assets tags, add a line of code:

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#FFFFFF"></a-box>

2. Now we have a box which we can position and rotate in 3 dimensions. The three values of the position attribute control left to right, up and down and further/nearer in the scene respectively. (i.e. if we want objects on the ground, the middle number should be 0).

Move things around a bit and when you're ready add other objects, e.g.:

<a-cylinder position="1 0 -3" radius="0.75" height="6" color="#FFC65D"></a-cylinder>

The basic shapes are listed on this page.

3. The camera can be repositioned in a similar way. Below the asset tags add:

<a-entity position="-12 0 -2">
  <a-camera></a-camera>
</a-entity>

4. This puts us in a position to view a very basic building we can add:

<a-box position="-2 0.5 -9" color="grey" depth="6" height="5" width="0.25"></a-box>
<a-box position="-5 0.5 -6" rotation="0 90 0" color="grey" depth="6" height="5" width="0.25"></a-box>
<a-box position="-5 0.5 -12" rotation="0 90 0" color="grey" depth="6" height="5" width="0.25"></a-box>
<a-box position="-8 0.5 -11" rotation="0 0 0" color="grey" depth="2" height="5" width="0.25"></a-box>
<a-box position="-8 0.5 -7" rotation="0 0 0" color="grey" depth="2" height="5" width="0.25"></a-box>
<a-box position="-5 3 -9" rotation="0 0 0" color="grey" depth="6" height="0.25" width="6"></a-box>

Calling other assets

1. Running on a local machine this makes A-Frame rather grumpy. But we can slap a mural on our building. Into the assets section, we can add an image from Wikimedia Commons:

<a-assets>
<img id="dali" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Street_Art_%284240649293%29.jpg">
</a-assets>

2. We then call this asset with our boxes and other objects:

<a-image position="-5 0.5 -5.8" rotation="0 0 0" src="#dali" height="5" width="6"></a-image>

Physics and importing 3D objects

This can be done through a properly configured localhost. Take a look, for instance, at https://github.com/donmccurdy/aframe-physics-system

Useful A-frame tutorials and resources

• Some stuff to watch out for - https://codeburst.io/a-frame-vr-pitfalls-tips-and-tricks-4829aa3cbc22
• Geat walkthrough on a local system to produce a Pacman-like game - https://gamedevacademy.org/beginners-guide-to-a-frame-vr/
• Another good, simple tutorial mentioning quirks of the framework https://hacks.mozilla.org/2017/09/i-built-something-with-a-frame-in-2-days-and-you-can-too/
• Fun tutorial on A-frame physics - https://hacks.mozilla.org/2017/05/having-fun-with-physics-and-a-frame/