A-Frame, the WebVR framework for creating 3D visualizations

Building interactive VR objects and environments for course materials or as course assignments has gotten much easier with the development of web frameworks such as A-Frame. This framework leverages WebVR and WebGL APIs using a markup language that should be easy to understand for a beginning web developer. HTML elements are built within a webpage, and each element contains javascript functionality which can be customized to suit the design or interaction with the element. Not only does A-Frame enable one to create static 360° content, it also can utilize positional tracking and controllers to build interactions.

All you need to get going is to add a simple script tag to your page and begin using the custom elements. First you will create your space or “scene” using a  <scene></scene> tag and begin adding what A-Frame calls primitives. These are easy to implement elements that a designed to make building virtual objects appealing for beginners.

See the Pen
Hello World — A-Frame
by mozillavr (@mozillavr)
on CodePen.

This code above produces the environment and objects seen here:
https://aframe.io/examples/showcase/helloworld/. Tap on the google icon to toggle a full screen view and then click in the space to move around. A-Frame can be accessed through the browser as well as most VR headsets (Oculus Go/Rift, Cardboard, Daydream, Vive, GearVR).

Using this framework one can begin building molecular models, recreating historical spaces, designing stage and scene environments for performing arts, and so on. There are many examples of VR projects, each with code displays to get you going on building a project with this powerful framework. Visit https://aframe.io/docs/0.9.0/introduction/ to begin learning.