├── .gitignore ├── LICENSE ├── README.md ├── dist └── .gitkeep ├── examples ├── basic │ └── index.html ├── index.html └── main.js ├── index.js ├── package.json └── scripts └── unboil.js /.gitignore: -------------------------------------------------------------------------------- 1 | .sw[ponm] 2 | examples/build.js 3 | examples/node_modules/ 4 | gh-pages 5 | node_modules/ 6 | npm-debug.log 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Kevin Ngo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## aframe-component-boilerplate 2 | 3 | The component boilerplate has been **deprecated.** Use the A-Frame 4 | [angle](https://npmjs.com/package/angle) CLI instead to set up a component 5 | template: 6 | 7 | ```bash 8 | npm install -g angle 9 | angle initcomponent 10 | ``` 11 | 12 | ## Usage (Old) 13 | 14 | This is not at all means required for writing an A-Frame component. It is 15 | intended for publishing and sharing a component for the community to reuse. 16 | 17 | 1. `npm install && npm run unboil` to rename and trim stuff. 18 | 2. [Write your component](https://aframe.io/docs/0.4.0/guides/writing-a-component.html). 19 | 3. Build examples (`npm run dev` to watch for changes to build example bundles). 20 | 4. `npm publish` and commit the `dist/` files. 21 | 5. `npm run ghpages` to share with people. 22 | 6. Share on [Slack](https://aframevr-slack.herokuapp.com/), [awesome-aframe](https://github.com/aframevr/awesome-aframe), 23 | and the [Registry](https://aframe.io/registry/)! 24 | 25 | --trim-- 26 | ## aframe-example-component 27 | 28 | A example component for [A-Frame](https://aframe.io). 29 | 30 | ### API 31 | 32 | | Property | Description | Default Value | 33 | | -------- | ----------- | ------------- | 34 | | | | | 35 | 36 | ### Installation 37 | 38 | #### Browser 39 | 40 | Install and use by directly including the [browser files](dist): 41 | 42 | ```html 43 | 44 | My A-Frame Scene 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | ``` 55 | 56 | #### npm 57 | 58 | Install via npm: 59 | 60 | ```bash 61 | npm install aframe-example-component 62 | ``` 63 | 64 | Then register and use. 65 | 66 | ```js 67 | require('aframe'); 68 | require('aframe-example-component'); 69 | ``` 70 | -------------------------------------------------------------------------------- /dist/.gitkeep: -------------------------------------------------------------------------------- 1 | `npm run dist` to generate browser files. 2 | -------------------------------------------------------------------------------- /examples/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | A-Frame Example Component - Basic 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 |

A-Frame Example Component

24 | Basic 25 |

This is a basic example.

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | require('aframe'); 2 | require('../index.js'); 3 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* global AFRAME */ 2 | 3 | if (typeof AFRAME === 'undefined') { 4 | throw new Error('Component attempted to register before AFRAME was available.'); 5 | } 6 | 7 | /** 8 | * Example component for A-Frame. 9 | */ 10 | AFRAME.registerComponent('example', { 11 | schema: { }, 12 | 13 | /** 14 | * Set if component needs multiple instancing. 15 | */ 16 | multiple: false, 17 | 18 | /** 19 | * Called once when component is attached. Generally for initial setup. 20 | */ 21 | init: function () { }, 22 | 23 | /** 24 | * Called when component is attached and when component data changes. 25 | * Generally modifies the entity based on the data. 26 | */ 27 | update: function (oldData) { }, 28 | 29 | /** 30 | * Called when a component is removed (e.g., via removeAttribute). 31 | * Generally undoes all modifications to the entity. 32 | */ 33 | remove: function () { }, 34 | 35 | /** 36 | * Called on each scene tick. 37 | */ 38 | // tick: function (t) { }, 39 | 40 | /** 41 | * Called when entity pauses. 42 | * Use to stop or remove any dynamic or background behavior such as events. 43 | */ 44 | pause: function () { }, 45 | 46 | /** 47 | * Called when entity resumes. 48 | * Use to continue or add any dynamic or background behavior such as events. 49 | */ 50 | play: function () { } 51 | }); 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aframe-example-component", 3 | "version": "1.0.0", 4 | "description": "Example component for A-Frame.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "browserify examples/main.js -o examples/build.js", 8 | "dev": "budo examples/main.js:build.js --dir examples --port 8000 --live --open", 9 | "dist": "webpack index.js dist/aframe-example-component.js && webpack -p index.js dist/aframe-example-component.min.js", 10 | "lint": "semistandard -v | snazzy", 11 | "prepublish": "npm run dist", 12 | "preghpages": "npm run build && shx rm -rf gh-pages && shx mkdir gh-pages && shx cp -r examples/* gh-pages", 13 | "ghpages": "npm run preghpages && ghpages -p gh-pages", 14 | "start": "npm run dev", 15 | "unboil": "node scripts/unboil.js" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/ngokevin/aframe-component-boilerplate.git" 20 | }, 21 | "keywords": [ 22 | "aframe", 23 | "aframe-component", 24 | "aframe-vr", 25 | "vr", 26 | "mozvr", 27 | "webvr" 28 | ], 29 | "author": "Kevin Ngo ", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/ngokevin/aframe-component-boilerplate/issues" 33 | }, 34 | "homepage": "https://github.com/ngokevin/aframe-component-boilerplate#readme", 35 | "devDependencies": { 36 | "aframe": "^0.2.0", 37 | "browserify": "^13.0.0", 38 | "browserify-css": "^0.9.1", 39 | "budo": "^8.2.2", 40 | "ghpages": "^0.0.8", 41 | "inquirer": "^1.0.2", 42 | "randomcolor": "^0.4.4", 43 | "semistandard": "^8.0.0", 44 | "shelljs": "^0.7.0", 45 | "shx": "^0.1.1", 46 | "snazzy": "^4.0.0", 47 | "webpack": "^1.13.0" 48 | }, 49 | "semistandard": { 50 | "ignore": [ 51 | "examples/build.js", 52 | "dist/**" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /scripts/unboil.js: -------------------------------------------------------------------------------- 1 | /* global find, ls, sed */ 2 | require('shelljs/global'); 3 | var exec = require('child_process').exec; 4 | var inquirer = require('inquirer'); 5 | 6 | // You can manually add configuration options here if you don't want to go through the 7 | // interactive script or if the interactive script is not working. 8 | var CONFIG = { 9 | // What is your component's short-name? (e.g., `rick-roll` for aframe-rick-roll-component). 10 | shortname: '', 11 | // What is your component's long-name? (e.g., `Rick Roll` for A-Frame Rick Roll Component). 12 | longname: '', 13 | // Where is your component on GitHub (e.g., yourusername/aframe-rick-roll-component). 14 | repo: '', 15 | // Who are you? (e.g., Jane John ). 16 | author: '' 17 | }; 18 | 19 | // --- 20 | 21 | exec("sed '1,/--trim--/d' README.md | tee README.md"); 22 | 23 | if (CONFIG.shortname && CONFIG.longname && CONFIG.repo) { 24 | run(CONFIG); 25 | process.exit(0); 26 | } 27 | 28 | var q1 = { 29 | name: 'shortname', 30 | message: 'What is your component\'s short-name? (e.g., `rick-roll` for aframe-rick-roll-component, ``)', 31 | type: 'input' 32 | }; 33 | 34 | var q2 = { 35 | name: 'longname', 36 | message: 'What is your component\'s long-name? (e.g., `Rick Roll` for A-Frame Rick Roll Component)', 37 | type: 'input' 38 | }; 39 | 40 | var q3 = { 41 | name: 'repo', 42 | message: 'Where is your component on Github? (e.g., yourusername/aframe-rick-roll-component)', 43 | type: 'input' 44 | }; 45 | 46 | var q4 = { 47 | name: 'author', 48 | message: 'Who are you? (e.g., Jane John )', 49 | type: 'input' 50 | }; 51 | 52 | inquirer.prompt([q1, q2, q3, q4]).then(run); 53 | 54 | function run (ans) { 55 | ls(['index.js', 'package.json', 'README.md']).forEach(function (file) { 56 | sed('-i', 'aframe-example-component', 'aframe-' + ans.shortname + '-component', file); 57 | sed('-i', 'Example Component', ans.longname + ' Component', file); 58 | sed('-i', 'Example component', ans.longname + ' component', file); 59 | sed('-i', "'example'", "'" + ans.shortname + "'", file); 60 | }); 61 | 62 | ls('README.md').forEach(function (file) { 63 | sed('-i', 'example component', ans.longname + ' component', file); 64 | sed('-i', 'example=', ans.shortname + '=', file); 65 | }); 66 | 67 | find('examples').filter(function (file) { return file.match(/\.html/); }).forEach(function (file) { 68 | sed('-i', 'Example Component', ans.longname + ' Component', file); 69 | sed('-i', 'ngokevin/aframe-component-boilerplate', ans.repo, file); 70 | }); 71 | 72 | ls(['package.json', 'README.md']).forEach(function (file) { 73 | sed('-i', 'aframe-example-component', 'aframe-' + ans.shortname + '-component', file); 74 | sed('-i', 'ngokevin/aframe-component-boilerplate', ans.repo, file); 75 | sed('-i', 'Kevin Ngo ', ans.author, file); 76 | }); 77 | } 78 | --------------------------------------------------------------------------------