A-Frame Components

A-Frame Components

by Alastair Beeson

Description

A-Frame is an open-source web framework for building virtual reality experiences. It is maintained by developers from Supermedium and Google. A-Frame is an entity component system framework for Three.js where developers can create 3D and WebVR scenes using HTML. In A-Frame, components modify entities which are 3D objects in the scene. We mix and compose components together to build complex objects. They let us encapsulate three. js and JavaScript code into modules that we can use declaratively from HTML. Numerous developers have created their own custom components for A-Frame that can easily be installed through NPM or directly in browser.


Writing an A-Frame Component Tutorial:

https://aframe.io/docs/1.3.0/introduction/writing-a-component.html


A-Frame Component API Documentation:

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


Great Tutorial For Getting the Basics of Designing Components:

https://medium.com/@kewalkishan/writing-a-simple-timer-component-for-a-frame-81889c863589


Curated Example List of Components

All of these have been tested and work with the most recent version of A-Frame, 1.3.0.

Scatterplot: https://github.com/zcanter/aframe-scatterplot

Speech Command: https://github.com/lmalave/aframe-speech-command-component

A-Frame GUI: https://github.com/rdub80/aframe-gui

Forcegraph: https://github.com/vasturiano/aframe-forcegraph-component

Click and Drag Component: https://jesstelford.github.io/aframe-click-drag-component/basic/

VR-Viz: https://github.com/mustafasaifee42/VR-Viz

Superframe: https://github.com/supermedium/superframe

A-Frame Environment:https://github.com/supermedium/aframe-environment-component

Haptic Feedback: https://www.npmjs.com/package/aframe-haptics-component

Object Outlines: https://github.com/takahirox/aframe-outline

Teleport Controls: https://github.com/fernandojsg/aframe-teleport-controls

Aria Screen Reader Tags: https://github.com/rvdleun/aframe-aria

Superhands: https://github.com/wmurphyrd/aframe-super-hands-component

Keyboard: https://github.com/supermedium/aframe-super-keyboard

Walls: https://github.com/omgitsraven/aframe-room-component

Networked A-Frame: https://github.com/networked-aframe

UI Widgets: https://github.com/caseyyee/aframe-ui-widgets

Physics: https://github.com/n5ro/aframe-physics-system


A-Frame Component Registry

A-Frame 's in-house curated collection of components. These are available from within the A-frame Inspector.

https://aframe.io/aframe-registry/


A-Frame Inspector

A visual inspector tool for A-Frame scenes. Just hit <ctrl> + <alt> + i on any A-Frame scene to open up the Inspector.

https://github.com/aframevr/aframe-inspector