A-Frame

New to the scene: A-Frame.

It’s looking good, but is WebGL only (so far at least), built on top of Three.js. To put it into perspective quickly, basically A-Frame is to Three.js as what Famous Framework was to Famous Engine. A-Frame adds a declarative HTML layer on top of Three.js.

The project is operated by Mozilla (the MozVR team specifically).

The design of A-Frame begs a new design consideration our project. A-Frame works by letting us write traditional HTML inside of an HTML file (not inside JavaScript like with React, etc), then A-Frame’s JavaScript reads the DOM in order to generate a scene graph from it.

The question is this: Can A-Frame elements be written to DOM with tools like React and A-Frame will detect elements created with React as they morph?

If so, this implies that if we make our own declarative layer with HTML in the same fashion as A-Frame, then end users of our library will be able to choose any helper library that they want (React, Mithril, Om, Elm, CitoJS, Mercury, etc) and write scene graphs that render with our renderer within the components made with their DOM helper of choice.

This is a really interesting concept which I think will be a great design decision to make.

After looking at the source, I’ve found that A-Frame uses document.registerElement to register the a-scene, a-entity, etc, elements.

This confirms that we can use any DOM manipulation library like React, Mithril, CitoJS, AngularJS, Handlebars, Meteor Spacebars, etc, etc, etc. Those libraries will simply output to or modify the DOM, then the library that created the custom elements (f.e. A-Frame, or our own project!) can decide how those custom elements work.

This is genius, and will be the best way to integrate with… everything.

I’m surprised no one in the whole (what once was) Famous community (and now us) saw the opportunity to use document.registerElement like this! GENIUS! :laughing:

Uhhh, because it is part of custom components and experimental in most browsers and disabled in all by default except chrome? :wink: http://caniuse.com/#search=registerElement

But I agree that it is a great solution.

True, but luckily there’s a polyfill, which is what A-Frame is using. I just made a pull request showing the x-clock example done in React, and put it up at trusktr.io:3237/x-clock-react.html.

document.registerElement is to the browser like what React.createElement is to React, except compatible with anything that manipulates DOM. Pretty cool! :smile:

2 Likes

EDIT: document.registerElement is to the browser like what React.createElement is to React, except compatible with anything that manipulates DOM, and without reactivity (which is why you’d want to add a layer like React or Angular on top).

I missed your Example. Awesome Joe! :smile:

1 Like