In this project you will be learning how to code a world for virtual reality. This will be a beginners look at coding and with that you can also experience a VR world. With enough practice in the coding your world can become more diverse and interesting. To start you will need to sign up for codepen which is playground for learning and using HTML, CSS, and Javascript coding. When you sign up, be sure to select the free plan and scroll past the “Pro plan” options. Once your account is created and you are signed in, go to this site and click on “fork” to create a copy of the pen. A fork is a complete copy of Pen, we use the fork option instead of copying/pasting the code because a fork retains a history of who the original author is and gives credit where credit is due automatically. Click on settings then copy/paste this HTML code to the right in the “Stuff for <head> box”:

<script
src=”https://aframe.io/release/0.3.0/aframe.min.js
“></script>

Click “Save & Close”. While this next step is optional, if you would like to edit the Pen’s title and decription to make it more of your own you have the option to do that. Let’s start out Hello World VR experience by assing a boc <a-box>. Copy/paste the following HTML code to the right in the HTML box:

<a-scene>
     <a-box color=”#6173F4″ width=”4″ height=”10″
depth=”2″ position=”-10 2 -5″ rotation=”0 0 45″
scale=”2 0.5 3″></a-box>
</a-scene>

Change the color, width, height, depth, position, rotation, and scale attributes to see how it changes the box in the preview.

Note: A-frame uses a right coordinate system

  • Positive X-axis is “right”
  • Positive Y-axis is “up”
  • Positive Z-axis is pointing out of the screen towards us

The basic distance unit is defined in meters. When designing a scene for VR, it is important to consider the real world scale of the objects we create. A box with height “100” may look normal on our compute screens but in VR the box will appear massive.

The basic rotational unit is defined in degrees. To determine the positive direction of rotation, use the right-hand rule. Point your thumbs down in the diretion of a positive axis, and the direction which our fingers curl around the positive direction of rotation.

 

Next we are going to animate the box using the <a-animation> tag, copy/paste the following HTML code to the right before the </a-box> tag:

<a-animatione attribute=”rotation”
repeat=”indefinite” to=”0 360 0″></a-animation>

Note: you can animate the box in different ways, see the animate documentation for details.

Set the interaction with the box so that the box will animate only when the box is clicked, update the HTML in your code pen with the following code:

<!–Animation will only play when the box is
clicked. –>
<a-animation attribute=”rotation” begin=”clik”
repeat=”indefinite” to=”0 360 0″></a-animation>
</a-box>
<a-camera position=”0 1.8 0″>
<a-cursor color=”#2E3A87″></a-cursor.
</a-camera>

Note: for more advanced coding of an interaction see the A-Frame Documentation

Next we will change the lighting for out VR scene using the <a-light> tag. by defaulst the light is set to ambient and directional light(acts like the sun) Copy/paste the following HTML code to the right after the </a-box> tag.

   <!– New Lights. –>
   <a-light type=”spot” color=”#333″ position=”-20 0
0″ look-at=”a-box”></a-light>
<a-light type=”point” color=”#AAA” position=”0 5
0″><a-light>

Note: try changing the lighting properties using the light documentation

Last we can add a background to the scene using the <a-sky> tag. Copy/paste the following HTML code to the right after your lighting code.

<!– Background. –>
<a-sky color”#73F7DD”></a-sky>
<a-camera position=”0 1.8 0″>

Open your Code Pen on your phone’s browser, tap the Google Cardboard icon in the lower right hand corner of the screen, then we will supply you with the Google Cardboard to put our phone into to experience your virtual world!

 

Veronica Armour

Instructional Designer