How to Code VR on the Web in Minutes with A-frame

A-Frame is an open source javascript framework for building VR on the web. WebGL originally made it possible to build VR for the web, but it took many lines of code to setup a simple scene. With A-frame, a lot of the grunt-work is simplified, for example a scene is literally <a-scene> .

Lets jump right into some basic A-frame examples to see it in action

HTML with A-frame

We can get some VR onto the browser straight away with a few lines in an HTML file. The scene is where everything goes. We threw a box in there with <a-box> and defined some of its properties with color, height, and depth.

This gives us a VR world with a blue box:

The goggle button on the bottom right allows you to enter VR mode with a headset or fullscreen mode on desktop.

We can also apply a lot of other properties to it, like transformations:

We used 3 transformations here:
position which moved it up by a factor of 1 on the y-axis
rotation to turn it 45 degrees on the x axis
scale to scale up its size by a factor of 2 on the x-axis.

Here’s the result:

Next, let’s add an animation with <a-animation>

We can specify properties once again to do different things like spinning-

And those are the very basics! Find out more of the features in the documentation: https://aframe.io/

BONUS

A-frame as a component in React? - IT WORKS
Here’s a project from the examples at aframe.io/ that I threw into a React component and got working as a React component:

import React, { Component } from 'react';
const AScene = (props) => {
  return(
    <a-scene>
      <a-assets>
        <img id="pink" src="https://img.gs/bbdkhfbzkk/stretch/http://i.imgur.com/1hyyIUi.jpg" crossorigin="anonymous" />
        <img src="https://img.gs/bbdkhfbzkk/stretch/https://i.imgur.com/25P1geh.png" id="grid" crossorigin="anonymous"/>
        <img src="https://img.gs/bbdkhfbzkk/2048x1024,stretch/http://i.imgur.com/WMNH2OF.jpg" id="chrome" crossorigin="anonymous"/>
        <img id="sky" src="https://img.gs/bbdkhfbzkk/2048x2048,stretch/http://i.imgur.com/WqlqEkq.jpg" crossorigin="anonymous" />
        <a-asset-item id="dawningFont" src="https://cdn.glitch.com/c719c986-c0c5-48b8-967c-3cd8b8aa17f3%2FdawningOfANewDayRegular.typeface.json?1490305922844"></a-asset-item>
        <a-asset-item id="exoFont" src="https://cdn.glitch.com/c719c986-c0c5-48b8-967c-3cd8b8aa17f3%2Fexo2Black.typeface.json?1490305922150"></a-asset-item>
        <a-asset-item id="exoItalicFont" src="https://cdn.glitch.com/c719c986-c0c5-48b8-967c-3cd8b8aa17f3%2Fexo2BlackItalic.typeface.json?1490305922725"></a-asset-item>
      </a-assets>
<a-entity scale="2 2 2" geometry="primitive: torusKnot" position="0 6 -10" material="color: magenta; metalness:1; roughness: 0.1; sphericalEnvMap: #sky;">
        <a-animation easing="linear" attribute="rotation" dur="10000" to="0 0 360" repeat="indefinite"></a-animation>
      </a-entity>
<a-entity position="-3 1 -6" rotation="5 0 0"></a-entity>
        <a-entity
          rotation="0 0 5"
          position="0 2 0.2"
          text-geometry="value: Virtual Reality; font: #dawningFont; bevelEnabled: true; bevelSize: 0.05; bevelThickness: 0.05; curveSegments: 12; size: 1; height: 0;"
          material="color:lavenderblush; metalness:1; roughness: 0; sphericalEnvMap: #pink;"
        ></a-entity>
<a-entity
        geometry="primitive: plane; width: 1000; height: 1000;" rotation="-90 0 0"
        material="src: #grid; repeat: 10000 10000; transparent: true;metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;"></a-entity>
<a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>
      <a-entity light="color: ffaaff; intensity: 1.5" position="5 5 5"></a-entity>
      <a-entity light="color: white; intensity: 0.5" position="-5 5 15"></a-entity>
      <a-entity light="color: white; type: ambient;"></a-entity>
<a-sky src="#sky" rotation="0 -90 0"></a-sky>
    </a-scene>
  )
}
export default AScene