How to use JavaScript with A-Frame?

Question

I see that A-Frame is used to build virtual reality experiences with just markup/HTML. How can I use JavaScript alongside the A-Frame markup elements?

Answer 1

A-Frame is a JavaScript/three.js framework, and the HTML is just the outermost declarative layer.

Manipulating the DOM

https://aframe.io/docs/0.2.0/core/entity.html

All elements/objects in A-Frame are entities. We can manipulate these elements using standard DOM methods.

var boxEl = document.querySelector('a-box');
boxEl.setAttribute('width', 5);
boxEl.setAttribute('color', '#FFF');
boxEl.addEventListener('click', function () {
  // If we are using the cursor component.
  boxEl.setAttribute('color', '#FFF');
});
boxEl.emit('some-event');
boxEl.removeAttribute('color');
boxEl.querySelectorAll('a-sphere');

var sphereEl = document.createElement('a-sphere');
sphereEl.setAttribute('radius', 1);
document.querySelector('a-scene').appendChild(sphereEl);
sphereEl.addEventListener('loaded', function () {
  console.log('sphere attached');
});

Entity-Component

https://aframe.io/docs/0.2.0/core/

A-Frame is built on an entity-component-system pattern (ECS), popular in game development and used in engines such as React and PlayCanvas. In ECS, every object (or entity) is created from the ground up by composing components (not to be confused with Web Components). Components add logic, behavior, appearance to entities.

https://aframe.io/docs/0.2.0/core/component.html

We can encapsulate JS within components:

AFRAME.registerComponent('color-on-click', function () {
  schema: {
    color: {default: 'blue'}
  },

  init: function () {
    var el = this.el;  // Reference to the entity.
    var data = this.data;  // Data passed in through HTML, defined in schema.

    el.addEventListener('click', function () {
      el.setAttribute('color', data.color);
    });
  }
});

And attach these components to our entities in HTML. Notice how we are declaratively attaching/plugging in JS to objects in HTML that can take inputs!:

<a-box color="red" color-on-click="color: blue"></a-box>
<a-sphere color="orange" color-on-click="color: white"></a-sphere>

And these components can do anything beyond simple JS. We have access to the entire three.js API so anything in three.js can be easily wrapped. In fact, we wrap any JS library in the world we want in components and use them declaratively.

Manipulating Components

Manipulating properties of components is similar to manipulating HTML attributes. <a-box> consists of geometry and material components. So it looks like under the hood:

<a-entity id="box" geometry="primitive: box" material="color: red" scale="2 2 2"></a-entity>

We can manipulate the individual properties:

var boxEl = document.querySelector('#box');
boxEl.setAttribute('geometry', 'width', 5);
boxEl.getAttribute('material').color;
boxEl.removeAttribute('scale');

Integration

By exposing its API in HTML, A-Frame works well with existing web frameworks and libraries like d3, React, Angular, templating engines.

• aframe-react
• d3 example
• d3 in a-frame component