{"id":5777,"date":"2019-04-12T17:11:34","date_gmt":"2019-04-12T21:11:34","guid":{"rendered":"https:\/\/blogs.swarthmore.edu\/its\/?p=5777"},"modified":"2019-04-22T12:25:17","modified_gmt":"2019-04-22T16:25:17","slug":"a-frame-the-webvr-framework-for-creating-3d-visualizations","status":"publish","type":"post","link":"https:\/\/blogs.swarthmore.edu\/its\/2019\/04\/12\/a-frame-the-webvr-framework-for-creating-3d-visualizations\/","title":{"rendered":"A-Frame, the WebVR framework for creating 3D visualizations"},"content":{"rendered":"

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<\/a>. 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\u00b0 content, it also can utilize positional tracking and controllers<\/a> to build interactions.<\/p>\n

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\u00a0 <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\u00a0appealing for beginners<\/a>.<\/p>\n

See the Pen
\nHello World \u2014 A-Frame<\/a> by mozillavr (@mozillavr<\/a>)
\non CodePen<\/a>.<\/p>\n