/aframe-component-boilerplate

Boilerplate for creating and sharing A-Frame VR components.

Primary LanguageJavaScriptMIT LicenseMIT

aframe-component-boilerplate

Boilerplate for creating and sharing A-Frame VR components.

Note this refers to A-Frame components of the entity-component system, and not Web Components.

The boilerplate comes with a stub component, test suite, examples infrastructure with Github pages, and stubbed README, which begins below.

A path to using the boilerplate:

  • Rename all instances of example and Example to your component name.
  • Write your component.
  • Write your unit tests.
  • Build examples (npm run dev to watch for changes to build example bundles).
  • Clean up this README.
  • Check browser.js and see if components are required and registered correctly. browser.js
  • is used to generate dist files.
  • Publish to NPM (npm publish). This will also generate a browser distribution to commit.
  • Publish examples to Github pages (npm run ghpages).
  • Share your component on Slack and awesome-aframe!

Example usage of the boilerplate:

aframe-example-component

An example component for A-Frame VR.

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  <script src="https://github.com/ngokevin/aframe-component-boilerplate/blob/master/dist/aframe-example-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity example="exampleProp: exampleVal"></a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-example-component

Then register and use.

var AFRAME = require('aframe-core');
var exampleComponent = require('aframe-example-component').component;
AFRAME.registerComponent('example', exampleComponent);
Property Description Default Value