---
title: Getting started with VR
description: As augmented and virtual reality gain more attention in education, we found a web-based, virtual reality program that makes it simple to introduce AR / VR into the classroom. Introducing A-Frame.
image: https://blog.sparkfuneducation.com/hubfs/EDU/BLOG%20Images/Oct%202018/block.png
---

[![Sparkfun](https://www.sparkfuneducation.com/img/logo.png)](https://www.sparkfuneducation.com/index.html)

- [SparkFun Webstore](https://www.sparkfuneducation.com)
- [Higher Ed](https://sparkfuneducation.com/higher-ed/index.html)
- [Contact Us](https://www.sparkfuneducation.com/contact-us.html)
- [Follow Us](https://twitter.com/SparkFunEDU)

- [Home](https://www.sparkfuneducation.com)
- [Blog](https://blog.sparkfuneducation.com)
- [Curriculum](https://www.sparkfuneducation.com/curriculum.html)
- [PD/Events](https://www.sparkfuneducation.com/professional-dev.html)
- [KITS/Materials](https://www.sparkfuneducation.com/materials.html)
- [Educator Stories](https://www.sparkfuneducation.com/educator-stories.html)
- [Activities](https://activities.sparkfuneducation.com)

[Blog Home](https://blog.sparkfuneducation.com/) / [helpful information](https://blog.sparkfuneducation.com/topic/helpful-information) / Getting started with VR

<https://blog.sparkfuneducation.com/rss.xml>

# Getting started with VR

BY [Jeff Branson](https://blog.sparkfuneducation.com/author/jeff-branson) 10/18/18 6:38 AM

[0](https://blog.sparkfuneducation.com/getting-started-with-vr#comments-listing)

[helpful information](https://blog.sparkfuneducation.com/topic/helpful-information), [computer science](https://blog.sparkfuneducation.com/topic/computer-science), [STEM](https://blog.sparkfuneducation.com/topic/stem)

![](https://blog.sparkfuneducation.com/hubfs/EDU/BLOG%20Images/Branson%2c%20Jeff.jpg)

As I attend conferences and education events, the topic that seems to be on everyone's lips is augmented and virtual reality. After doing some research, I wanted to see what it would take to introduce AR / VR into the classroom. I found a tool called [A-Frame](https://aframe.io/) that seems to fit the bill nicely.

## What is A-Frame?

A-Frame is a web-based virtual reality program that allows teachers and students to explore virtual reality through HTML coding. A-Frame uses a JavaScript engine that attaches to the HTML script and runs the virtual and augmented reality functions of the program that has been created. Creating programs in A-Frame is as simple as writing HTML. Let's follow a few simple examples.

## Creating Programs with A-Frame

Take the code below and paste it into a Word document and title it something like “aFrame.html”

I save all my A-Frame programs in a folder called, surprisingly, “AFrame”.

![saving files](https://lh4.googleusercontent.com/7JMu7sJa3lwsklClhWOJfSooWyVR7mdiQOWN4J5MKVOwf3bek_OEjcIlklXnMa4QHVUb-SD_iYrwmWwDymtFgV2mgmynJk1KuUsWrOHtvkg3CnOz7dgaQZrQxaOOM1kb2L-R6tOS)

```

#####Begin code####
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
## <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>##
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-scene>
</body>
</html>
#####end code###
```

After you’ve saved your code, navigate to it in your file browser. You'll see that next to it it has a choice relating to to a web browser. I use Chrome, but A-Frame is a product of Mozilla and is designed to run in Firefox. Ff you click on the file, it will open up in a web browser and you can navigate using the arrows and the trackpad. The arrows control your motion in the virtual environment. The trackpad controls your view in the virtual environment.

![block created in A-Frame](https://blog.sparkfuneducation.com/hs-fs/hubfs/EDU/BLOG%20Images/Oct%202018/block.png?width=600&name=block.png)

## Digging in to the code

At the top, in the head, we actually call the JavaScript engine that runs the webvr platform. With this line of code:

“<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>”.

In the body of our code, we create a box with a box tag. We then position that box on the x-axis the y-axis and the z-axis is actually depth into your screen.

Documentation for A-Frame is relatively straightforward and some great code examples exist at [https://aframe.io/](https://aframe.io/) .

One of the first things I dug into was creating a custom controller. Any Arduino that is capable of being recognized as an HID device will actually serve as a controller for A-Frame. I grabbed one of our [wireless joystick controllers](https://www.sparkfun.com/products/14051), I loaded the code from [here](https://github.com/balboajeff) on my GitHub and away I went with a custom controller.

A-Frame is set up out of the box to work with many of the virtual reality platforms like the HTC Vive and the Oculus Rift. It also works with all of the Google cardboard controllers and will run on phones and tablets.

This is about as simple as it gets in terms of getting started with virtual reality. Let us know how it goes for you!

- [Tweet](https://twitter.com/share)

### Subscribe to SparkFun Education Blog

### Topics

- [helpful information (79)](https://blog.sparkfuneducation.com/topic/helpful-information)
- [Maker Education (60)](https://blog.sparkfuneducation.com/topic/maker-education)
- [teaching tools (55)](https://blog.sparkfuneducation.com/topic/teaching-tools)
- [getting started (54)](https://blog.sparkfuneducation.com/topic/getting-started)
- [Guest Post (44)](https://blog.sparkfuneducation.com/topic/guest-post)
- [computer science (40)](https://blog.sparkfuneducation.com/topic/computer-science)
- [micro:bit (38)](https://blog.sparkfuneducation.com/topic/microbit)
- [student projects (37)](https://blog.sparkfuneducation.com/topic/student-projects)
- [STEM (36)](https://blog.sparkfuneducation.com/topic/stem)
- [programming (34)](https://blog.sparkfuneducation.com/topic/programming)
- [STEAM (31)](https://blog.sparkfuneducation.com/topic/steam)
- [Events (28)](https://blog.sparkfuneducation.com/topic/events)
- [Arduino (25)](https://blog.sparkfuneducation.com/topic/arduino)
- [robotics (20)](https://blog.sparkfuneducation.com/topic/robotics)
- [e-textiles (18)](https://blog.sparkfuneducation.com/topic/e-textiles)
- [Professional Development (17)](https://blog.sparkfuneducation.com/topic/professional-development)
- [basic circuits (17)](https://blog.sparkfuneducation.com/topic/basic-circuits)
- [What is a (16)](https://blog.sparkfuneducation.com/topic/what-is-a)
- [announcement (16)](https://blog.sparkfuneducation.com/topic/announcement)
- [makerspace (15)](https://blog.sparkfuneducation.com/topic/makerspace)
- [Community Partnership Program (14)](https://blog.sparkfuneducation.com/topic/community-partnership-program)
- [Training (13)](https://blog.sparkfuneducation.com/topic/training)
- [raspberry pi (13)](https://blog.sparkfuneducation.com/topic/raspberry-pi)
- [python (11)](https://blog.sparkfuneducation.com/topic/python)
- [AVC (10)](https://blog.sparkfuneducation.com/topic/avc)
- [paper circuits (10)](https://blog.sparkfuneducation.com/topic/paper-circuits)
- [Makey Makey (8)](https://blog.sparkfuneducation.com/topic/makey-makey)
- [SIK (8)](https://blog.sparkfuneducation.com/topic/sik)
- [Adventures in Science (7)](https://blog.sparkfuneducation.com/topic/adventures-in-science)
- [microcontroller (7)](https://blog.sparkfuneducation.com/topic/microcontroller)
- [Internet of Things (5)](https://blog.sparkfuneducation.com/topic/internet-of-things)
- [Processing (4)](https://blog.sparkfuneducation.com/topic/processing)
- [Javascript (3)](https://blog.sparkfuneducation.com/topic/javascript)
- [LilyPad (3)](https://blog.sparkfuneducation.com/topic/lilypad)
- [funding (3)](https://blog.sparkfuneducation.com/topic/funding)
- [weather (3)](https://blog.sparkfuneducation.com/topic/weather)
- [Insider (1)](https://blog.sparkfuneducation.com/topic/insider)
- [Johnny-five (1)](https://blog.sparkfuneducation.com/topic/johnny-five)

All Tags

### Recent Authors

- [Megan Hemmings (79)](https://blog.sparkfuneducation.com/author/megan-hemmings)
- [Maya Kleinbort (22)](https://blog.sparkfuneducation.com/author/maya-kleinbort)
- [Derek Runberg (21)](https://blog.sparkfuneducation.com/author/derek-runberg)
- [Shane Diller (16)](https://blog.sparkfuneducation.com/author/shane-diller)
- [Jeff Branson (15)](https://blog.sparkfuneducation.com/author/jeff-branson)
- [Angela Sheehan (12)](https://blog.sparkfuneducation.com/author/angela-sheehan)
- [Melissa Felderman (9)](https://blog.sparkfuneducation.com/author/melissa-felderman)
- [Megan Arnold (8)](https://blog.sparkfuneducation.com/author/megan-arnold)
- [Brian Huang (6)](https://blog.sparkfuneducation.com/author/brian-huang)
- [Shawn Hymel (6)](https://blog.sparkfuneducation.com/author/shawn-hymel)
- [Shelby Landsman (6)](https://blog.sparkfuneducation.com/author/shelby-landsman)
- [Jahnell Pereira (5)](https://blog.sparkfuneducation.com/author/jahnell-pereira)
- [Hailey Blessing (5)](https://blog.sparkfuneducation.com/author/hailey-blessing)
- [Mike Grusin (3)](https://blog.sparkfuneducation.com/author/mike-grusin)
- [Peter Hanson (3)](https://blog.sparkfuneducation.com/author/peter-hanson)
- [Andrew Milne (3)](https://blog.sparkfuneducation.com/author/andrew-milne)
- [Toni Klopfenstein (2)](https://blog.sparkfuneducation.com/author/toni-klopfenstein)
- [Joanna Drusin (1)](https://blog.sparkfuneducation.com/author/joanna-drusin)
- [Joe Romano (1)](https://blog.sparkfuneducation.com/author/joe-romano)
- [Mrinali P. Kesavadas (1)](https://blog.sparkfuneducation.com/author/mrinali-p-kesavadas)
- [Christa Flores (1)](https://blog.sparkfuneducation.com/author/christa-flores)
- [Michelle Shorter (1)](https://blog.sparkfuneducation.com/author/michelle-shorter)
- [Colleen Graves (1)](https://blog.sparkfuneducation.com/author/colleen-graves)
- [Janelle Curtis (1)](https://blog.sparkfuneducation.com/author/janelle-curtis)
- [Eric Bogatin (1)](https://blog.sparkfuneducation.com/author/eric-bogatin)
- [Athena Zhang Baker (1)](https://blog.sparkfuneducation.com/author/athena-zhang-baker)
- [Janice Levenhagen (1)](https://blog.sparkfuneducation.com/author/janice-levenhagen)
- [Carol Hamilton (1)](https://blog.sparkfuneducation.com/author/carol-hamilton)
- [Vanessa Lail (1)](https://blog.sparkfuneducation.com/author/vanessa-lail)
- [Bobby Chan (1)](https://blog.sparkfuneducation.com/author/bobby-chan)
- [Glenn Samala (1)](https://blog.sparkfuneducation.com/author/glenn-samala)
- [Zack Weaver (1)](https://blog.sparkfuneducation.com/author/zack-weaver)
- [Dr. Jean-Sébastien Blouin (1)](https://blog.sparkfuneducation.com/author/dr-jean-sébastien-blouin)
- [Daphne Sipes (1)](https://blog.sparkfuneducation.com/author/daphne-sipes)
- [Axel Reitzig (1)](https://blog.sparkfuneducation.com/author/axel-reitzig)
- [Justin Weisz (1)](https://blog.sparkfuneducation.com/author/justin-weisz)
- [Kylie Peppler (1)](https://blog.sparkfuneducation.com/author/kylie-peppler)
- [Michael Megliola (1)](https://blog.sparkfuneducation.com/author/michael-megliola)
- [Casey Kuhns (1)](https://blog.sparkfuneducation.com/author/casey-kuhns)
- [Rebecca Grabman (1)](https://blog.sparkfuneducation.com/author/rebecca-grabman)
- [Sylvia Martinez (1)](https://blog.sparkfuneducation.com/author/sylvia-martinez)
- [Charles Randolph (1)](https://blog.sparkfuneducation.com/author/charles-randolph)
- [Ira Sather-Olson (1)](https://blog.sparkfuneducation.com/author/ira-sather-olson)
- [Kathy Strickland (1)](https://blog.sparkfuneducation.com/author/kathy-strickland)
- [Pete Lewis (1)](https://blog.sparkfuneducation.com/author/pete-lewis)
- [Jamie Roth (1)](https://blog.sparkfuneducation.com/author/jamie-roth)
- [Mimi Tran Zambetti (1)](https://blog.sparkfuneducation.com/author/mimi-tran-zambetti)
- [Ryan Jenkins (1)](https://blog.sparkfuneducation.com/author/ryan-jenkins)
- [Kristen Deuschle (1)](https://blog.sparkfuneducation.com/author/kristen-deuschle)
- [Erika Myers (1)](https://blog.sparkfuneducation.com/author/erika-myers)
- [Sara Gonzalez (1)](https://blog.sparkfuneducation.com/author/sara-gonzalez)
- [Celeste Moreno (1)](https://blog.sparkfuneducation.com/author/celeste-moreno)
- [Samantha Nagle (1)](https://blog.sparkfuneducation.com/author/samantha-nagle)
- [Pearce Melcher (1)](https://blog.sparkfuneducation.com/author/pearce-melcher)

All Authors

### Recent Posts

### Submit Your Idea

[![SparkFun Education](https://www.sparkfuneducation.com/img/logo.png)](http://www.sparkfuneducation.com/index.html)

#### Other Resources

- [Contact Us](http://www.sparkfuneducation.com/contact-us.html)
- [About SparkFun](http://www.sparkfun.com)
- [FAQs](https://www.sparkfun.com/static/faq)

- [Customer Service](https://www.sparkfun.com/support)
- [Shipping](https://www.sparkfun.com/support)
- [Terms and Conditions](https://www.sparkfun.com/terms)

#### Sign Up for Newsletter

© Copyright 2016. All Rights Reserved.