mozilla

Education Tech Resources

Categories:
Advocacy
Privacy & Security
Virtual Reality
Tools

Advocacy

 

Net Neutrality

#Resist

Privacy & Security

Education Tools

HELP + Security Assistance

Online Privacy

Virtual Reality + A-Frame

Lesson Plans/Curriculum Guides

Build Virtual Realities IN YOUR WEB BROWSER with A-Frame

It’s Free, Easy, and only requires a web browser and an internet connection – no fancy gear necessary

Learn how @ the interactive A-Frame School

Learn more about WebVR:

VR Workshop:

A Guide for Getting Started in WebVR

Did you know that you can use A-Frame to create a WebVR experience with as little as a few lines of code?

A-Frame is an entity-component framework based on top of HTML, making it simple web-based tool for building virtual reality experiences. A-Frame can be used on desktops and also supports most VR headsets such as Vive, Rift, Daydream, GearVR, Cardboard. It can even be used for augmented reality!

Whether you’re new to coding or have years of experience, this guide will point you to the resources you need to get started building WebVR experiences!

Getting Started in WebVR – A Guide for Beginners

 

  1. You don’t need to be an experienced coder to get started with A-Frame, but it’s helpful to recognize some HTML. These activities are a great way to do that:
    1. Puzzles for Teaching HTML (offline activity)
    2. HTML Puzzle Boxes (offline activity)
    3. Thimble Activities for learning to use and style common HTML tags (online)
  2. Now that you’ve familiarized yourself – or your students – with HTML, let’s start to explore A-Frame. These guides include lessons for getting started:
    1. UTeach Outreach: Intro to Web VR Lessons
  3. Put your new skills to the test using these activities:
    1. Building the Olympic rings – Getting Started With A-Frame
    2. Thimble tutorial on A-Frame
    3. Remix Hello World using CodePen

Getting Started in WebVR – A Guide for Coders

  1. If you’re familiar with HTML, here are few great places to learn about A-Frame and get started building –
    1. A-Frame School  
    2. Remix this A-Frame starter example on Glitch
    3. Remix ‘Hello World’ in Code Pen
    4. The A-Frame Installation page provides more options for getting started with A-Frame.
    5. 360 degree Walkthrough

OR create an .html file and include A-Frame in the <head>. Here’s the code:

<html>

<head>

  <script src=”https://aframe.io/releases/0.5.0/aframe.min.js”></script>

</head>

<body>

  <a-scene>

    <a-box position=”-1 0.5 -3″ rotation=”0 45 0″ color=”#4CC3D9″></a-box>

    <a-sphere position=”0 1.25 -5″ radius=”1.25″ color=”#EF2D5E”></a-sphere>

    <a-cylinder position=”1 0.75 -3″ radius=”0.5″ height=”1.5″ color=”#FFC65D”></a-cylinder>

    <a-plane position=”0 0 -4″ rotation=”-90 0 0″ width=”4″ height=”4″ color=”#7BC8A4″></a-plane>

    <a-sky color=”#ECECEC”></a-sky>

  </a-scene>

</body>

</html>
  1. Read about how others have approached webVR development
    1. NPR: How we built a VR project using web technologies
    2. Minecraft in WebvR
  2. Explore this library of curated components you can use in building your own environments

OTHER WEBVR RESOURCES –

8/9/17 VR Workshop links + materials

Tools