aframe.md

A-Frame

Building Blocks for the VR Web

A-Frame is an open-source framework for creating 3D and virtual reality experiences on the web.

Getting Started

Here are two options to getting started with A-Frame ##Option 1

fork this repo 🍴🐙

A-Frame Boilerplate

Boilerplate for creating WebVR scenes using A-Frame.

After you have forked this repo, clone a copy of your fork locally and you'll have your scene ready in these few steps:

git clone https://github.com/aframevr/aframe-boilerplate.git
cd aframe-boilerplate && rm -rf .git && npm install && npm start
open http://localhost:3000/

---

##Option 2 You can also just include the JS build from the CDN and drop a script tag straight into our HTML:

<!-- Production Version, Minified -->
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

<!-- Development Version, Uncompressed with Source Maps -->
<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>

#So how does it work? A-Frame allows us to create VR scenes that work across desktop, the Oculus Rift, and mobile with just HTML. We can drop in the library and have a VR scene running in just a few lines of markup. Since it based on HTML, we can manipulate scenes with JavaScript like we would with normal HTML elements, and we can continue using our favorite JavaScript libraries and frameworks (e.g., d3, React).

---

The simplest scene would be a scene containing a box primitive:

<a-scene>
    <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>

Primitives are the basic building blocks of A-Frame with familiar HTML syntax. Under the hood, primitives are aliases entities that proxy HTML attribute values to component property values. Entities are placeholder objects to which we plug in components to in order to provide them apperance, behavior, and functionality. Just like with regular HTML elements, each attribute of the entity maps to one value.

##Transforming the Box

A-Frame uses a right-handed coordinate system which can be roughly thought of:

• Positive X-axis as “right”
• Positive Y-axis as “up”
• Positive Z-axis as going out of the screen towards us

The basic distance unit in is defined in meters.

##Animating the Box

We can add an animation to the box using the built-in animation system. An animation is defined by placing an

<a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>

tag as a child of the entity to animate. Let’s have the box rotate indefinitely to get some motion into our scene:

---

Alternatively, we could just use vanilla JavaScript to manually register an event listener and visually change the box when we look at it:

var box = document.querySelector('a-box');
box.addEventListener('mouseenter', function () {
  box.setAttribute('scale', {
    x: 4,
    y: 1,
    z: 6
  });
});

Here are some examples of A-Frame:

A-Frame Examples